Conversation
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Ben Juntilla <ben@benjuntilla.com>
There was a problem hiding this comment.
Pull request overview
Adds an informational points breakdown panel to the Shop landing page hero carousel and adjusts Shop UI layout to better accommodate the new content.
Changes:
- Add
PointsBreakdownTableand render it as an optionalrightPanelinProductCarousel. - Update
ProductCarousellayout/animations to support a two-column (text + panel) hero section. - Adjust
CategorySectionvisuals (title sizing, spacing, and a new static section title overlay).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/pages/Shop/ShopIndex.tsx | Injects the points breakdown table into the hero carousel via the new rightPanel prop. |
| src/components/Shop/ProductCarousel.tsx | Adds rightPanel support and updates responsive layout/animation behavior. |
| src/components/Shop/PointsBreakdownTable.tsx | New component rendering a points breakdown table for the Shop hero panel. |
| src/components/Shop/CategorySection.tsx | Removes hover state logic and revises sizing/spacing + adds a static title overlay. |
| <div className="container mx-auto px-4 md:px-8 lg:px-16 w-full"> | ||
| <div className="flex flex-col items-center gap-8 lg:flex-row lg:justify-center lg:gap-24 xl:gap-48"> | ||
| {/* Left: animated text */} | ||
| <div className="w-full lg:w-72 xl:w-102 lg:shrink-0"> |
There was a problem hiding this comment.
xl:w-102 is not a valid Tailwind width utility with the default scale (and there’s no tailwind config in the repo defining it), so this class will be ignored and the intended layout width won’t apply. Use a valid width class (e.g. xl:w-96) or an arbitrary value (e.g. xl:w-[408px]) instead.
| <div className="w-full lg:w-72 xl:w-102 lg:shrink-0"> | |
| <div className="w-full lg:w-72 xl:w-[408px] lg:shrink-0"> |
| interface CategorySectionProps { | ||
| title: string; | ||
| description: string; | ||
| color: string; | ||
| products: Product[]; | ||
| orientation?: "horizontal" | "vertical"; | ||
| animationDirection?: "left-to-right" | "right-to-left" | "bottom-to-top"; | ||
| minHeight?: string; | ||
| onExpand: () => void; |
There was a problem hiding this comment.
The CategorySectionProps interface requires a description, but CategorySection never reads/uses it (it’s not destructured from props). This creates dead props and unnecessary coupling for callers; either remove description from the props type or render/use it (e.g., in the UI or accessibility label).
| @@ -162,7 +163,7 @@ | |||
| </button> | |||
|
|
|||
| {/* Product Cards - Always visible on mobile, hover on desktop */} | |||
There was a problem hiding this comment.
The comment says product cards are "hover on desktop", but the hover/opacity behavior was removed and the cards are now always visible on all breakpoints. Update the comment to reflect the current behavior (or reintroduce the hover behavior if that’s still the intended UX).
| {/* Product Cards - Always visible on mobile, hover on desktop */} | |
| {/* Product Cards - Always visible on all breakpoints */} |
No description provided.