-
Notifications
You must be signed in to change notification settings - Fork 45.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(market): Market featured agent card (#9463)
### Background Resolves: #9313 The marketplace featured agent's section has a bug where if you hover over a featured agent's card we are getting an incorrect background color applied to the description. ### Changes 🏗️ 1. Refactored `FeaturedStoreCard` to `FeaturedAgentCard`: - Condensed props and leverage StoreAgent type from api - Removed onClick handler from props as this is not json serializable and is not inline with NextJS best practices - Used built in Card Components from ShadCN to minimize custom styling. - Optimize images with implementation of the Image component from NextJS 2. Enhanced `FeaturedCardSection` components: - Removing extensive prop passing and leverage the agent itself with the StoreAgent type. - Implemented Link from NextJS to better handler routing and remove the `useRouter` implementation - Removed unnecessary handleCardClick method. ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: Test Plan <details> <summary></summary> - [ ] Goto the landing page of the application or /marketplace - [ ] Scroll to the featured agents section - [ ] Move mouse over each of the cards and observe the image disappearing and text being shown - [ ] Observe the background color of the text that replaced the image matches that of the card </details>
- Loading branch information
1 parent
64050fa
commit 6eee920
Showing
6 changed files
with
141 additions
and
246 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
autogpt_platform/frontend/src/components/agptui/FeaturedAgentCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import Image from "next/image"; | ||
| import { StarRatingIcons } from "@/components/ui/icons"; | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardFooter, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "@/components/ui/card"; | ||
| import { useState } from "react"; | ||
| import { StoreAgent } from "@/lib/autogpt-server-api"; | ||
|
|
||
| interface FeaturedStoreCardProps { | ||
| agent: StoreAgent; | ||
| backgroundColor: string; | ||
| } | ||
|
|
||
| export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({ | ||
| agent, | ||
| backgroundColor, | ||
| }) => { | ||
| const [isHovered, setIsHovered] = useState(false); | ||
|
|
||
| return ( | ||
| <Card | ||
| data-testid="featured-store-card" | ||
| onMouseEnter={() => setIsHovered(true)} | ||
| onMouseLeave={() => setIsHovered(false)} | ||
| className={backgroundColor} | ||
| > | ||
| <CardHeader> | ||
| <CardTitle>{agent.agent_name}</CardTitle> | ||
| <CardDescription>{agent.description}</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="relative h-[397px] w-full overflow-hidden rounded-xl"> | ||
| <div | ||
| className={`transition-opacity duration-200 ${isHovered ? "opacity-0" : "opacity-100"}`} | ||
| > | ||
| <Image | ||
| src={agent.agent_image || "/AUTOgpt_Logo_dark.png"} | ||
| alt={`${agent.agent_name} preview`} | ||
| fill | ||
| sizes="100%" | ||
| className="rounded-xl object-cover" | ||
| /> | ||
| </div> | ||
| <div | ||
| className={`absolute inset-0 overflow-y-auto 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"> | ||
| {agent.description} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| <CardFooter className="flex items-center justify-between"> | ||
| <div className="font-semibold"> | ||
| {agent.runs?.toLocaleString() ?? "0"} runs | ||
| </div> | ||
| <div className="flex items-center gap-1.5"> | ||
| <p>{agent.rating.toFixed(1) ?? "0.0"}</p> | ||
| <div | ||
| className="inline-flex items-center justify-start gap-px" | ||
| role="img" | ||
| aria-label={`Rating: ${agent.rating.toFixed(1)} out of 5 stars`} | ||
| > | ||
| {StarRatingIcons(agent.rating)} | ||
| </div> | ||
| </div> | ||
| </CardFooter> | ||
| </Card> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 0 additions & 96 deletions
96
autogpt_platform/frontend/src/components/agptui/FeaturedStoreCard.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.