79 lines
2.7 KiB
JavaScript
79 lines
2.7 KiB
JavaScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
|
||
export default function ContactPage() {
|
||
const [locations, setLocations] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
|
||
useEffect(() => {
|
||
const params = new URLSearchParams({ page: "0", size: "100", sort: "storeName,asc" });
|
||
fetch(`/api/v1/stores?${params}`)
|
||
.then((res) => {
|
||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||
return res.json();
|
||
})
|
||
.then((data) => setLocations(data.content ?? []))
|
||
.catch((err) => setError(err.message))
|
||
.finally(() => setLoading(false));
|
||
}, []);
|
||
|
||
return (
|
||
<main className="info-page">
|
||
<section className="info-hero">
|
||
<h1 className="info-title">Contact Us</h1>
|
||
<p className="info-subtitle">Reach the team, find a location, or connect with store personnel.</p>
|
||
<div className="title-decoration"></div>
|
||
</section>
|
||
|
||
<section className="info-content">
|
||
<div className="info-card">
|
||
<h2>General Contact</h2>
|
||
<p>Email: support@petshop.com</p>
|
||
<p>Phone: (000) 000-0000</p>
|
||
<p>Hours: Mon–Sat, 9:00 AM – 6:00 PM</p>
|
||
</div>
|
||
|
||
<div className="info-card">
|
||
<h2>Store Locations</h2>
|
||
|
||
{loading && <p>Loading locations...</p>}
|
||
|
||
{error && <p style={{ color: "red" }}>Failed to load locations: {error}</p>}
|
||
|
||
{!loading && !error && locations.length === 0 && (
|
||
<p>No store locations found.</p>
|
||
)}
|
||
|
||
{!loading && !error && locations.length > 0 && (
|
||
<div className="info-card-grid">
|
||
{locations.map((location) => (
|
||
<article key={location.storeId} className="info-mini-card location-card">
|
||
<div className="location-card-image-wrapper">
|
||
<img
|
||
src={location.imageUrl || "/images/pet-placeholder.png"}
|
||
alt={location.storeName}
|
||
className="location-card-image"
|
||
onError={(e) => {
|
||
e.currentTarget.onerror = null;
|
||
e.currentTarget.src = "/images/pet-placeholder.png";
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="location-card-body">
|
||
<h3>{location.storeName}</h3>
|
||
<p>{location.address}</p>
|
||
<p>{location.phone}</p>
|
||
<p>{location.email}</p>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|