61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import type { Toy } from '@/types';
|
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { DollarSign, MapPin, Tag } from 'lucide-react';
|
|
|
|
interface ToyCardProps {
|
|
toy: Toy & { dataAiHint?: string }; // dataAiHint is for placeholder, not part of core Toy type
|
|
}
|
|
|
|
export default function ToyCard({ toy }: ToyCardProps) {
|
|
const primaryImage = toy.images && toy.images.length > 0 ? toy.images[0] : 'https://placehold.co/300x200.png';
|
|
const placeholderHint = toy.dataAiHint || toy.category.toLowerCase() || "toy";
|
|
|
|
return (
|
|
<Card className="flex flex-col h-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 rounded-lg">
|
|
<CardHeader className="p-0">
|
|
<div className="aspect-[3/2] relative w-full">
|
|
<Image
|
|
src={primaryImage}
|
|
alt={toy.name}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
data-ai-hint={placeholderHint}
|
|
className="rounded-t-lg"
|
|
/>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-4 flex-grow">
|
|
<CardTitle className="text-lg font-headline mb-2 truncate" title={toy.name}>{toy.name}</CardTitle>
|
|
<div className="text-sm text-muted-foreground space-y-1">
|
|
<div className="flex items-center">
|
|
<Tag className="h-4 w-4 mr-2 text-accent" />
|
|
<span>{toy.category}</span>
|
|
</div>
|
|
{toy.location && (
|
|
<div className="flex items-center">
|
|
<MapPin className="h-4 w-4 mr-2 text-accent" />
|
|
<span>{toy.location}</span>
|
|
</div>
|
|
)}
|
|
{toy.pricePerDay !== undefined && (
|
|
<div className="flex items-center font-semibold text-foreground">
|
|
<DollarSign className="h-4 w-4 mr-1 text-accent" />
|
|
<span>{toy.pricePerDay > 0 ? `${toy.pricePerDay}/day` : 'Free'}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="p-4 border-t">
|
|
<Link href={`/toys/${toy.id}`} passHref className="w-full">
|
|
<Button variant="default" className="w-full transition-transform transform hover:scale-105">
|
|
View Details
|
|
</Button>
|
|
</Link>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|