Product Carousel This component displays a horizontally scrollable list of products with a title and navigation controls. It's built to be highly reusable, accepting all content and configuration via props.
// demo.tsx
import React from "react";
import { ProductCarousel, Product } from "@/components/ui/product-carousel"; // Adjust the import path
// --- MOCK DATA ---
const dairyProducts: Product[] = [
{
id: 1,
name: "Verka Standard Fresh Milk",
quantity: "1 ltr",
price: 63,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.21st.dev/assets/mirror/9d/9d7969c1234b53b1c951382dea0b1722e0fbf3c81eac57845b917ce6e87c43ce.png", // Replace with actual image URL
},
{
id: 2,
name: "Verka Double Toned Milk",
quantity: "500 ml",
price: 26,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.21st.dev/assets/mirror/df/dfdde8c5b118d544c10f7a39c927162d40e1117d233a0149f7826d6a5ba12788.png", // Replace with actual image URL
},
{
id: 3,
name: "Amul Salted Butter",
quantity: "100 g",
price: 58,
originalPrice: 62,
discount: "6% OFF",
deliveryTime: "20 MINS",
imageUrl: "https://cdn.21st.dev/assets/mirror/1c/1cad68b4175629f5cdee3c855edfe8d775e6bcf6fc5e8932fc82583c6c3bcafc.png", // Replace with actual image URL
},
{
id: 4,
name: "Amul Gold Full Cream Milk",
quantity: "500 ml",
price: 35,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.21st.dev/assets/mirror/33/33068a23f44b8052e76ed3fd51ca284b6a2705d0ed25b9ded4b256eac67d9ca9.png", // Replace with actual image URL
},
{
id: 5,
name: "Amul Moti Toned Milk (90 Days Shelf Life)",
quantity: "450 ml",
price: 31,
originalPrice: 33,
discount: "6% OFF",
deliveryTime: "20 MINS",
imageUrl: "https://cdn.21st.dev/assets/mirror/bf/bf796b7e5b10e98f03f113993ca7088ef47d1a9560c7e3d67ed301027928ca0e.png", // Replace with actual image URL
},
{
id: 6,
name: "Amul Masti Pouch Curd",
quantity: "390 g",
price: 35,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.21st.dev/assets/mirror/a2/a237213139854640457c5589a134229dc000ab42fe17af5ee2cde8d9844ec2e3.png", // Replace with actual image URL
},
{
id: 7,
name: "Amul Sterilised Cream",
quantity: "500 ml",
price: 32,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.21st.dev/assets/mirror/f5/f54391ec512ec7a88ffed37019e6c369bbc7560d6f7e6cf1140dc7d7865b9638.png", // Replace with actual image URL
},
{
id: 8,
name: "Nestle a+ Nourish Dahi",
quantity: "400g",
price: 70,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.21st.dev/assets/mirror/da/da81c12bb78882d4f201b5ecd091314c33d79d8b5435571dbc04c543c2480358.png", // Replace with actual image URL
},
];
const ProductCarouselDemo = () => {
return (
<div className="w-full bg-background">
<ProductCarousel
title="Dairy, Bread & Eggs"
products={dairyProducts}
viewAllHref="/products/dairy"
/>
</div>
);
};
export default ProductCarouselDemo;