diff --git a/apps/web/vibes/soul/docs/products-carousel.mdx b/apps/web/vibes/soul/docs/products-carousel.mdx index 2f926a010..c0743abf5 100644 --- a/apps/web/vibes/soul/docs/products-carousel.mdx +++ b/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 --- diff --git a/apps/web/vibes/soul/docs/products-list.mdx b/apps/web/vibes/soul/docs/products-list.mdx index c67278a77..3e157834c 100644 --- a/apps/web/vibes/soul/docs/products-list.mdx +++ b/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`. By passing a `Promise`, you enable streaming which will show a loading state until the data is finished loading and streamed to the browser. - ## API Reference ### `ProductsList` diff --git a/apps/web/vibes/soul/examples.ts b/apps/web/vibes/soul/examples.ts index f492b2f0b..eb3668496 100644 --- a/apps/web/vibes/soul/examples.ts +++ b/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'], diff --git a/apps/web/vibes/soul/examples/primitives/products-carousel/electric.tsx b/apps/web/vibes/soul/examples/primitives/products-carousel/electric.tsx new file mode 100644 index 000000000..bf59a4f2d --- /dev/null +++ b/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((resolve) => { + setTimeout(() => resolve(defaultProducts), 1000); + }); + + return ( +
+
+
+ +
+
+
+
+ +
+
+
+ ); +} + +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, + }, +]; diff --git a/apps/web/vibes/soul/examples/primitives/products-carousel/index.tsx b/apps/web/vibes/soul/examples/primitives/products-carousel/index.tsx deleted file mode 100644 index 6766e14dd..000000000 --- a/apps/web/vibes/soul/examples/primitives/products-carousel/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { getProducts } from '@/vibes/soul/data'; -import { ProductsCarousel } from '@/vibes/soul/primitives/products-carousel'; - -export default function Preview() { - const products = getProducts('Electric'); - - return ( -
-
-
- -
-
-
-
- -
-
-
- ); -} diff --git a/apps/web/vibes/soul/examples/primitives/products-carousel/luxury.tsx b/apps/web/vibes/soul/examples/primitives/products-carousel/luxury.tsx new file mode 100644 index 000000000..4495355bc --- /dev/null +++ b/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((resolve) => { + setTimeout(() => resolve(defaultProducts), 1000); + }); + + return ( +
+
+
+ +
+
+
+
+ +
+
+
+ ); +} + +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, + }, +]; diff --git a/apps/web/vibes/soul/examples/primitives/products-carousel/warm.tsx b/apps/web/vibes/soul/examples/primitives/products-carousel/warm.tsx new file mode 100644 index 000000000..a435f9ba8 --- /dev/null +++ b/apps/web/vibes/soul/examples/primitives/products-carousel/warm.tsx @@ -0,0 +1,97 @@ +import { CarouselProduct, ProductsCarousel } from '@/vibes/soul/primitives/products-carousel'; + +export default function Preview() { + const products = new Promise((resolve) => { + setTimeout(() => resolve(defaultProducts), 1000); + }); + + return ( +
+
+
+ +
+
+
+
+ +
+
+
+ ); +} + +const defaultProducts: CarouselProduct[] = [ + { + id: '1', + title: 'Mini Bar Bag', + subtitle: 'Blue/Black/Green', + price: '$65', + image: { + src: 'https://rstr.in/monogram/vibes/mrlTNE1TJfB', + alt: 'Mini Bar Bag', + }, + href: '#', + rating: 4.3, + }, + { + id: '2', + title: 'Mini Bar Bag', + subtitle: 'Blue/Black/Green', + price: '$65', + image: { + src: 'https://rstr.in/monogram/vibes/LznMEk1GSB1', + alt: 'Mini Bar Bag', + }, + href: '#', + rating: 4.5, + }, + { + id: '3', + title: 'Stem Caddy', + subtitle: 'Blue/Black/Green', + price: '$60', + image: { + src: 'https://rstr.in/monogram/vibes/EpL5yspw4Pc', + alt: 'Stem Caddy', + }, + href: '#', + rating: 4.2, + }, + { + id: '4', + title: 'Hip Slinger', + subtitle: 'Blue/Black/Green', + price: '$105', + image: { + src: 'https://rstr.in/monogram/vibes/z6b0vDjJv6x', + alt: 'Hip Slinger', + }, + href: '#', + rating: 4.6, + }, + { + id: '5', + title: 'Everyday Tote', + subtitle: 'Blue/Black/Green', + price: '$185', + image: { + src: 'https://rstr.in/monogram/vibes/1tVm6tBbJq9', + alt: 'Everyday Tote', + }, + href: '#', + rating: 4.8, + }, + { + id: '6', + title: 'Mini Saddlebag', + subtitle: 'Blue/Black/Green', + price: '$45', + image: { + src: 'https://rstr.in/monogram/vibes/MZX8-yya26e', + alt: 'Mini Saddlebag', + }, + href: '#', + rating: 4.1, + }, +]; diff --git a/apps/web/vibes/soul/examples/primitives/products-list/electric.tsx b/apps/web/vibes/soul/examples/primitives/products-list/electric.tsx index 36bf10fa2..97baebd6c 100644 --- a/apps/web/vibes/soul/examples/primitives/products-list/electric.tsx +++ b/apps/web/vibes/soul/examples/primitives/products-list/electric.tsx @@ -1,11 +1,162 @@ -import { getProducts } from '@/vibes/soul/data'; -import { ProductsList } from '@/vibes/soul/primitives/products-list'; +import { ListProduct, ProductsList } from '@/vibes/soul/primitives/products-list'; export default function Preview() { - const products = getProducts('Electric'); + const products = new Promise((resolve) => { + setTimeout(() => resolve(defaultProducts), 1000); + }); + return (
); } + +const defaultProducts: ListProduct[] = [ + { + 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, + }, +]; diff --git a/apps/web/vibes/soul/examples/primitives/products-list/luxury.tsx b/apps/web/vibes/soul/examples/primitives/products-list/luxury.tsx index a1a4d15ed..8303f92c3 100644 --- a/apps/web/vibes/soul/examples/primitives/products-list/luxury.tsx +++ b/apps/web/vibes/soul/examples/primitives/products-list/luxury.tsx @@ -1,11 +1,94 @@ -import { getProducts } from '@/vibes/soul/data'; -import { ProductsList } from '@/vibes/soul/primitives/products-list'; +import { ListProduct, ProductsList } from '@/vibes/soul/primitives/products-list'; export default function Preview() { - const products = getProducts('Luxury'); + const products = new Promise((resolve) => { + setTimeout(() => resolve(defaultProducts), 1000); + }); + return (
); } + +const defaultProducts: ListProduct[] = [ + { + 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, + }, +]; diff --git a/apps/web/vibes/soul/examples/primitives/products-list/warm.tsx b/apps/web/vibes/soul/examples/primitives/products-list/warm.tsx index 171650979..39e307f65 100644 --- a/apps/web/vibes/soul/examples/primitives/products-list/warm.tsx +++ b/apps/web/vibes/soul/examples/primitives/products-list/warm.tsx @@ -1,11 +1,88 @@ -import { getProducts } from '@/vibes/soul/data'; -import { ProductsList } from '@/vibes/soul/primitives/products-list'; +import { ListProduct, ProductsList } from '@/vibes/soul/primitives/products-list'; export default function Preview() { - const products = getProducts('Warm'); + const products = new Promise((resolve) => { + setTimeout(() => resolve(defaultProducts), 1000); + }); + return ( -
+
); } + +const defaultProducts: ListProduct[] = [ + { + id: '1', + title: 'Mini Bar Bag', + subtitle: 'Blue/Green', + price: '$65', + image: { + src: 'https://rstr.in/monogram/vibes/mrlTNE1TJfB', + alt: 'Mini Bar Bag', + }, + href: '#', + rating: 4.3, + }, + { + id: '2', + title: 'Mini Bar Bag', + subtitle: 'Blue/Red', + price: '$65', + image: { + src: 'https://rstr.in/monogram/vibes/LznMEk1GSB1', + alt: 'Mini Bar Bag', + }, + href: '#', + rating: 4.5, + }, + { + id: '3', + title: 'Stem Caddy', + subtitle: 'Green', + price: '$60', + image: { + src: 'https://rstr.in/monogram/vibes/EpL5yspw4Pc', + alt: 'Stem Caddy', + }, + href: '#', + rating: 4.2, + }, + { + id: '4', + title: 'Hip Slinger', + subtitle: 'Blue/Red', + price: '$105', + image: { + src: 'https://rstr.in/monogram/vibes/z6b0vDjJv6x', + alt: 'Hip Slinger', + }, + href: '#', + rating: 4.6, + }, + { + id: '5', + title: 'Everyday Tote', + subtitle: 'Blue/Green/Red', + price: '$185', + image: { + src: 'https://rstr.in/monogram/vibes/1tVm6tBbJq9', + alt: 'Everyday Tote', + }, + href: '#', + rating: 4.8, + }, + { + id: '6', + title: 'Mini Saddlebag', + subtitle: 'Green/Red', + price: '$45', + image: { + src: 'https://rstr.in/monogram/vibes/MZX8-yya26e', + alt: 'Mini Saddlebag', + }, + href: '#', + rating: 4.1, + }, +];