Inline data for product primitive examples

apps/web/vibes/soul/docs/products-carousel.mdx

@@ -1,5 +1,8 @@
 ---
 title: Products Carousel
-preview: products-carousel-example
+preview:
+  Electric: products-carousel-electric
+  Warm: products-carousel-warm
+  Luxury: products-carousel-luxury
 previewSize: lg
 ---

apps/web/vibes/soul/docs/products-list.mdx

@@ -1,9 +1,9 @@
 ---
 title: Product List
 preview:
-  Electric: products-list-electric-example
-  Warm: products-list-warm-example
-  Luxury: products-list-luxury-example
+  Electric: products-list-electric
+  Warm: products-list-warm
+  Luxury: products-list-luxury
 previewSize: lg
 features:
   - Displays a list of products
@@ -28,7 +28,6 @@ Display the component.
 
 The `products` property accepts either `Product[]` or `Promise<Product[]>`. By passing a `Promise<Product[]>`, you enable streaming which will show a loading state until the data is finished loading and streamed to the browser.
 
-
 ## API Reference
 
 ### `ProductsList`

apps/web/vibes/soul/examples.ts

@@ -682,11 +682,25 @@ export const examples = [
     component: lazy(() => import('./examples/primitives/product-card')),
   },
   {
-    name: 'products-carousel-example',
+    name: 'products-carousel-warm',
     dependencies: [],
     registryDependencies: ['products-carousel'],
-    files: ['examples/primitives/products-carousel/index.tsx'],
-    component: lazy(() => import('./examples/primitives/products-carousel')),
+    files: ['examples/primitives/products-carousel/warm.tsx'],
+    component: lazy(() => import('./examples/primitives/products-carousel/warm')),
+  },
+  {
+    name: 'products-carousel-electric',
+    dependencies: [],
+    registryDependencies: ['products-carousel'],
+    files: ['examples/primitives/products-carousel/electric.tsx'],
+    component: lazy(() => import('./examples/primitives/products-carousel/electric')),
+  },
+  {
+    name: 'products-carousel-luxury',
+    dependencies: [],
+    registryDependencies: ['products-carousel'],
+    files: ['examples/primitives/products-carousel/luxury.tsx'],
+    component: lazy(() => import('./examples/primitives/products-carousel/luxury')),
   },
   {
     name: 'product-detail-electric-example',
@@ -710,21 +724,21 @@ export const examples = [
     component: lazy(() => import('./examples/sections/product-detail/luxury')),
   },
   {
-    name: 'products-list-electric-example',
+    name: 'products-list-electric',
     dependencies: [],
     registryDependencies: ['products-list-electric'],
     files: ['examples/primitives/products-list/electric.tsx'],
     component: lazy(() => import('./examples/primitives/products-list/electric')),
   },
   {
-    name: 'products-list-warm-example',
+    name: 'products-list-warm',
     dependencies: [],
     registryDependencies: ['products-list-warm'],
     files: ['examples/primitives/products-list/warm.tsx'],
     component: lazy(() => import('./examples/primitives/products-list/warm')),
   },
   {
-    name: 'products-list-luxury-example',
+    name: 'products-list-luxury',
     dependencies: [],
     registryDependencies: ['products-list-luxury'],
     files: ['examples/primitives/products-list/luxury.tsx'],

apps/web/vibes/soul/examples/primitives/products-carousel/electric.tsx

@@ -0,0 +1,171 @@
+import { CarouselProduct, ProductsCarousel } from '@/vibes/soul/primitives/products-carousel';
+
+export default function Preview() {
+  const products = new Promise<CarouselProduct[]>((resolve) => {
+    setTimeout(() => resolve(defaultProducts), 1000);
+  });
+
+  return (
+    <div>
+      <section className="overflow-hidden @container">
+        <div className="mx-auto w-full max-w-screen-2xl px-4 py-10 @xl:px-6 @xl:py-14 @4xl:px-8 @4xl:py-20">
+          <ProductsCarousel products={products} />
+        </div>
+      </section>
+      <section className="overflow-hidden bg-foreground @container">
+        <div className="mx-auto w-full max-w-screen-2xl px-4 py-10 @xl:px-6 @xl:py-14 @4xl:px-8 @4xl:py-20">
+          <ProductsCarousel colorScheme="dark" products={products} showScrollbar={false} />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+const defaultProducts: CarouselProduct[] = [
+  {
+    id: '1',
+    title: 'Philodendron Imperial Red',
+    subtitle: 'Indoor Plant',
+    badge: 'Popular',
+    price: '$44.95',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/-kv08IvX08j',
+      alt: 'Philodendron Imperial Red',
+    },
+    href: '#',
+    rating: 4,
+  },
+  {
+    id: '2',
+    title: 'Monstera',
+    subtitle: 'Indoor Plant',
+    badge: 'New',
+    price: '$24.99',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/n0P83RMnClS',
+      alt: 'Monstera',
+    },
+    href: '#',
+    rating: 4.4,
+  },
+  {
+    id: '3',
+    title: 'Pink Caladium',
+    subtitle: 'Indoor Plant',
+    price: '$19.95',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/AaZW4j2VTd4',
+      alt: 'Pink Caladium',
+    },
+    href: '#',
+    rating: 4.8,
+  },
+  {
+    id: '4',
+    title: 'Hoya Kerrii',
+    subtitle: 'Indoor Plant',
+    price: '$16.99',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/QSaMw6aC_AN',
+      alt: 'Hoya Kerrii',
+    },
+    href: '#',
+    rating: 2.2,
+  },
+  {
+    id: '5',
+    title: 'Bird Nest Fern',
+    subtitle: 'Indoor Plant',
+    price: '$24.99',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/gfGRQi5pHeJ',
+      alt: 'Bird Nest Fern',
+    },
+    href: '#',
+    rating: 3.5,
+  },
+  {
+    id: '6',
+    title: 'Jade Plant',
+    subtitle: 'Indoor Plant',
+    price: '$24.99',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/lJg081kQqvc',
+      alt: 'Jade Plant',
+    },
+    href: '#',
+    rating: 5,
+  },
+  {
+    id: '7',
+    title: 'Snake Plant',
+    subtitle: 'Indoor Plant',
+    price: '$34.95',
+    image: {
+      src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTplNGNiMjdiNi04NTY2LTQxOTctODhhMC0xYThhYmY3NDdkZTU=/snake-plant.jpg',
+      alt: 'Snake Plant',
+    },
+    href: '#',
+    rating: 4.9,
+  },
+  {
+    id: '8',
+    title: 'Spider Plant',
+    subtitle: 'Indoor Plant',
+    price: '$12.99',
+    image: {
+      src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTpiYmYyNDEzMC0wNzU3LTRiYjMtYjkwMi0zNzI0NjBjNzk5MjY=/spider-plant.jpg',
+      alt: 'Spider Plant',
+    },
+    href: '#',
+    rating: 4.2,
+  },
+  {
+    id: '9',
+    title: 'African Fig Tree',
+    subtitle: 'Indoor Plant',
+    price: '$49.99',
+    image: {
+      src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1MGFmMDIxOC05NWM4LTRlN2UtOTAyMS01OWExOGQxMjUwNGM=/african-fig.jpg',
+      alt: 'African Fig Tree',
+    },
+    href: '#',
+    rating: 4.7,
+  },
+  {
+    id: '10',
+    title: 'Birds of Paradise',
+    subtitle: 'Indoor Plant',
+    price: '$29.95',
+    image: {
+      src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTowNWUwYmEwMS0yMDhiLTQ5ZWQtOTI3NC0yZTM0ZTZjYmZhNzg=/birds-of-paradise.jpg',
+      alt: 'Birds of Paradise',
+    },
+    href: '#',
+    rating: 4.5,
+  },
+  {
+    id: '11',
+    title: 'ZZ Plant',
+    subtitle: 'Indoor Plant',
+    price: '$22.99',
+    image: {
+      src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1N2Q2YThlZS04MjZiLTRjZmEtODRmZi1hZjgzZDM3MWE2ZGY=/zz-plant.jpg',
+      alt: 'ZZ Plant',
+    },
+    href: '#',
+    rating: 4.6,
+  },
+  {
+    id: '12',
+    title: 'Dracaena',
+    subtitle: 'Indoor Plant',
+    price: '$18.95',
+    image: {
+      src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo3YTJhYTJmZi00ODBhLTQ3NTctODdkYi02ZWEyZGYzZWJmNjI=/dracaena.jpg',
+      alt: 'Dracanea',
+    },
+    href: '#',
+    rating: 4.3,
+  },
+];

