大海
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import type { Pet } from "@/types";
|
|
import { Card } from "@/components/ui/Card";
|
|
|
|
interface PetCardProps {
|
|
pet: Pet;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function PetCard({ pet, onClick }: PetCardProps) {
|
|
return (
|
|
<Card onClick={onClick} className="flex items-center gap-4">
|
|
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-amber-100 to-orange-200 flex items-center justify-center text-2xl overflow-hidden flex-shrink-0">
|
|
{pet.avatarUrl ? (
|
|
<img src={pet.avatarUrl} alt={pet.name} className="w-full h-full object-cover" />
|
|
) : (
|
|
"🐾"
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-gray-800 truncate">{pet.name}</h3>
|
|
<p className="text-sm text-gray-500">{pet.breed || pet.species} · {pet.weightKg}kg</p>
|
|
</div>
|
|
<svg className="w-5 h-5 text-gray-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</Card>
|
|
);
|
|
}
|