RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling refactor

Browse Source
This commit is contained in:
augmentedpotato
2026-04-18 16:12:43 -06:00
committed by Harkamal Randhawa
parent 049c39984b
commit 077d147498
21 changed files with 829 additions and 4509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/components/PetProfile.js
View File

@@ -1,14 +1,18 @@
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]";
export default function PetProfile({ petId, petName, petSpecies, petBreed, petAge, petStatus, petPrice, imageUrl, storeId, storeName }) {
return (
<div className="pet-detail-card">
<div className="pet-detail-image-wrapper">
<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="pet-detail-image"
className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/images/pet-placeholder.png";
@@ -16,46 +20,45 @@ export default function PetProfile({ petId, petName, petSpecies, petBreed, petAg
/>
</div>
<div className="pet-detail-info">
<div className="pet-detail-header">
<h1 className="pet-detail-name">{petName}</h1>
<span className={`pet-card-status ${getStatusClass(petStatus)}`}>
<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="pet-detail-fields">
<div className="pet-detail-row">
<span className="pet-detail-label">Species</span>
<span className="pet-detail-value">{petSpecies ?? "—"}</span>
<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="pet-detail-row">
<span className="pet-detail-label">Breed</span>
<span className="pet-detail-value">{petBreed ?? "—"}</span>
<div className={fieldRowCls}>
<span className={fieldLabelCls}>Breed</span>
<span className={fieldValueCls}>{petBreed ?? "—"}</span>
</div>
<div className="pet-detail-row">
<span className="pet-detail-label">Age</span>
<span className="pet-detail-value">
<div className={fieldRowCls}>
<span className={fieldLabelCls}>Age</span>
<span className={fieldValueCls}>
{petAge != null ? `${petAge} ${petAge === 1 ? "year" : "years"}` : "—"}
</span>
</div>
<div className="pet-detail-row">
<span className="pet-detail-label">Adoption Fee</span>
<span className="pet-detail-value pet-detail-price">
<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>
{/* Status */}
{petStatus?.toLowerCase() === "available" && (
<div className="pet-detail-cta">
<p className="pet-detail-cta-text">
<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="pet-detail-cta-btn"
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>