73e8372b0e
- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments 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-muted">
|
|
<img
|
|
src={product.coverUrl}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--sumi-duration-slow)]"
|
|
alt={product.title}
|
|
/>
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="flex-1 w-full text-center md:text-left">
|
|
<h4 className="font-bold text-foreground 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-card border border-border 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-card border border-border 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-foreground">
|
|
${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>
|
|
);
|
|
};
|