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

Appointments, account stuff, adopt a pet changes

Browse Source
This commit is contained in:
augmentedpotato
2026-03-30 05:38:15 -06:00
parent 4dd57e3484
commit 00c5198c47
30 changed files with 2611 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/Navigation.js
View File

@@ -25,7 +25,7 @@ export default function DisplayNav() {
<div className="nav-links">
<a href="/" className="nav-link">Home</a>
<a href="/adopt" className="nav-link">Adopt a Pet</a>
<a href="/" className="nav-link">Online Store</a>
<a href="/products" className="nav-link">Online Store</a>
<a href="/appointments" className="nav-link">Schedule an Appointment</a>
<a href="/contact" className="nav-link">Contact Us</a>
<a href="/aboutus" className="nav-link">About Us</a>

8
web/components/PetCard.js
View File

@@ -1,13 +1,11 @@
//Pet cards (on adopt page)
import Link from "next/link";
import { getSpeciesEmoji, getStatusClass } from "@/components/petUtils";
import { getStatusClass } from "@/components/petUtils";
export default function PetCard({petId, petName, petSpecies, petStatus}) {
export default function PetCard({petId, petName, petSpecies, petStatus, imageUrl}) {
return (
<Link href={`/adopt/${petId}`} className="pet-card">
<div className="pet-card-image-wrapper">
<span className="pet-card-emoji">{getSpeciesEmoji(petSpecies)}</span>
<img src={imageUrl || "/images/pet-placeholder.png"} alt={petName} className="pet-card-image" />
</div>
<div className="pet-card-body">
<h3 className="pet-card-name">{petName}</h3>

8
web/components/PetProfile.js
View File

@@ -1,11 +1,11 @@
import Link from "next/link";
import { getSpeciesEmoji, getStatusClass } from "@/components/petUtils";
import { getStatusClass } from "@/components/petUtils";
export default function PetProfile({ petName, petSpecies, petBreed, petAge, petStatus, petPrice }) {
export default function PetProfile({ petId, petName, petSpecies, petBreed, petAge, petStatus, petPrice, imageUrl }) {
return (
<div className="pet-detail-card">
<div className="pet-detail-image-wrapper">
<span className="pet-detail-emoji">{getSpeciesEmoji(petSpecies)}</span>
<img src={imageUrl || "/images/pet-placeholder.png"} alt={petName} className="pet-detail-image" />
</div>
<div className="pet-detail-info">
@@ -45,7 +45,7 @@ export default function PetProfile({ petName, petSpecies, petBreed, petAge, petS
<p className="pet-detail-cta-text">
Interested in adopting {petName}? Visit us in store or schedule an appointment.
</p>
<Link href="/appointments" className="pet-detail-cta-btn">
<Link href={`/appointments?petId=${petId}`} className="pet-detail-cta-btn">
Schedule an Appointment
</Link>
</div>

18
web/components/ProductCard.js Normal file
View File

@@ -0,0 +1,18 @@
import Link from "next/link";
export default function ProductCard({ prodId, prodName, categoryName, prodPrice, imageUrl }) {
return (
<Link href={`/products/${prodId}`} className="pet-card">
<div className="pet-card-image-wrapper">
<img src={imageUrl || "/images/product-placeholder.png"} alt={prodName} className="pet-card-image" />
</div>
<div className="pet-card-body">
<h3 className="pet-card-name">{prodName}</h3>
<p className="pet-card-species">{categoryName}</p>
{prodPrice != null && (
<span className="product-card-price">${parseFloat(prodPrice).toFixed(2)}</span>
)}
</div>
</Link>
);
}

34
web/components/ProductProfile.js Normal file
View File

@@ -0,0 +1,34 @@
import Link from "next/link";
export default function ProductProfile({ prodName, categoryName, prodDesc, prodPrice, imageUrl }) {
return (
<div className="pet-detail-card">
<div className="pet-detail-image-wrapper">
<img src={imageUrl || "/images/product-placeholder.png"} alt={prodName} className="pet-detail-image" />
</div>
<div className="pet-detail-info">
<div className="pet-detail-header">
<h1 className="pet-detail-name">{prodName}</h1>
</div>
<div className="pet-detail-fields">
<div className="pet-detail-row">
<span className="pet-detail-label">Category</span>
<span className="pet-detail-value">{categoryName ?? "—"}</span>
</div>
<div className="pet-detail-row">
<span className="pet-detail-label">Price</span>
<span className="pet-detail-value pet-detail-price">
{prodPrice != null ? `$${parseFloat(prodPrice).toFixed(2)}` : "—"}
</span>
</div>
<div className="pet-detail-row">
<span className="pet-detail-label">Description</span>
<span className="pet-detail-value">{prodDesc ?? "—"}</span>
</div>
</div>
</div>
</div>
);
}