The XL-2000 is a state-of-the-art industrial machine designed for maximum efficiency and durability. With advanced automation features and energy-saving technology, this machine is perfect for modern manufacturing facilities.
The XL-2000 features a fully integrated automation system with intelligent control panel that provides real-time monitoring of all critical parameters.
Key features include:
With an exceptional energy efficiency rating of Class A++, the XL-2000 reduces energy consumption by up to 40% compared to traditional equipment. The low noise level of 65 dB ensures compliance with workplace safety regulations.
Designed for continuous operation in demanding environments, the XL-2000 features robust construction and modular design for easy maintenance access.
Maintenance highlights:
The XL-2000 is a state-of-the-art industrial machine designed for maximum efficiency and durability. With advanced automation features and energy-saving technology, this machine is perfect for modern manufacturing facilities.
The XL-2000 features a fully integrated automation system with intelligent control panel that provides real-time monitoring of all critical parameters.
Key features include:
With an exceptional energy efficiency rating of Class A++, the XL-2000 reduces energy consumption by up to 40% compared to traditional equipment. The low noise level of 65 dB ensures compliance with workplace safety regulations.
Designed for continuous operation in demanding environments, the XL-2000 features robust construction and modular design for easy maintenance access.
Maintenance highlights:
Cordless angle grinder with 22V battery platform
', + image: { + url: 'https://raw.githubusercontent.com/o2sdev/openselfservice/refs/heads/main/packages/integrations/mocked/public/images/services-charger.jpg', + alt: 'Cordless Angle Grinder', + width: 640, + height: 656, + }, + price: { + value: 199.99, + currency: 'USD', + }, + link: '/products/ag-125-a22', + badges: [ + { label: 'New', variant: 'secondary' }, + { label: 'Promo', variant: 'destructive' }, + ], + }, + { + id: 'PRD-006', + name: 'Laser Measurement Device', + description: 'Laser measurement device for distance measurements
', + image: { + url: 'https://raw.githubusercontent.com/o2sdev/openselfservice/refs/heads/main/packages/integrations/mocked/public/images/empty.jpg', + alt: 'Laser Measurement', + width: 640, + height: 656, + }, + price: { + value: 100, + currency: 'USD', + }, + link: '/products/pd-s', + badges: [{ label: 'New', variant: 'secondary' }], + }, + { + id: 'PRD-007', + name: 'Cordless Drill Driver', + description: 'Cordless drill driver with 22V battery platform
', + image: { + url: 'https://raw.githubusercontent.com/o2sdev/openselfservice/refs/heads/main/packages/integrations/mocked/public/images/empty.jpg', + alt: 'Cordless Drill Driver', + width: 640, + height: 656, + }, + price: { + value: 100, + currency: 'USD', + }, + link: '/products/sfc-22-a', + badges: [{ label: 'New', variant: 'secondary' }], + }, + { + id: 'PRD-008', + name: 'Professional Calibration Service', + description: 'ISO-Certified Calibration for industrial equipment
', + image: { + url: 'https://raw.githubusercontent.com/o2sdev/openselfservice/refs/heads/main/packages/integrations/mocked/public/images/services-calibration.jpg', + alt: 'Professional Calibration Service', + width: 640, + height: 656, + }, + price: { + value: 149.99, + currency: 'USD', + }, + link: '/services/calibration', + badges: [{ label: 'Popular', variant: 'default' }], + }, + { + id: 'PRD-009', + name: 'Safety Equipment Package', + description: 'Complete safety equipment for welding environments
', + image: { + url: 'https://raw.githubusercontent.com/o2sdev/openselfservice/refs/heads/main/packages/integrations/mocked/public/images/services-welding.jpg', + alt: 'Safety Equipment Package', + width: 640, + height: 656, + }, + price: { + value: 299.99, + currency: 'USD', + }, + link: '/products/safety-package', + badges: [ + { label: 'Bestseller', variant: 'default' }, + { label: 'Safety', variant: 'outline' }, + ], + }, + { + id: 'PRD-010', + name: 'Power Tool Battery Pack', + description: 'High-capacity battery pack for cordless tools
', + image: { + url: 'https://raw.githubusercontent.com/o2sdev/openselfservice/refs/heads/main/packages/integrations/mocked/public/images/services-charger.jpg', + alt: 'Power Tool Battery Pack', + width: 640, + height: 656, + }, + price: { + value: 79.99, + currency: 'USD', + }, + link: '/products/battery-pack', + badges: [{ label: 'New', variant: 'secondary' }], + }, +]; + +export const Default: Story = { + args: { + products: sampleProducts, + title: 'Recommended Products', + LinkComponent: MockLinkComponent, + linkDetailsLabel: 'View Details', + }, +}; + +export const WithDescription: Story = { + args: { + products: sampleProducts, + title: 'You Might Also Like', + description: 'Check out these carefully selected products that complement your choice.
', + LinkComponent: MockLinkComponent, + linkDetailsLabel: 'View Details', + }, +}; + +export const WithAction: Story = { + args: { + products: sampleProducts, + title: 'Popular Products', + description: 'Discover our most popular items chosen by customers like you.
', + action: ( + + ), + LinkComponent: MockLinkComponent, + linkDetailsLabel: 'View Details', + }, +}; diff --git a/packages/ui/src/components/ProductCarousel/ProductCarousel.tsx b/packages/ui/src/components/ProductCarousel/ProductCarousel.tsx new file mode 100644 index 000000000..e5d9e385e --- /dev/null +++ b/packages/ui/src/components/ProductCarousel/ProductCarousel.tsx @@ -0,0 +1,88 @@ +'use client'; + +import React from 'react'; + +import { cn } from '@o2s/ui/lib/utils'; + +import { ProductCard } from '@o2s/ui/components/Cards/ProductCard'; +import { Carousel } from '@o2s/ui/components/Carousel'; +import { RichText } from '@o2s/ui/components/RichText'; + +import { Typography } from '@o2s/ui/elements/typography'; + +import { ProductCarouselProps } from './ProductCarousel.types'; + +export const ProductCarousel: React.FC