101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
/**
|
|
* Bidder home — welcome screen, quick nav cards, event status strip.
|
|
* TODO: fetch active event details from /api/events/active.
|
|
*/
|
|
import { Link } from "react-router-dom";
|
|
import { useAuthStore, bidderName } from "../../store/auth.js";
|
|
|
|
// ── Quick-action cards ─────────────────────────────────────────────────────────
|
|
const QUICK_ACTIONS = [
|
|
{
|
|
to: "/live",
|
|
label: "Live Auction",
|
|
sub: "Bid in real time",
|
|
bg: "bg-brand-700",
|
|
text: "text-white",
|
|
sub_text: "text-brand-200",
|
|
icon: "🎙",
|
|
},
|
|
{
|
|
to: "/silent",
|
|
label: "Silent Auction",
|
|
sub: "Browse & place bids",
|
|
bg: "bg-gold-500",
|
|
text: "text-white",
|
|
sub_text: "text-gold-100",
|
|
icon: "🏷️",
|
|
},
|
|
{
|
|
to: "/my-bids",
|
|
label: "My Bids",
|
|
sub: "Track your activity",
|
|
bg: "bg-white",
|
|
text: "text-brand-800",
|
|
sub_text: "text-gray-400",
|
|
icon: "📋",
|
|
border: true,
|
|
},
|
|
{
|
|
to: "/checkout",
|
|
label: "Checkout",
|
|
sub: "Pay for won items",
|
|
bg: "bg-white",
|
|
text: "text-brand-800",
|
|
sub_text: "text-gray-400",
|
|
icon: "💳",
|
|
border: true,
|
|
},
|
|
] as const;
|
|
|
|
export default function HomePage() {
|
|
const bidder = useAuthStore((s) => s.bidder);
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-full">
|
|
{/* ── Hero strip ── */}
|
|
<div className="bg-brand-700 px-5 pt-6 pb-8">
|
|
<p className="text-brand-200 text-xs font-semibold uppercase tracking-widest mb-1">
|
|
Welcome back
|
|
</p>
|
|
<h1 className="text-white text-2xl font-black tracking-tight leading-tight">
|
|
{bidderName(bidder)}
|
|
</h1>
|
|
{bidder?.paddleNumber && (
|
|
<div className="inline-flex items-center gap-2 mt-3 bg-brand-800/60 rounded-xl px-3 py-1.5">
|
|
<span className="text-gold-300 font-black text-lg">#{bidder.paddleNumber}</span>
|
|
<span className="text-brand-200 text-xs">Your paddle number</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Cards grid (overlaps hero by 1rem) ── */}
|
|
<div className="px-4 -mt-4 space-y-3">
|
|
{/* Event status card */}
|
|
<div className="card px-4 py-3 flex items-center gap-3 animate-fade-in">
|
|
<span className="text-2xl">🌿</span>
|
|
<div>
|
|
<p className="font-semibold text-sm text-gray-800">Storybook Farm Charity Gala</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">Auction is live — good luck!</p>
|
|
</div>
|
|
<span className="ml-auto w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
|
</div>
|
|
|
|
{/* Quick-action grid */}
|
|
<div className="grid grid-cols-2 gap-3 pb-4">
|
|
{QUICK_ACTIONS.map(({ to, label, sub, bg, text, sub_text, icon, border }) => (
|
|
<Link
|
|
key={to}
|
|
to={to}
|
|
className={`rounded-2xl p-4 flex flex-col gap-1 shadow-card active:scale-[0.97] transition-transform ${bg} ${border ? "border border-gray-100" : ""}`}
|
|
>
|
|
<span className="text-2xl leading-none">{icon}</span>
|
|
<p className={`font-bold text-sm mt-1 ${text}`}>{label}</p>
|
|
<p className={`text-xs ${sub_text}`}>{sub}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|