93 lines
4.5 KiB
TypeScript
93 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
} from '@/components/ui/sheet';
|
|
|
|
import { History } from 'lucide-react';
|
|
import type { Shoe } from '@/lib/shoe-database';
|
|
|
|
interface HistorySidebarProps {
|
|
history: Shoe[];
|
|
isOpen: boolean;
|
|
onOpenChange: (isOpen: boolean) => void;
|
|
onItemClick: (shoe: Shoe) => void;
|
|
}
|
|
|
|
export default function HistorySidebar({ history, isOpen, onOpenChange, onItemClick }: HistorySidebarProps) {
|
|
return (
|
|
<Sheet open={isOpen} onOpenChange={onOpenChange}>
|
|
<SheetContent className="flex flex-col h-full bg-black/80 backdrop-blur-xl border-l border-white/20 text-white">
|
|
<SheetHeader className="border-b border-white/10 pb-6">
|
|
<SheetTitle className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full flex items-center justify-center border border-white/30">
|
|
<History size={20} className="text-blue-400" />
|
|
</div>
|
|
Historial de Escaneos
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="flex-1 mt-6 space-y-3 py-2 overflow-y-auto">
|
|
{history.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-64 text-center">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-gray-500/20 to-gray-600/20 rounded-full flex items-center justify-center mb-4 border border-white/10">
|
|
<History size={24} className="text-gray-400" />
|
|
</div>
|
|
<p className="text-white/60 text-lg mb-2">Sin historial</p>
|
|
<p className="text-white/40 text-sm">Los zapatos escaneados aparecerán aquí</p>
|
|
</div>
|
|
) : (
|
|
history.map((shoe, index) => (
|
|
<div
|
|
key={`${shoe.id}-${index}`}
|
|
className="group cursor-pointer"
|
|
onClick={() => onItemClick(shoe)}
|
|
>
|
|
<div className="bg-white/5 hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-xl p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="relative">
|
|
<div className="w-14 h-14 rounded-lg overflow-hidden border border-white/20 group-hover:border-white/30 transition-colors">
|
|
<Image
|
|
src={shoe.imageUrl}
|
|
alt={shoe.name}
|
|
width={56}
|
|
height={56}
|
|
className="object-cover w-full h-full group-hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
{shoe.promotions && shoe.promotions.length > 0 && (
|
|
<div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border border-white/50"></div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className="font-semibold text-white text-sm leading-tight truncate group-hover:text-blue-300 transition-colors">
|
|
{shoe.name}
|
|
</h4>
|
|
<div className="flex items-center space-x-2 mt-1">
|
|
<p className="text-green-400 font-bold text-sm">${shoe.price.toFixed(2)}</p>
|
|
{shoe.promotions?.find(p => p.originalPrice) && (
|
|
<p className="text-gray-500 text-xs line-through">
|
|
${shoe.promotions.find(p => p.originalPrice)?.originalPrice?.toFixed(2)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<p className="text-white/50 text-xs mt-1 truncate">{shoe.description}</p>
|
|
</div>
|
|
<div className="opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
|
<div className="w-6 h-6 bg-blue-500/30 rounded-full flex items-center justify-center">
|
|
<span className="text-blue-300 text-xs">→</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
} |