more responsive design work

2026-04-08 03:00:28 -04:00 · 2024-10-15 13:17:35 +02:00
parent 9e8f76b749
commit a8c5264e17
8 changed files with 111 additions and 15 deletions
--- a/autogpt_platform/frontend/src/components/agptui/StoreCard.stories.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/StoreCard.stories.tsx
@@ -15,6 +15,7 @@ const meta = {
  tags: ["autodocs"],
  argTypes: {
    agentName: { control: "text" },
+    agentImage: { control: "text" },
    description: { control: "text" },
    runs: { control: "number" },
    rating: { control: "number", min: 0, max: 5, step: 0.1 },
@@ -29,6 +30,8 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
  args: {
    agentName: "SEO Optimizer",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
    description: "Optimize your website's SEO with AI-powered suggestions",
    runs: 10000,
    rating: 4.5,
@@ -40,6 +43,8 @@ export const Default: Story = {
 export const LowRating: Story = {
  args: {
    agentName: "Data Analyzer",
+    agentImage:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
    description: "Analyze complex datasets with machine learning algorithms",
    runs: 5000,
    rating: 2.7,
@@ -51,6 +56,8 @@ export const LowRating: Story = {
 export const HighRuns: Story = {
  args: {
    agentName: "Code Assistant",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
    description: "Get AI-powered coding help for various programming languages",
    runs: 1000000,
    rating: 4.8,
@@ -62,6 +69,8 @@ export const HighRuns: Story = {
 export const WithInteraction: Story = {
  args: {
    agentName: "Task Planner",
+    agentImage:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
    description: "Plan and organize your tasks efficiently with AI",
    runs: 50000,
    rating: 4.2,
@@ -80,6 +89,8 @@ export const WithInteraction: Story = {
 export const LongDescription: Story = {
  args: {
    agentName: "AI Writing Assistant",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
    description:
      "Enhance your writing with our advanced AI-powered assistant. It offers real-time suggestions for grammar, style, and tone, helps with research and fact-checking.",
    runs: 75000,
--- a/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
 import { StarIcon, StarFilledIcon } from "@radix-ui/react-icons";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-
+import Image from "next/image";
 interface StoreCardProps {
  agentName: string;
+  agentImage: string;
  description: string;
  runs: number;
  rating: number;
@@ -13,17 +14,13 @@ interface StoreCardProps {

 export const StoreCard: React.FC<StoreCardProps> = ({
  agentName,
+  agentImage,
  description,
  runs,
  rating,
  onClick,
  avatarSrc,
 }) => {
-  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;
@@ -44,12 +41,18 @@ export const StoreCard: React.FC<StoreCardProps> = ({

  return (
    <div
-      className={`flex h-96 w-screen flex-col pb-2 lg:w-110 ${isHovered ? "shadow-lg" : ""} rounded-xl transition-shadow duration-300`}
+      className="flex h-96 w-64 flex-col rounded-xl pb-2 transition-shadow duration-300 hover:shadow-lg sm:w-64 md:w-80 xl:w-110"
      onClick={onClick}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
    >
-      <div className="h-69 w-full rounded-xl bg-[#d9d9d9]" />
+      <div className="relative h-48 w-full">
+        <Image
+          src={agentImage}
+          alt={`${agentName} preview`}
+          layout="fill"
+          objectFit="cover"
+          className="rounded-xl"
+        />
+      </div>
      <div className="-mt-8 flex flex-col px-4">
        <Avatar className="mb-2 h-16 w-16">
          <AvatarImage src={avatarSrc} alt={agentName} />
--- a/autogpt_platform/frontend/src/components/agptui/marketplace/home/FeaturedSection.stories.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/marketplace/home/FeaturedSection.stories.tsx
@@ -5,7 +5,11 @@ const meta = {
  title: "AGPTUI/Marketplace/Home/FeaturedSection",
  component: FeaturedSection,
  parameters: {
-    layout: "centered",
+    layout: {
+      center: true,
+      fullscreen: true,
+      padding: 0,
+    },
  },
  tags: ["autodocs"],
  argTypes: {
@@ -25,6 +29,8 @@ const mockFeaturedAgents = [
      "Boost your website's search engine rankings with our advanced AI-powered SEO optimization tool.",
    runs: 50000,
    rating: 4.7,
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
  },
  {
    agentName: "Content Writer AI",
@@ -33,6 +39,8 @@ const mockFeaturedAgents = [
      "Generate high-quality, engaging content for your blog, social media, or marketing campaigns.",
    runs: 75000,
    rating: 4.5,
+    agentImage:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
  },
  {
    agentName: "Data Analyzer Lite",
@@ -40,6 +48,8 @@ const mockFeaturedAgents = [
    description: "A basic tool for analyzing small to medium-sized datasets.",
    runs: 10000,
    rating: 3.8,
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
  },
 ];

--- a/autogpt_platform/frontend/src/components/agptui/marketplace/home/FeaturedSection.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/marketplace/home/FeaturedSection.tsx
@@ -3,6 +3,7 @@ import { FeaturedStoreCard } from "../../FeaturedStoreCard";

 interface FeaturedAgent {
  agentName: string;
+  agentImage: string;
  creatorName: string;
  description: string;
  runs: number;
@@ -29,6 +30,7 @@ export const FeaturedSection: React.FC<FeaturedSectionProps> = ({
            <FeaturedStoreCard
              key={index}
              agentName={agent.agentName}
+              agentImage={agent.agentImage}
              creatorName={agent.creatorName}
              description={agent.description}
              runs={agent.runs}
--- a/autogpt_platform/frontend/src/components/agptui/marketplace/home/HeroSection.stories.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/marketplace/home/HeroSection.stories.tsx
@@ -6,7 +6,11 @@ const meta = {
  title: "AGPTUI/Marketplace/Home/HeroSection",
  component: HeroSection,
  parameters: {
-    layout: "centered",
+    layout: {
+      center: true,
+      fullscreen: true,
+      padding: 0,
+    },
  },
  tags: ["autodocs"],
  argTypes: {
--- a/autogpt_platform/frontend/src/components/agptui/marketplace/home/Page.stories.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/marketplace/home/Page.stories.tsx
@@ -6,7 +6,11 @@ const meta = {
  title: "AGPTUI/Marketplace/Home/Page",
  component: Page,
  parameters: {
-    layout: "fullscreen",
+    layout: {
+      center: true,
+      fullscreen: true,
+      padding: 0,
+    },
  },
  tags: ["autodocs"],
  argTypes: {
--- a/autogpt_platform/frontend/src/components/agptui/marketplace/home/TopAgentsSection.stories.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/marketplace/home/TopAgentsSection.stories.tsx
@@ -6,7 +6,11 @@ const meta = {
  title: "AGPTUI/Marketplace/Home/TopAgentsSection",
  component: TopAgentsSection,
  parameters: {
-    layout: "centered",
+    layout: {
+      center: true,
+      fullscreen: true,
+      padding: 0,
+    },
  },
  tags: ["autodocs"],
  argTypes: {
@@ -21,23 +25,32 @@ type Story = StoryObj<typeof meta>;
 const mockTopAgents = [
  {
    agentName: "SEO Optimizer Pro",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
    description:
      "Boost your website's search engine rankings with our advanced AI-powered SEO optimization tool.",
    runs: 50000,
    rating: 4.7,
+    avatarSrc: "https://example.com/avatar1.jpg",
  },
  {
    agentName: "Content Writer AI",
+    agentImage:
+      "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
    description:
      "Generate high-quality, engaging content for your blog, social media, or marketing campaigns.",
    runs: 75000,
    rating: 4.5,
+    avatarSrc: "https://example.com/avatar2.jpg",
  },
  {
    agentName: "Data Analyzer Lite",
+    agentImage:
+      "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
    description: "A basic tool for analyzing small to medium-sized datasets.",
    runs: 10000,
    rating: 3.8,
+    avatarSrc: "https://example.com/avatar3.jpg",
  },
 ];

@@ -80,45 +93,63 @@ export const MultiRowAgents: Story = {
      ...mockTopAgents,
      {
        agentName: "Image Recognition AI",
+        agentImage:
+          "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
        description:
          "Accurately identify and classify objects in images using state-of-the-art machine learning algorithms.",
        runs: 60000,
        rating: 4.6,
+        avatarSrc: "https://example.com/avatar4.jpg",
      },
      {
        agentName: "Natural Language Processor",
+        agentImage:
+          "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
        description:
          "Analyze and understand human language with advanced NLP techniques.",
        runs: 80000,
        rating: 4.8,
+        avatarSrc: "https://example.com/avatar5.jpg",
      },
      {
        agentName: "Sentiment Analyzer",
+        agentImage:
+          "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
        description:
          "Determine the emotional tone of text data for customer feedback analysis.",
        runs: 45000,
        rating: 4.3,
+        avatarSrc: "https://example.com/avatar6.jpg",
      },
      {
        agentName: "Chatbot Builder",
+        agentImage:
+          "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
        description:
          "Create intelligent chatbots for customer service and engagement.",
        runs: 55000,
        rating: 4.4,
+        avatarSrc: "https://example.com/avatar7.jpg",
      },
      {
        agentName: "Predictive Analytics Tool",
+        agentImage:
+          "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
        description:
          "Forecast future trends and outcomes based on historical data.",
        runs: 40000,
        rating: 4.2,
+        avatarSrc: "https://example.com/avatar8.jpg",
      },
      {
        agentName: "Text-to-Speech Converter",
+        agentImage:
+          "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
        description:
          "Convert written text into natural-sounding speech in multiple languages.",
        runs: 35000,
        rating: 4.1,
+        avatarSrc: "https://example.com/avatar9.jpg",
      },
    ],
    onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
--- a/autogpt_platform/frontend/src/components/agptui/marketplace/home/TopAgentsSection.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/marketplace/home/TopAgentsSection.tsx
@@ -1,11 +1,18 @@
 import * as React from "react";
 import { StoreCard } from "../../StoreCard";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";

 interface TopAgent {
  agentName: string;
+  agentImage: string;
  description: string;
  runs: number;
  rating: number;
+  avatarSrc: string; // Added avatarSrc to match StoreCard props
 }

 interface TopAgentsSectionProps {
@@ -23,14 +30,38 @@ export const TopAgentsSection: React.FC<TopAgentsSectionProps> = ({
        <div className="mb-6 font-neue text-[23px] font-bold leading-9 tracking-tight text-[#282828]">
          Top agents
        </div>
-        <div className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        <Carousel
+          className="md:hidden"
+          opts={{
+            loop: true,
+          }}
+        >
+          <CarouselContent>
+            {topAgents.map((agent, index) => (
+              <CarouselItem key={index} className="min-w-64 max-w-68">
+                <StoreCard
+                  agentName={agent.agentName}
+                  agentImage={agent.agentImage}
+                  description={agent.description}
+                  runs={agent.runs}
+                  rating={agent.rating}
+                  avatarSrc={agent.avatarSrc}
+                  onClick={() => onCardClick(agent.agentName)}
+                />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        <div className="hidden w-full grid-cols-1 gap-3 md:grid md:grid-cols-2 lg:grid-cols-3">
          {topAgents.map((agent, index) => (
            <StoreCard
              key={index}
              agentName={agent.agentName}
+              agentImage={agent.agentImage}
              description={agent.description}
              runs={agent.runs}
              rating={agent.rating}
+              avatarSrc={agent.avatarSrc}
              onClick={() => onCardClick(agent.agentName)}
            />
          ))}