85 lines
4.0 KiB
TypeScript
85 lines
4.0 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 || '/placeholder-shoe.png'}
|
|
alt={shoe.name}
|
|
width={56}
|
|
height={56}
|
|
className="object-cover w-full h-full group-hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
</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}</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>
|
|
);
|
|
} |