29 lines
1.3 KiB
JavaScript
29 lines
1.3 KiB
JavaScript
import Link from "next/link";
|
|
import { getStatusClass } from "@/components/petUtils";
|
|
|
|
//Card shown in the adopt grid, links to the pet's detail page
|
|
export default function PetCard({petId, petName, petSpecies, petStatus, imageUrl}) {
|
|
return (
|
|
<Link href={`/adopt/${petId}`} className="no-underline text-inherit flex flex-col rounded-2xl overflow-hidden shadow-[0_4px_12px_rgba(0,0,0,0.08)] transition-all duration-300 hover:-translate-y-1.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.13)] bg-white">
|
|
<div className="bg-[#fff8ee] flex items-center justify-center aspect-square">
|
|
<img
|
|
src={imageUrl || "/images/pet-placeholder.png"}
|
|
alt={petName}
|
|
className="w-full h-full object-cover"
|
|
onError={(e) => {
|
|
e.currentTarget.onerror = null;
|
|
e.currentTarget.src = "/images/pet-placeholder.png";
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="px-3 pt-[0.6rem] pb-3 flex flex-col gap-[0.2rem]">
|
|
<h3 className="text-[0.95rem] font-bold text-[#222] m-0 truncate">{petName}</h3>
|
|
<p className="text-[0.8rem] text-[#666] m-0">{petSpecies}</p>
|
|
<span className={`inline-block mt-[0.2rem] px-2 py-[0.15rem] rounded-full text-[0.7rem] font-semibold capitalize w-fit ${getStatusClass(petStatus)}`}>
|
|
{petStatus}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|