79 lines
3.6 KiB
JavaScript
79 lines
3.6 KiB
JavaScript
/*
|
|
* Full detail view for a single pet on the adoption detail page.
|
|
*
|
|
* Author: Shiv
|
|
* Date: April 2026
|
|
*/
|
|
|
|
import Link from "next/link";
|
|
import { getStatusClass } from "@/components/petUtils";
|
|
|
|
const fieldRowCls = "flex items-center px-5 py-[0.85rem] border-b border-[#eee] last:border-b-0";
|
|
const fieldLabelCls = "w-[140px] text-[0.9rem] font-semibold text-[#888] uppercase tracking-[0.04em] shrink-0";
|
|
const fieldValueCls = "text-base text-[#333]";
|
|
|
|
//Full detail view for a single pet, shown on the adopt detail page
|
|
export default function PetProfile({ petId, petName, petSpecies, petBreed, petAge, petStatus, petPrice, imageUrl, storeId, storeName }) {
|
|
return (
|
|
<div className="flex gap-12 bg-white rounded-2xl shadow-[0_6px_24px_rgba(0,0,0,0.1)] overflow-hidden max-[768px]:flex-col max-[768px]:gap-0">
|
|
<div className="shrink-0 w-[280px] bg-[#fff8ee] flex items-center justify-center max-[768px]:w-full max-[768px]:h-[200px]">
|
|
<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="flex-1 py-10 pr-10 flex flex-col gap-6 max-[768px]:p-7">
|
|
<div className="flex items-center gap-4 flex-wrap">
|
|
<h1 className="text-[2.2rem] font-bold text-[#222] m-0">{petName}</h1>
|
|
<span className={`inline-block px-2 py-[0.15rem] rounded-full text-[0.7rem] font-semibold capitalize w-fit ${getStatusClass(petStatus)}`}>
|
|
{petStatus}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col border border-[#eee] rounded-[10px] overflow-hidden">
|
|
<div className={fieldRowCls}>
|
|
<span className={fieldLabelCls}>Species</span>
|
|
<span className={fieldValueCls}>{petSpecies ?? "-"}</span>
|
|
</div>
|
|
<div className={fieldRowCls}>
|
|
<span className={fieldLabelCls}>Breed</span>
|
|
<span className={fieldValueCls}>{petBreed ?? "-"}</span>
|
|
</div>
|
|
<div className={fieldRowCls}>
|
|
<span className={fieldLabelCls}>Age</span>
|
|
<span className={fieldValueCls}>
|
|
{petAge != null ? `${petAge} ${petAge === 1 ? "year" : "years"}` : "-"}
|
|
</span>
|
|
</div>
|
|
<div className={fieldRowCls}>
|
|
<span className={fieldLabelCls}>Adoption Fee</span>
|
|
<span className={`${fieldValueCls} font-bold text-[#1a7a3c] text-[1.1rem]`}>
|
|
{petPrice != null ? `$${parseFloat(petPrice).toFixed(2)}` : "-"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{petStatus?.toLowerCase() === "available" && (
|
|
<div className="bg-[#fff8ee] rounded-xl p-5">
|
|
<p className="text-[0.95rem] text-[#555] m-0 mb-4">
|
|
Interested in adopting {petName}? Visit us in store or schedule an appointment.
|
|
</p>
|
|
<Link
|
|
href={`/appointments?adoptionMode=true&petId=${petId}&petName=${encodeURIComponent(petName || "")}&petSpecies=${encodeURIComponent(petSpecies || "")}&petBreed=${encodeURIComponent(petBreed || "")}${storeId ? `&storeId=${storeId}` : ""}${storeName ? `&storeName=${encodeURIComponent(storeName)}` : ""}`}
|
|
className="inline-block px-6 py-[0.65rem] bg-[#e68672] text-white no-underline rounded-lg text-[0.95rem] font-semibold transition-colors hover:bg-[#d4705e]"
|
|
>
|
|
Schedule an Appointment
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|