@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/non-functional/imageCarousels/ProductSlider.tsx

@@ -1,118 +1,118 @@
-// src/components/ProductSlider.tsx
-'use client'; 
-
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { PROGRAM_SLIDER } from './constants/programSlider'; 
-
-interface Product {
-  id: string;
-  name: string;
-  description: string;
-  image: string;
-}
-
-interface ProductSliderProps {
-  products?: Product[];
-}
-
-const ProductSlider = ({
-  products = [
-    {
-      id: '1',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[0],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[0],
-      image: '/images/products/placeholder1.jpg',
-    },
-    {
-      id: '2',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[1],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[1],
-      image: '/images/products/placeholder2.jpg',
-    },
-    {
-      id: '3',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[2],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[2],
-      image: '/images/products/placeholder3.jpg',
-    },
-    {
-      id: '4',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[3],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[3],
-      image: '/images/products/placeholder4.jpg',
-    },
-    {
-      id: '5',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[4],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[4],
-      image: '/images/products/placeholder5.jpg',
-    },
-    {
-      id: '6',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[5],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[5],
-      image: '/images/products/placeholder6.jpg',
-    },
-  ],
-}: ProductSliderProps) => {
-  const scrollLeft = () => {
-    document.getElementById('scroll-container')?.scrollBy({ left: -300, behavior: 'smooth' });
-  };
-
-  const scrollRight = () => {
-    document.getElementById('scroll-container')?.scrollBy({ left: 300, behavior: 'smooth' });
-  };
-
-  return (
-    <section className="bg-white">
-      <div className="w-full px-0">
-        <div className="relative w-full">
-          <button
-            onClick={scrollLeft}
-            className="absolute left-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300"
-            aria-label={PROGRAM_SLIDER.BUTTONS.PREVIOUS_PRODUCT_ARIA}
-          >
-            <ChevronLeft size={24} />
-          </button>
-          <div
-            id="scroll-container"
-            className="flex overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide"
-            style={{
-              scrollSnapType: 'x mandatory',
-              scrollbarWidth: 'none',
-              msOverflowStyle: 'none',
-            }}
-          >
-            {products.map((product) => (
-              <div
-                key={product.id}
-                className="min-w-full md:min-w-[50%] lg:min-w-[33.3333%] snap-start relative"
-              >
-                <div className="relative w-full h-[500px] sm:h-[600px] md:h-[800px] lg:h-[1200px]">
-                  <img
-                    src={product.image}
-                    alt={product.name}
-                    className="w-full h-full object-cover"
-                  />
-                  <div className="absolute bottom-0 w-full bg-black/50 text-white text-center py-4">
-                    <h3 className="text-2xl font-bold">{product.name}</h3>
-                    <p className="text-lg">{product.description}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          <button
-            onClick={scrollRight}
-            className="absolute right-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300"
-            aria-label={PROGRAM_SLIDER.BUTTONS.NEXT_PRODUCT_ARIA}
-          >
-            <ChevronRight size={24} />
-          </button>
-        </div>
-      </div>
-    </section>
-  );
-};
-
+// src/components/ProductSlider.tsx
+'use client'; 
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { PROGRAM_SLIDER } from './constants/programSlider'; 
+
+interface Product {
+  id: string;
+  name: string;
+  description: string;
+  image: string;
+}
+
+interface ProductSliderProps {
+  products?: Product[];
+}
+
+const ProductSlider = ({
+  products = [
+    {
+      id: '1',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[0],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[0],
+      image: '',
+    },
+    {
+      id: '2',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[1],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[1],
+      image: '',
+    },
+    {
+      id: '3',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[2],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[2],
+      image: '',
+    },
+    {
+      id: '4',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[3],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[3],
+      image: '',
+    },
+    {
+      id: '5',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[4],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[4],
+      image: '',
+    },
+    {
+      id: '6',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[5],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[5],
+      image: '',
+    },
+  ],
+}: ProductSliderProps) => {
+  const scrollLeft = () => {
+    document.getElementById('scroll-container')?.scrollBy({ left: -300, behavior: 'smooth' });
+  };
+
+  const scrollRight = () => {
+    document.getElementById('scroll-container')?.scrollBy({ left: 300, behavior: 'smooth' });
+  };
+
+  return (
+    <section className="bg-white">
+      <div className="w-full px-0">
+        <div className="relative w-full">
+          <button
+            onClick={scrollLeft}
+            className="absolute left-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300"
+            aria-label={PROGRAM_SLIDER.BUTTONS.PREVIOUS_PRODUCT_ARIA}
+          >
+            <ChevronLeft size={24} />
+          </button>
+          <div
+            id="scroll-container"
+            className="flex overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide"
+            style={{
+              scrollSnapType: 'x mandatory',
+              scrollbarWidth: 'none',
+              msOverflowStyle: 'none',
+            }}
+          >
+            {products.map((product) => (
+              <div
+                key={product.id}
+                className="min-w-full md:min-w-[50%] lg:min-w-[33.3333%] snap-start relative"
+              >
+                <div className="relative w-full h-[500px] sm:h-[600px] md:h-[800px] lg:h-[1200px]">
+                  <img
+                    src={product.image}
+                    alt={product.name}
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute bottom-0 w-full bg-black/50 text-white text-center py-4">
+                    <h3 className="text-2xl font-bold">{product.name}</h3>
+                    <p className="text-lg">{product.description}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <button
+            onClick={scrollRight}
+            className="absolute right-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300"
+            aria-label={PROGRAM_SLIDER.BUTTONS.NEXT_PRODUCT_ARIA}
+          >
+            <ChevronRight size={24} />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
 export default ProductSlider;