mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-08 03:00:28 -04:00
fix AgentSection and StoreCard
This commit is contained in:
Abhimanyu Yadav
@@ -38,6 +38,7 @@ const preview: Preview = {
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
layout: "fullscreen",
|
||||
},
|
||||
decorators: [
|
||||
(Story, context) => {
|
||||
|
||||
@@ -5,13 +5,14 @@ import { userEvent, within, expect } from "@storybook/test";
|
||||
const meta = {
|
||||
title: "AGPT UI/StoreCard",
|
||||
component: StoreCard,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="flex items-center justify-center">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
agentName: { control: "text" },
|
||||
@@ -21,6 +22,8 @@ const meta = {
|
||||
rating: { control: "number", min: 0, max: 5, step: 0.1 },
|
||||
onClick: { action: "clicked" },
|
||||
avatarSrc: { control: "text" },
|
||||
hideAvatar: { control: "boolean" },
|
||||
creatorName: { control: "text" },
|
||||
},
|
||||
} satisfies Meta<typeof StoreCard>;
|
||||
|
||||
@@ -30,58 +33,63 @@ 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",
|
||||
agentImage: "default_agent_image.jpg",
|
||||
description:
|
||||
"Optimize your website's SEO with AI-powered suggestions and best practices. Get detailed reports and actionable recommendations.",
|
||||
runs: 10000,
|
||||
rating: 4.5,
|
||||
onClick: () => console.log("Default StoreCard clicked"),
|
||||
avatarSrc: "https://github.com/shadcn.png",
|
||||
avatarSrc: "default_avatar.png",
|
||||
creatorName: "AI Solutions Inc.",
|
||||
},
|
||||
};
|
||||
|
||||
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",
|
||||
agentImage: "default_agent_image.jpg",
|
||||
description:
|
||||
"Analyze complex datasets with machine learning algorithms and statistical models for insights.",
|
||||
runs: 5000,
|
||||
rating: 2.7,
|
||||
onClick: () => console.log("LowRating StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar2.jpg",
|
||||
avatarSrc: "default_avatar.png",
|
||||
creatorName: "DataTech",
|
||||
},
|
||||
};
|
||||
|
||||
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",
|
||||
agentImage: "default_agent_image.jpg",
|
||||
description:
|
||||
"Get AI-powered coding help for various programming languages. Debug issues, optimize code, and learn new patterns.",
|
||||
runs: 1000000,
|
||||
rating: 4.8,
|
||||
onClick: () => console.log("HighRuns StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar3.jpg",
|
||||
avatarSrc: "default_avatar.png",
|
||||
creatorName: "DevTools Co.",
|
||||
},
|
||||
};
|
||||
|
||||
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",
|
||||
agentImage: "default_agent_image.jpg",
|
||||
description:
|
||||
"Plan and organize your tasks efficiently with AI assistance. Set priorities, deadlines, and track progress.",
|
||||
runs: 50000,
|
||||
rating: 4.2,
|
||||
onClick: () => console.log("WithInteraction StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar4.jpg",
|
||||
avatarSrc: "default_avatar.png",
|
||||
creatorName: "Productivity Plus",
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const storeCard = canvas.getByText("Task Planner");
|
||||
const storeCard = canvas.getByTestId("store-card");
|
||||
|
||||
await userEvent.hover(storeCard);
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
await userEvent.click(storeCard);
|
||||
},
|
||||
};
|
||||
@@ -89,27 +97,75 @@ export const WithInteraction: Story = {
|
||||
export const LongDescription: Story = {
|
||||
args: {
|
||||
agentName: "AI Writing Assistant",
|
||||
agentImage:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
agentImage: "default_agent_image.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.",
|
||||
"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, and provides vocabulary enhancements for more engaging content. Perfect for content creators, marketers, and writers of all levels.",
|
||||
runs: 75000,
|
||||
rating: 4.7,
|
||||
onClick: () => console.log("LongDescription StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar5.jpg",
|
||||
avatarSrc: "default_avatar.png",
|
||||
creatorName: "ContentGenius",
|
||||
},
|
||||
};
|
||||
|
||||
export const HiddenAvatar: Story = {
|
||||
args: {
|
||||
agentName: "Data Visualizer",
|
||||
agentImage:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
description: "Create stunning visualizations from complex datasets",
|
||||
agentImage: "default_agent_image.jpg",
|
||||
description:
|
||||
"Create stunning visualizations from complex datasets. Generate charts, graphs, and interactive dashboards.",
|
||||
runs: 60000,
|
||||
rating: 4.6,
|
||||
onClick: () => console.log("HiddenAvatar StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar6.jpg",
|
||||
avatarSrc: "default_avatar.png",
|
||||
hideAvatar: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const LongTitle: Story = {
|
||||
args: {
|
||||
agentName:
|
||||
"Universal Language Translator Pro with Advanced Neural Network Technology",
|
||||
agentImage: "default_agent_image.jpg",
|
||||
description:
|
||||
"Breaking language barriers with cutting-edge AI translation technology for global communication.",
|
||||
runs: 120000,
|
||||
rating: 4.9,
|
||||
onClick: () => console.log("LongTitle StoreCard clicked"),
|
||||
avatarSrc: "default_avatar.png",
|
||||
creatorName: "Global Linguistics Technologies",
|
||||
},
|
||||
};
|
||||
|
||||
export const ZeroValues: Story = {
|
||||
args: {
|
||||
agentName: "New Project Template",
|
||||
agentImage: "default_agent_image.jpg",
|
||||
description:
|
||||
"A basic template for new projects with no user data or ratings yet.",
|
||||
runs: 0,
|
||||
rating: 0,
|
||||
onClick: () => console.log("ZeroValues StoreCard clicked"),
|
||||
avatarSrc: "default_avatar.png",
|
||||
creatorName: "Template Systems",
|
||||
},
|
||||
};
|
||||
|
||||
export const MobileView: Story = {
|
||||
args: {
|
||||
agentName: "SEO Optimizer",
|
||||
agentImage: "default_agent_image.jpg",
|
||||
description:
|
||||
"Optimize your website's SEO with AI-powered suggestions and best practices. Get detailed reports and actionable recommendations.",
|
||||
runs: 10000,
|
||||
rating: 4.5,
|
||||
onClick: () => console.log("MobileView StoreCard clicked"),
|
||||
avatarSrc: "default_avatar.png",
|
||||
creatorName: "AI Solutions Inc.",
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "mobile2",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -32,7 +32,7 @@ export const StoreCard: React.FC<StoreCardProps> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex h-[27rem] w-full max-w-md cursor-pointer flex-col items-start rounded-3xl bg-white transition-all duration-300 hover:shadow-lg dark:bg-transparent dark:hover:shadow-gray-700"
|
||||
className="flex h-[27rem] w-full max-w-md cursor-pointer flex-col items-start rounded-3xl transition-all duration-300 dark:bg-transparent dark:hover:shadow-gray-700"
|
||||
onClick={handleClick}
|
||||
data-testid="store-card"
|
||||
role="button"
|
||||
@@ -72,7 +72,7 @@ export const StoreCard: React.FC<StoreCardProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex w-full flex-1 flex-col px-4">
|
||||
<div className="mt-3 flex w-full flex-1 flex-col">
|
||||
{/* Second Section: Agent Name and Creator Name */}
|
||||
<div className="flex w-full flex-col">
|
||||
<h3 className="line-clamp-2 font-poppins text-2xl font-semibold text-[#272727] dark:text-neutral-100">
|
||||
@@ -87,7 +87,7 @@ export const StoreCard: React.FC<StoreCardProps> = ({
|
||||
|
||||
{/* Third Section: Description */}
|
||||
<div className="mt-2.5 flex w-full flex-col">
|
||||
<p className="line-clamp-3 font-sans text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400">
|
||||
<p className="line-clamp-3 font-sans text-base font-normal text-neutral-600 dark:text-neutral-400">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -5,59 +5,62 @@ import { userEvent, within, expect } from "@storybook/test";
|
||||
const meta = {
|
||||
title: "AGPT UI/Composite/Agents Section",
|
||||
component: AgentsSection,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="flex items-center justify-center py-4 md:p-4">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
sectionTitle: { control: "text" },
|
||||
agents: { control: "object" },
|
||||
// onCardClick: { action: "clicked" },
|
||||
hideAvatars: { control: "boolean" },
|
||||
margin: { control: "text" },
|
||||
className: { control: "text" },
|
||||
},
|
||||
} satisfies Meta<typeof AgentsSection>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const defaultAgentImage = "default_agent_image.jpg";
|
||||
const defaultAvatarImage = "default_avatar.png";
|
||||
|
||||
const mockTopAgents = [
|
||||
{
|
||||
agent_name: "SEO Optimizer Pro",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"Boost your website's search engine rankings with our advanced AI-powered SEO optimization tool.",
|
||||
runs: 50000,
|
||||
rating: 4.7,
|
||||
creator_avatar: "https://example.com/avatar1.jpg",
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "seo-optimizer-pro",
|
||||
creator: "John Doe",
|
||||
sub_heading: "SEO Expert",
|
||||
},
|
||||
{
|
||||
agent_name: "Content Writer AI",
|
||||
agent_image:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"Generate high-quality, engaging content for your blog, social media, or marketing campaigns.",
|
||||
runs: 75000,
|
||||
rating: 4.5,
|
||||
creator_avatar: "https://example.com/avatar2.jpg",
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "content-writer-ai",
|
||||
creator: "Jane Doe",
|
||||
sub_heading: "Content Writer",
|
||||
},
|
||||
{
|
||||
agent_name: "Data Analyzer Lite",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
agent_image: defaultAgentImage,
|
||||
description: "A basic tool for analyzing small to medium-sized datasets.",
|
||||
runs: 10000,
|
||||
rating: 3.8,
|
||||
creator_avatar: "https://example.com/avatar3.jpg",
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "data-analyzer-lite",
|
||||
creator: "John Doe",
|
||||
sub_heading: "Data Analyst",
|
||||
@@ -68,125 +71,116 @@ export const Default: Story = {
|
||||
args: {
|
||||
sectionTitle: "Top Agents",
|
||||
agents: mockTopAgents,
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleAgent: Story = {
|
||||
args: {
|
||||
sectionTitle: "Top Agents",
|
||||
sectionTitle: "Featured Agent",
|
||||
agents: [mockTopAgents[0]],
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const NoAgents: Story = {
|
||||
args: {
|
||||
sectionTitle: "Top Agents",
|
||||
sectionTitle: "Recommended Agents",
|
||||
agents: [],
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
sectionTitle: "Top Agents",
|
||||
sectionTitle: "Popular Agents",
|
||||
agents: mockTopAgents,
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const firstCard = canvas.getAllByRole("store-card")[0];
|
||||
// Using the proper test ID that's defined in the StoreCard component
|
||||
const firstCard = canvas.getAllByTestId("store-card")[0];
|
||||
await userEvent.hover(firstCard);
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
await userEvent.click(firstCard);
|
||||
await expect(firstCard).toHaveAttribute("aria-pressed", "true");
|
||||
},
|
||||
};
|
||||
|
||||
export const MultiRowAgents: Story = {
|
||||
args: {
|
||||
sectionTitle: "Top Agents",
|
||||
sectionTitle: "All Agents",
|
||||
agents: [
|
||||
...mockTopAgents,
|
||||
{
|
||||
agent_name: "Image Recognition AI",
|
||||
agent_image:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"Accurately identify and classify objects in images using state-of-the-art machine learning algorithms.",
|
||||
runs: 60000,
|
||||
rating: 4.6,
|
||||
creator_avatar: "https://example.com/avatar4.jpg",
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "image-recognition-ai",
|
||||
creator: "John Doe",
|
||||
creator: "Alex Smith",
|
||||
sub_heading: "Image Recognition",
|
||||
},
|
||||
{
|
||||
agent_name: "Natural Language Processor",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"Analyze and understand human language with advanced NLP techniques.",
|
||||
runs: 80000,
|
||||
rating: 4.8,
|
||||
creator_avatar: "https://example.com/avatar5.jpg",
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "natural-language-processor",
|
||||
creator: "John Doe",
|
||||
creator: "Maria Garcia",
|
||||
sub_heading: "Natural Language Processing",
|
||||
},
|
||||
{
|
||||
agent_name: "Sentiment Analyzer",
|
||||
agent_image:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"Determine the emotional tone of text data for customer feedback analysis.",
|
||||
runs: 45000,
|
||||
rating: 4.3,
|
||||
creator_avatar: "https://example.com/avatar6.jpg",
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "sentiment-analyzer",
|
||||
creator: "John Doe",
|
||||
creator: "Robert Johnson",
|
||||
sub_heading: "Sentiment Analysis",
|
||||
},
|
||||
{
|
||||
agent_name: "Chatbot Builder",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"Create intelligent chatbots for customer service and engagement.",
|
||||
runs: 55000,
|
||||
rating: 4.4,
|
||||
creator_avatar: "https://example.com/avatar7.jpg",
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "chatbot-builder",
|
||||
creator: "John Doe",
|
||||
creator: "Emma Wilson",
|
||||
sub_heading: "Chatbot Developer",
|
||||
},
|
||||
{
|
||||
agent_name: "Predictive Analytics Tool",
|
||||
agent_image:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"Forecast future trends and outcomes based on historical data.",
|
||||
runs: 40000,
|
||||
rating: 4.2,
|
||||
creator_avatar: "https://example.com/avatar8.jpg",
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "predictive-analytics-tool",
|
||||
creator: "John Doe",
|
||||
creator: "David Lee",
|
||||
sub_heading: "Predictive Analytics",
|
||||
},
|
||||
{
|
||||
agent_name: "Text-to-Speech Converter",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"Convert written text into natural-sounding speech in multiple languages.",
|
||||
runs: 35000,
|
||||
rating: 4.1,
|
||||
creator_avatar: "https://example.com/avatar9.jpg",
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "text-to-speech-converter",
|
||||
creator: "John Doe",
|
||||
creator: "Sarah Brown",
|
||||
sub_heading: "Text-to-Speech",
|
||||
},
|
||||
],
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
};
|
||||
|
||||
@@ -197,3 +191,79 @@ export const HiddenAvatars: Story = {
|
||||
sectionTitle: "Agents with Hidden Avatars",
|
||||
},
|
||||
};
|
||||
|
||||
export const LongAgentNames: Story = {
|
||||
args: {
|
||||
sectionTitle: "Test Cases",
|
||||
agents: [
|
||||
{
|
||||
agent_name:
|
||||
"Universal Language Translator Pro with Advanced Neural Network Technology",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"Breaking language barriers with cutting-edge AI translation technology for global communication.",
|
||||
runs: 120000,
|
||||
rating: 4.9,
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "universal-language-translator",
|
||||
creator: "Global Linguistics Technologies",
|
||||
sub_heading: "Translation Services",
|
||||
},
|
||||
...mockTopAgents.slice(0, 2),
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const LongDescriptions: Story = {
|
||||
args: {
|
||||
sectionTitle: "Test Cases",
|
||||
agents: [
|
||||
{
|
||||
agent_name: "AI Writing Assistant",
|
||||
agent_image: defaultAgentImage,
|
||||
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, and provides vocabulary enhancements for more engaging content. Perfect for content creators, marketers, and writers of all levels.",
|
||||
runs: 75000,
|
||||
rating: 4.7,
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "ai-writing-assistant",
|
||||
creator: "ContentGenius",
|
||||
sub_heading: "Writing Enhancement",
|
||||
},
|
||||
...mockTopAgents.slice(0, 2),
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const ZeroValues: Story = {
|
||||
args: {
|
||||
sectionTitle: "New Agents",
|
||||
agents: [
|
||||
{
|
||||
agent_name: "New Project Template",
|
||||
agent_image: defaultAgentImage,
|
||||
description:
|
||||
"A basic template for new projects with no user data or ratings yet.",
|
||||
runs: 0,
|
||||
rating: 0,
|
||||
creator_avatar: defaultAvatarImage,
|
||||
slug: "new-project-template",
|
||||
creator: "Template Systems",
|
||||
sub_heading: "Project Templates",
|
||||
},
|
||||
...mockTopAgents.slice(0, 2),
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const MobileView: Story = {
|
||||
args: {
|
||||
sectionTitle: "Mobile Optimized Agents",
|
||||
agents: mockTopAgents,
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "mobile2",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -26,13 +26,13 @@ interface AgentsSectionProps {
|
||||
agents: Agent[];
|
||||
hideAvatars?: boolean;
|
||||
margin?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const AgentsSection: React.FC<AgentsSectionProps> = ({
|
||||
sectionTitle,
|
||||
agents: allAgents,
|
||||
hideAvatars = false,
|
||||
margin = "37px",
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
|
||||
@@ -46,15 +46,15 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="w-full max-w-[1360px]">
|
||||
<div className="flex w-full flex-col items-center justify-center">
|
||||
<div className="w-full">
|
||||
<div
|
||||
className={`mb-[${margin}] font-poppins text-lg font-semibold text-[#282828] dark:text-neutral-200`}
|
||||
className={`mb-9 pl-4 font-poppins text-lg font-semibold text-neutral-800 dark:text-neutral-200 md:pl-0`}
|
||||
>
|
||||
{sectionTitle}
|
||||
</div>
|
||||
{!displayedAgents || displayedAgents.length === 0 ? (
|
||||
<div className="text-center text-gray-500 dark:text-gray-400">
|
||||
<div className="font-poppins text-gray-500 dark:text-gray-400">
|
||||
No agents found
|
||||
</div>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user