110 lines
3.9 KiB
TypeScript
110 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
type RetailerOffer = {
|
|
id?: string | number;
|
|
retailer: string;
|
|
price: number;
|
|
originalPrice?: number;
|
|
url: string;
|
|
affiliateUrl?: string;
|
|
inStock: boolean;
|
|
};
|
|
|
|
interface RetailersListProps {
|
|
retailers: RetailerOffer[];
|
|
}
|
|
|
|
export function RetailersList({ retailers }: RetailersListProps) {
|
|
if (retailers.length === 0) {
|
|
return (
|
|
<div className="text-sm text-zinc-500 text-center py-4">
|
|
No retailer offers available.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const lowestPrice = Math.min(...retailers.map((r) => r.price));
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="mb-4">
|
|
<div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400">
|
|
Available Retailers
|
|
</div>
|
|
<div className="mt-1 text-xs text-zinc-500">
|
|
{retailers.length} retailer{retailers.length !== 1 ? "s" : ""} found
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{retailers.map((retailer) => {
|
|
const isLowestPrice = retailer.price === lowestPrice;
|
|
const isOnSale = retailer.originalPrice !== undefined;
|
|
|
|
return (
|
|
<div
|
|
key={retailer.id}
|
|
className={`border rounded-md p-3 transition-colors ${
|
|
retailer.inStock
|
|
? "border-zinc-700 bg-zinc-900/30 hover:border-zinc-600"
|
|
: "border-zinc-800 bg-zinc-900/20 opacity-60"
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="text-sm font-semibold text-zinc-50">
|
|
{retailer.retailer}
|
|
</span>
|
|
{isLowestPrice && retailer.inStock && (
|
|
<span className="text-[0.65rem] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-amber-400/20 text-amber-300 border border-amber-400/30">
|
|
Best Price
|
|
</span>
|
|
)}
|
|
{!retailer.inStock && (
|
|
<span className="text-[0.65rem] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-red-500/20 text-red-400 border border-red-500/30">
|
|
Out of Stock
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`text-lg font-semibold ${
|
|
isLowestPrice && retailer.inStock
|
|
? "text-amber-300"
|
|
: "text-zinc-300"
|
|
}`}
|
|
>
|
|
${retailer.price.toFixed(2)}
|
|
</span>
|
|
{isOnSale && retailer.originalPrice && (
|
|
<span className="text-xs text-zinc-500 line-through">
|
|
${retailer.originalPrice.toFixed(2)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<a
|
|
href={retailer.affiliateUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`rounded-md border px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap ${
|
|
retailer.inStock
|
|
? "border-amber-400/60 bg-amber-400/10 text-amber-200 hover:bg-amber-400/15"
|
|
: "border-zinc-700 bg-zinc-800/50 text-zinc-500 cursor-not-allowed pointer-events-none"
|
|
}`}
|
|
>
|
|
{retailer.inStock ? "Buy Now" : "Unavailable"}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|