apps/web/vibes/soul/examples/primitives/products-carousel/luxury.tsx

@@ -0,0 +1,103 @@
+import { CarouselProduct, ProductsCarousel } from '@/vibes/soul/primitives/products-carousel';
+
+export default function Preview() {
+  const products = new Promise<CarouselProduct[]>((resolve) => {
+    setTimeout(() => resolve(defaultProducts), 1000);
+  });
+
+  return (
+    <div>
+      <section className="overflow-hidden @container">
+        <div className="mx-auto w-full max-w-screen-2xl px-4 py-10 @xl:px-6 @xl:py-14 @4xl:px-8 @4xl:py-20">
+          <ProductsCarousel products={products} />
+        </div>
+      </section>
+      <section className="overflow-hidden bg-foreground @container">
+        <div className="mx-auto w-full max-w-screen-2xl px-4 py-10 @xl:px-6 @xl:py-14 @4xl:px-8 @4xl:py-20">
+          <ProductsCarousel colorScheme="dark" products={products} showScrollbar={false} />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+const defaultProducts: CarouselProduct[] = [
+  {
+    id: '1',
+    title: 'Jada Square Toe Ballet Flat',
+    subtitle: '',
+    badge: 'Bestseller',
+    price: '$350',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/9vu9tSw1WdA',
+      alt: 'Jada Square Toe Ballet Flat',
+    },
+    href: '#',
+    rating: 4.5,
+  },
+  {
+    id: '2',
+    title: 'Jayla Woven Ballet Heel',
+    subtitle: '',
+    badge: 'Bestseller',
+    price: '$395',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/jD25Jjm0zbT',
+      alt: 'Jayla Woven Ballet Heel',
+    },
+    href: '#',
+    rating: 4.8,
+  },
+  {
+    id: '3',
+    title: 'Jessie Ballet Flat',
+    subtitle: '',
+    badge: 'Bestseller',
+    price: '$450',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/1ipihAyvRQj',
+      alt: 'Jessie Ballet Flat',
+    },
+    href: '#',
+    rating: 4.6,
+  },
+  {
+    id: '4',
+    title: 'Leighton Soft Leather Loafer',
+    subtitle: '',
+    badge: 'Almost Gone',
+    price: '$350',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/YfQW8M1Gv2H/zTWKcqJrdIu',
+      alt: 'Leighton Soft Leather Loafer',
+    },
+    href: '#',
+    rating: 4.2,
+  },
+  {
+    id: '5',
+    title: 'JADA SQUARE TOE BALLET FLAT',
+    subtitle: '',
+    badge: 'Bestseller',
+    price: '$350',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/5QBR05kyrYo',
+      alt: 'JADA SQUARE TOE BALLET FLAT',
+    },
+    href: '#',
+    rating: 4.7,
+  },
+  {
+    id: '6',
+    title: 'DARYA LUG SOLE FISHERMAN',
+    subtitle: '',
+    badge: 'Almost Gone',
+    price: '$290',
+    image: {
+      src: 'https://rstr.in/monogram/vibes/yzjuCwK-5tz/vfCehRZDBGk',
+      alt: 'DARYA LUG SOLE FISHERMAN',
+    },
+    href: '#',
+    rating: 4.4,
+  },
+];