Skip to content

fix(frontend): Featured agents cards layout+sizing #9482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Mar 5, 2025
Merged

fix(frontend): Featured agents cards layout+sizing #9482

Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b6e64e4
Fix(Frontend) Update Featured agents cards
Bentlybro Feb 14, 2025
798e194
prettier
Bentlybro Feb 14, 2025
9cb96ce
Merge branch 'dev' into update-Featured-agents-cards
Bentlybro Feb 15, 2025
8895753
Merge branch 'dev' into update-Featured-agents-cards
Bentlybro Mar 5, 2025
7583d8c
fix(frontend): Refactor FeaturedSection and FeaturedAgentCard compone…
andrewhooker2 Mar 5, 2025
17e52f8
final updates based on comments
Bentlybro Mar 5, 2025
050e82c
Merge branch 'dev' into update-Featured-agents-cards
Bentlybro Mar 5, 2025
8c7baba
Prettier
Bentlybro Mar 5, 2025
72c4656
Merge branch 'update-Featured-agents-cards' of https://github.com/Sig…
Bentlybro Mar 5, 2025
902e53b
Merge branch 'dev' into update-Featured-agents-cards
Bentlybro Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 16 additions & 12 deletions autogpt_platform/frontend/src/components/agptui/FeaturedAgentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,20 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
data-testid="featured-store-card"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className={backgroundColor}
className={`flex h-[482px] w-[440px] flex-col ${backgroundColor}`}
>
<CardHeader>
<CardTitle>{agent.agent_name}</CardTitle>
<CardDescription>{agent.description}</CardDescription>
<CardHeader className="flex-none space-y-3 pb-2">
<CardTitle className="text-xl leading-tight">
{agent.agent_name}
</CardTitle>
<CardDescription className="text-sm">
By {agent.creator}
</CardDescription>
</CardHeader>
<CardContent>
<div className="relative h-[397px] w-full overflow-hidden rounded-xl">
<CardContent className="relative flex-1 p-4">
<div className="absolute inset-0 m-4 overflow-hidden rounded-xl">
<div
className={`transition-opacity duration-200 ${isHovered ? "opacity-0" : "opacity-100"}`}
className={`h-full w-full transition-opacity duration-200 ${isHovered ? "opacity-0" : "opacity-100"}`}
>
<Image
src={agent.agent_image || "/AUTOgpt_Logo_dark.png"}
Expand All @@ -47,17 +51,17 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
/>
</div>
<div
className={`absolute inset-0 overflow-y-auto transition-opacity duration-200 ${
className={`absolute inset-0 overflow-y-auto p-4 transition-opacity duration-200 ${
isHovered ? "opacity-100" : "opacity-0"
} rounded-xl dark:bg-neutral-700`}
}`}
>
<p className="text-base text-neutral-800 dark:text-neutral-200">
<CardDescription className="line-clamp-[11] text-sm leading-relaxed text-muted-foreground">
{agent.description}
</p>
</CardDescription>
</div>
</div>
</CardContent>
<CardFooter className="flex items-center justify-between">
<CardFooter className="flex h-[60px] flex-none items-center justify-between">
<div className="font-semibold">
{agent.runs?.toLocaleString() ?? "0"} runs
</div>
Expand Down
Loading