github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

made featured store card responsive

Browse Source
This commit is contained in:
SwiftyOS
2024-10-15 10:44:53 +02:00
parent aeb43b7d37
commit 90d3954e8c
2 changed files with 76 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
autogpt_platform/frontend/src/components/agptui/FeaturedStoreCard.stories.tsx
View File

@@ -6,11 +6,15 @@ const meta = {
title: "AGPTUI/FeaturedStoreCard",
component: FeaturedStoreCard,
parameters: {
layout: "centered",
layout: {
center: true,
padding: 0,
},
},
tags: ["autodocs"],
argTypes: {
agentName: { control: "text" },
agentImage: { control: "text" },
creatorName: { control: "text" },
description: { control: "text" },
runs: { control: "number" },
@@ -25,6 +29,7 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
agentName: "SEO Optimizer Pro",
agentImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorName: "AI Solutions Inc.",
description:
"Boost your website's search engine rankings with our advanced AI-powered SEO optimization tool.",
@@ -37,6 +42,7 @@ export const Default: Story = {
export const LowRating: Story = {
args: {
agentName: "Data Analyzer Lite",
agentImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorName: "DataTech",
description: "A basic tool for analyzing small to medium-sized datasets.",
runs: 10000,
@@ -48,6 +54,7 @@ export const LowRating: Story = {
export const HighRuns: Story = {
args: {
agentName: "CodeAssist AI",
agentImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorName: "DevTools Co.",
description:
"Get instant coding help and suggestions for multiple programming languages.",
@@ -60,6 +67,7 @@ export const HighRuns: Story = {
export const LongDescription: Story = {
args: {
agentName: "MultiTasker",
agentImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorName: "Productivity Plus",
description:
"An all-in-one productivity suite that helps you manage tasks, schedule meetings, track time, and collaborate with team members. Powered by advanced AI to optimize your workflow and boost efficiency.",
@@ -69,9 +77,48 @@ export const LongDescription: Story = {
},
};
export const ShortDescription: Story = {
args: {
agentName: "QuickTask",
agentImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorName: "EfficientWorks",
description: "Streamline your workflow.",
runs: 50000,
rating: 4.2,
onClick: () => console.log("Card clicked"),
},
};
export const TwoLineName: Story = {
args: {
agentName: "Agent name goes here example of agent with two lines of text",
agentImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorName: "InnovativeTech Solutions",
description: "Boost your productivity with our cutting-edge AI assistant. Manages tasks, schedules, and more.",
runs: 100000,
rating: 4.8,
onClick: () => console.log("Card clicked"),
},
};
export const TwoLineNameLongDescription: Story = {
args: {
agentName: "Advanced Natural Language Processing and Machine Learning",
agentImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorName: "AI Research Labs",
description:
"Our cutting-edge AI assistant combines state-of-the-art natural language processing and machine learning algorithms to provide unparalleled support in various domains. From text analysis and sentiment detection to predictive modeling and data visualization, this powerful tool empowers researchers, data scientists, and businesses to unlock valuable insights from complex datasets and textual information. With continuous learning capabilities and adaptable interfaces, it's the perfect companion for pushing the boundaries of AI-driven discovery and innovation.",
runs: 150000,
rating: 4.9,
onClick: () => console.log("Card clicked"),
},
};
export const WithInteraction: Story = {
args: {
agentName: "AI Writing Assistant",
agentImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorName: "WordCraft AI",
description:
"Enhance your writing with AI-powered suggestions, grammar checks, and style improvements.",

48
autogpt_platform/frontend/src/components/agptui/FeaturedStoreCard.tsx
View File

@@ -1,8 +1,10 @@
import * as React from "react";
import { StarIcon, StarFilledIcon } from "@radix-ui/react-icons";
import Image from "next/image";
interface FeaturedStoreCardProps {
agentName: string;
agentImage: string;
creatorName: string;
description: string;
runs: number;
@@ -12,17 +14,13 @@ interface FeaturedStoreCardProps {
export const FeaturedStoreCard: React.FC<FeaturedStoreCardProps> = ({
agentName,
agentImage,
creatorName,
description,
runs,
rating,
onClick,
}) => {
const [isHovered, setIsHovered] = React.useState(false);
const handleMouseEnter = () => setIsHovered(true);
const handleMouseLeave = () => setIsHovered(false);
const renderStars = () => {
const fullStars = Math.floor(rating);
const hasHalfStar = rating % 1 !== 0;
@@ -43,38 +41,48 @@ export const FeaturedStoreCard: React.FC<FeaturedStoreCardProps> = ({
return (
<div
className={`inline-flex h-[595px] w-[667px] cursor-pointer flex-col items-start justify-between gap-10 rounded-xl border border-black/10 bg-[#f9f9f9] px-[25px] pb-[15px] pt-[35px] ${
isHovered ? "shadow-lg" : ""
} transition-shadow duration-300`}
className={`
w-screen px-2 pb-2 pt-4 gap-3
md:w-[41.875rem] md:h-[37.188rem] md:px-[1.5625rem] md:pb-[0.9375rem] md:pt-[2.1875rem] md:gap-5 rounded-xl
text-sm md:text-xl tracking-tight font-neue text-[#272727]
inline-flex cursor-pointer flex-col items-start justify-between
border border-black/10 bg-[#f9f9f9] transition-shadow duration-300 hover:shadow-lg
`}
onClick={onClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div className="flex flex-col items-start justify-start gap-3.5 self-stretch">
<div className="self-stretch font-neue text-[40px] font-medium leading-[43px] tracking-tight text-[#272727]">
<div className="flex flex-col items-start justify-start self-stretch">
<div className="text-2xl md:text-4xl font-medium self-stretch ">
{agentName}
</div>
<div className="self-stretch font-neue text-xl font-normal tracking-tight text-[#878787]">
<div className="font-normal self-stretch text-[#878787]">
by {creatorName}
</div>
</div>
<div className="w-[540px] flex-grow font-neue text-xl font-normal tracking-tight text-[#282828]">
{description}
<div className="w-full md:w-[33.75rem] max-h-18 font-normal flex-grow text-clip text-[#282828]">
{description.length > 170 ? `${description.slice(0, 170)}...` : description}
</div>
<div className="flex flex-col items-start justify-end gap-5 self-stretch">
<div className="h-[245px] self-stretch rounded-xl bg-[#a8a8a8]" />
<div className="gap-3 flex flex-col items-start justify-end self-stretch">
<div className="w-full aspect-[540/245] relative">
<Image
src={agentImage}
alt={`${agentName} preview`}
layout="fill"
objectFit="cover"
className="rounded-xl "
/>
</div>
<div className="flex items-center justify-between self-stretch">
<div>
<span className="font-neue text-xl font-medium tracking-tight text-[#272727]">
<span className="font-medium">
{runs.toLocaleString()}+
</span>
<span className="font-neue text-xl font-normal tracking-tight text-[#272727]">
<span className="font-normal">
{" "}
runs
</span>
</div>
<div className="flex items-center gap-2">
<div className="font-neue text-xl font-normal tracking-tight text-[#272727]">
<div className=" font-normal ">
{rating.toFixed(1)}
</div>
<div className="flex items-center justify-start gap-px">