39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import Image from "next/image";
|
|
import type { Product } from "@/lib/data";
|
|
import { Carousel } from "./Carousel";
|
|
import { ProductCard } from "./ProductCard";
|
|
|
|
type Props = {
|
|
id?: string;
|
|
image: string;
|
|
products: Product[];
|
|
ariaLabel: string;
|
|
tone?: "red" | "blue";
|
|
};
|
|
|
|
const gradients = {
|
|
red: "linear-gradient(90deg, #ff3b3b 0%, #fc2424 45%, #d91010 100%)",
|
|
blue: "linear-gradient(90deg, #4db3ff 0%, #1e88e5 48%, #0d5fb8 100%)",
|
|
};
|
|
|
|
export function ProductShelf({ id, image, products, ariaLabel, tone = "red" }: Props) {
|
|
return (
|
|
<section id={id} className="container-site mt-10">
|
|
<div className="rounded-2xl p-4 md:p-5" style={{ background: gradients[tone] }}>
|
|
<div className="flex items-stretch gap-3">
|
|
<div className="relative w-[150px] sm:w-[190px] shrink-0 min-h-[300px]">
|
|
<Image src={image} alt="" fill sizes="190px" className="object-contain object-center" />
|
|
</div>
|
|
<Carousel ariaLabel={ariaLabel} className="min-w-0 flex-1 py-1" tight>
|
|
{products.map((product) => (
|
|
<div key={product.id} className="snap-start shrink-0 w-[180px] sm:w-[200px]">
|
|
<ProductCard product={product} />
|
|
</div>
|
|
))}
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|