8cbd4f7558
- 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>
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '../ui/card';
|
|
import { Badge } from '../ui/badge';
|
|
import { GearItem } from '../../types';
|
|
import { Tag, DollarSign } from 'lucide-react';
|
|
|
|
interface EquipmentCardProps {
|
|
item: GearItem;
|
|
onClick: (item: GearItem) => void;
|
|
}
|
|
|
|
export const EquipmentCard: React.FC<EquipmentCardProps> = ({
|
|
item,
|
|
onClick,
|
|
}) => {
|
|
const statusColor = {
|
|
Active: 'text-success bg-success/10',
|
|
Maintenance: 'text-warning bg-warning/10',
|
|
Sold: 'text-muted-foreground bg-muted/10',
|
|
Wishlist: 'text-destructive bg-destructive/10',
|
|
};
|
|
|
|
return (
|
|
<Card
|
|
variant="default"
|
|
className="group p-0 overflow-hidden cursor-pointer hover:bg-white/5 transition-colors duration-[var(--duration-fast)] flex flex-col h-full"
|
|
onClick={() => onClick(item)}
|
|
>
|
|
<div className="relative aspect-square bg-card overflow-hidden">
|
|
<img
|
|
src={item.image || 'https://via.placeholder.com/400'}
|
|
className="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity duration-[var(--duration-fast)]"
|
|
/>
|
|
<div className="absolute top-2 right-2">
|
|
<span
|
|
className={`px-2 py-1 rounded text-xs font-bold uppercase backdrop-blur-md ${statusColor[item.status]}`}
|
|
>
|
|
{item.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 flex flex-col flex-1">
|
|
<div className="flex justify-between items-start mb-1">
|
|
<Badge label={item.category} variant="terminal" className="mb-2" />
|
|
</div>
|
|
|
|
<h3 className="font-bold text-foreground text-base truncate mb-1">
|
|
{item.name}
|
|
</h3>
|
|
<p className="text-warning text-xs font-mono uppercase mb-4">
|
|
{item.brand} {item.model}
|
|
</p>
|
|
|
|
<div className="mt-auto pt-3 border-t border-white/5 flex justify-between items-center text-xs">
|
|
<div className="flex items-center gap-1 text-muted-foreground">
|
|
<Tag className="w-3 h-3" /> {item.condition}
|
|
</div>
|
|
<div className="flex items-center gap-1 font-mono text-foreground font-bold">
|
|
<DollarSign className="w-3 h-3 text-muted-foreground" />{' '}
|
|
{item.purchasePrice}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|