39b2b642d2
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y): - Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source for layout/shell (index.css), shadows (design-system.css), durations/easing. - Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500 replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes. - Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls, AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item, TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable. - ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary. - Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts. - Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories. - .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification. - apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual). Co-authored-by: Cursor <cursoragent@cursor.com>
65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { CartItem as CartItemType } from '../../stores/cartStore';
|
|
import { Card } from '../ui/card';
|
|
import { Button } from '../ui/button';
|
|
import { Trash2, Tag } from 'lucide-react';
|
|
|
|
interface CartItemProps {
|
|
item: CartItemType;
|
|
onRemove: (id: string) => void;
|
|
}
|
|
|
|
export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
|
|
// Access product details from nested object
|
|
const { product } = item;
|
|
|
|
const price = item.selectedLicense ? item.selectedLicense.price : product.price;
|
|
const licenseName = item.selectedLicense
|
|
? item.selectedLicense.name
|
|
: 'Standard';
|
|
|
|
return (
|
|
<Card
|
|
variant="default"
|
|
className="flex flex-col md:flex-row items-center gap-4 p-4 group hover:border-border/50 transition-all"
|
|
>
|
|
{/* Thumbnail */}
|
|
<div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-kodo-graphite">
|
|
<img
|
|
src={product.coverUrl}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--duration-slow)]"
|
|
alt={product.title}
|
|
/>
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="flex-1 w-full text-center md:text-left">
|
|
<h4 className="font-bold text-white text-lg">{product.title}</h4>
|
|
<p className="text-muted-foreground text-sm mb-2">{product.author}</p>
|
|
<div className="flex items-center justify-center md:justify-start gap-2 text-xs">
|
|
<span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded flex items-center gap-1">
|
|
<Tag className="w-3 h-3 text-muted-foreground" /> {licenseName} License
|
|
</span>
|
|
<span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded uppercase font-bold text-muted-foreground">
|
|
{product.type}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Price & Actions */}
|
|
<div className="flex flex-row md:flex-col items-center gap-4 md:gap-2 w-full md:w-auto justify-between">
|
|
<div className="text-xl font-mono font-bold text-white">
|
|
${price.toFixed(2)}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
|
onClick={() => onRemove(item.cartId)}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|