@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/components/addOns/non-functional/SampleCarousel.tsx

@@ -1,205 +1,205 @@
-'use client';
-
-import { useRef, useState } from 'react';
-import { motion } from 'framer-motion';
-import { ChevronLeft, ChevronRight, X } from 'lucide-react';
-
-export default function SampleCarousel() {
-  // Modal state
-  type Sample = {
-    brand: string;
-    type: string;
-    src?: string;
-    alt?: string;
-    description: string;
-  };
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedSample, setSelectedSample] = useState<Sample | null>(null);
-
-  const openModal = (sample: Sample) => {
-    setSelectedSample(sample);
-    setIsModalOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsModalOpen(false);
-    setSelectedSample(null);
-  };
-
-  // Carousel ref for scrolling
-  const carouselRef = useRef<HTMLDivElement>(null);
-
-  const scrollLeft = () => {
-    if (carouselRef.current) {
-      carouselRef.current.scrollBy({ left: -300, behavior: 'smooth' });
-    }
-  };
-
-  const scrollRight = () => {
-    if (carouselRef.current) {
-      carouselRef.current.scrollBy({ left: 300, behavior: 'smooth' });
-    }
-  };
-
-  // Carpet examples data
-  const carpetExamples = [
-    {
-      brand: 'Lorem',
-      type: 'Ipsum Dolor',
-      src: '/images/carpet/samples/new-samples/Dreamweaver_Astounding_Color_Fine Details-min.jpg',
-      alt: '',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
-    },
-    {
-      brand: 'Lorem',
-      type: 'Sit Amet',
-      src: '/images/carpet/samples/new-samples/Dreamweaver_Dublin II_Color_Dundrum-min.jpg',
-      alt: '',
-      description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.',
-    },
-    {
-      brand: 'Lorem',
-      type: 'Consectetur',
-      src: '/images/carpet/samples/new-samples/Dreamweaver_Gold Standard_Color_Glitter-min.jpg',
-      alt: '',
-      description: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.',
-    }
-  ];
-
-  return (
-    <section
-      id="carpet-examples"
-      className="relative w-full py-16 sm:py-24 md:py-32 bg-gradient-to-b from-blue-100/20 to-teal-100/20"
-    >
-      <div className="w-full px-4 sm:px-6 md:px-12">
-        <motion.div
-          className="text-center"
-          initial={{ opacity: 0, y: 50 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-        >
-          <h2 className="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 md:mb-12 text-blue-900 tracking-tight">
-            Lorem Ipsum Samples
-          </h2>
-          <div className="relative">
-            <div
-              ref={carouselRef}
-              className="flex overflow-x-auto snap-x snap-mandatory scrollbar-hide space-x-6 py-4"
-              style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-            >
-              {carpetExamples.map((example, index) => (
-                <motion.div
-                  key={`${example.brand}-${example.type}-${index}`}
-                  className="flex-none w-64 md:w-80 snap-center relative group"
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  whileInView={{ opacity: 1, scale: 1 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
-                >
-                  <button
-                    onClick={() => openModal(example)}
-                    className="w-full flex flex-col items-center justify-center rounded-3xl glassmorphic min-h-[300px] hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-2 focus:ring-teal-500"
-                  >
-                    {example.src ? (
-                      <div className="w-full h-48 md:h-64 aspect-square relative">
-                        <img
-                          src={example.src}
-                          alt={example.alt || `${example.brand} ${example.type} sample`}
-                          className="w-full h-full object-cover rounded-2xl"
-                          title={`${example.brand} ${example.type}`}
-                          onError={(e) => {
-                            e.currentTarget.style.display = 'none';
-                            e.currentTarget.parentElement!.innerHTML = `<div class="text-center h-48 md:h-64 flex flex-col items-center justify-center"><span class="text-2xl md:text-3xl font-bold text-teal-600">${example.brand}</span><span class="text-lg md:text-xl text-teal-600">${example.type}</span></div>`;
-                          }}
-                        />
-                        <div className="absolute inset-0 flex flex-col items-center justify-center bg-teal-600/50 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl p-4 text-center">
-                          <span className="text-lg md:text-xl font-bold">{example.brand}</span>
-                          <span className="text-sm md:text-base font-medium">{example.type}</span>
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="text-center h-48 md:h-64 flex flex-col items-center justify-center">
-                        <span className="text-2xl md:text-3xl font-bold text-teal-600">{example.brand}</span>
-                        <span className="text-lg md:text-xl text-teal-600">{example.type}</span>
-                      </div>
-                    )}
-                  </button>
-                </motion.div>
-              ))}
-            </div>
-            <button
-              onClick={scrollLeft}
-              className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-teal-600/80 text-white p-3 rounded-full hover:bg-teal-500 transition-colors duration-300"
-              aria-label="Scroll Left"
-            >
-              <ChevronLeft size={24} />
-            </button>
-            <button
-              onClick={scrollRight}
-              className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-teal-600/80 text-white p-3 rounded-full hover:bg-teal-500 transition-colors duration-300"
-              aria-label="Scroll Right"
-            >
-              <ChevronRight size={24} />
-            </button>
-          </div>
-          <p className="mt-6 text-sm md:text-base text-gray-600 italic max-w-5xl mx-auto">
-            *Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.*
-          </p>
-        </motion.div>
-      </div>
-
-      {/* Modal */}
-      {isModalOpen && selectedSample && (
-        <motion.div
-          className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4 sm:p-6 md:p-8"
-          onClick={closeModal}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
-        >
-          <motion.div
-            className="bg-white rounded-3xl shadow-2xl w-full max-w-[90vw] sm:max-w-3xl md:max-w-4xl lg:max-w-5xl max-h-[90vh] overflow-y-auto p-6 sm:p-8 relative glassmorphic"
-            onClick={(e) => e.stopPropagation()}
-            initial={{ scale: 0.8, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0.8, opacity: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <button
-              onClick={closeModal}
-              className="absolute top-4 right-4 text-gray-600 hover:text-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-500"
-              aria-label="Close Modal"
-            >
-              <X size={28} />
-            </button>
-            <div className="flex flex-col md:flex-row gap-6 sm:gap-8">
-              {selectedSample.src ? (
-                <img
-                  src={selectedSample.src}
-                  alt={selectedSample.alt || `${selectedSample.brand} ${selectedSample.type} sample`}
-                  className="w-full md:w-1/2 h-64 sm:h-80 md:h-96 lg:h-[32rem] object-cover rounded-2xl"
-                  onError={(e) => {
-                    e.currentTarget.style.display = 'none';
-                    e.currentTarget.parentElement!.innerHTML = `<div class="w-full md:w-1/2 h-64 sm:h-80 md:h-96 lg:h-[32rem] flex flex-col items-center justify-center bg-gray-100 rounded-2xl"><span class="text-xl sm:text-2xl md:text-3xl font-bold text-teal-600">${selectedSample.brand}</span><span class="text-base sm:text-lg md:text-xl text-teal-600">${selectedSample.type}</span></div>`;
-                  }}
-                />
-              ) : (
-                <div className="w-full md:w-1/2 h-64 sm:h-80 md:h-96 lg:h-[32rem] flex flex-col items-center justify-center bg-gray-100 rounded-2xl">
-                  <span className="text-xl sm:text-2xl md:text-3xl font-bold text-teal-600">{selectedSample.brand}</span>
-                  <span className="text-base sm:text-lg md:text-xl text-teal-600">{selectedSample.type}</span>
-                </div>
-              )}
-              <div className="flex-1 flex flex-col justify-center">
-                <h3 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-teal-600 mb-2 sm:mb-3">{selectedSample.brand}</h3>
-                <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-800 mb-3 sm:mb-4">{selectedSample.type}</p>
-                <p className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-600">{selectedSample.description}</p>
-              </div>
-            </div>
-          </motion.div>
-        </motion.div>
-      )}
-    </section>
-  );
+'use client';
+
+import { useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronLeft, ChevronRight, X } from 'lucide-react';
+
+export default function SampleCarousel() {
+  // Modal state
+  type Sample = {
+    brand: string;
+    type: string;
+    src?: string;
+    alt?: string;
+    description: string;
+  };
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedSample, setSelectedSample] = useState<Sample | null>(null);
+
+  const openModal = (sample: Sample) => {
+    setSelectedSample(sample);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedSample(null);
+  };
+
+  // Carousel ref for scrolling
+  const carouselRef = useRef<HTMLDivElement>(null);
+
+  const scrollLeft = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: -300, behavior: 'smooth' });
+    }
+  };
+
+  const scrollRight = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: 300, behavior: 'smooth' });
+    }
+  };
+
+  // Carpet examples data
+  const carpetExamples = [
+    {
+      brand: 'Lorem',
+      type: 'Ipsum Dolor',
+      src: '/images/carpet/samples/new-samples/Dreamweaver_Astounding_Color_Fine Details-min.jpg',
+      alt: '',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    },
+    {
+      brand: 'Lorem',
+      type: 'Sit Amet',
+      src: '/images/carpet/samples/new-samples/Dreamweaver_Dublin II_Color_Dundrum-min.jpg',
+      alt: '',
+      description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.',
+    },
+    {
+      brand: 'Lorem',
+      type: 'Consectetur',
+      src: '/images/carpet/samples/new-samples/Dreamweaver_Gold Standard_Color_Glitter-min.jpg',
+      alt: '',
+      description: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.',
+    }
+  ];
+
+  return (
+    <section
+      id="carpet-examples"
+      className="relative w-full py-16 sm:py-24 md:py-32 bg-gradient-to-b from-blue-100/20 to-teal-100/20"
+    >
+      <div className="w-full px-4 sm:px-6 md:px-12">
+        <motion.div
+          className="text-center"
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+        >
+          <h2 className="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 md:mb-12 text-blue-900 tracking-tight">
+            Lorem Ipsum Samples
+          </h2>
+          <div className="relative">
+            <div
+              ref={carouselRef}
+              className="flex overflow-x-auto snap-x snap-mandatory scrollbar-hide space-x-6 py-4"
+              style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+            >
+              {carpetExamples.map((example, index) => (
+                <motion.div
+                  key={`${example.brand}-${example.type}-${index}`}
+                  className="flex-none w-64 md:w-80 snap-center relative group"
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  whileInView={{ opacity: 1, scale: 1 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                >
+                  <button
+                    onClick={() => openModal(example)}
+                    className="w-full flex flex-col items-center justify-center rounded-3xl glassmorphic min-h-[300px] hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-2 focus:ring-teal-500"
+                  >
+                    {example.src ? (
+                      <div className="w-full h-48 md:h-64 aspect-square relative">
+                        <img
+                          src={example.src}
+                          alt={example.alt || `${example.brand} ${example.type} sample`}
+                          className="w-full h-full object-cover rounded-2xl"
+                          title={`${example.brand} ${example.type}`}
+                          onError={(e) => {
+                            e.currentTarget.style.display = 'none';
+                            e.currentTarget.parentElement!.innerHTML = `<div class="text-center h-48 md:h-64 flex flex-col items-center justify-center"><span class="text-2xl md:text-3xl font-bold text-teal-600">${example.brand}</span><span class="text-lg md:text-xl text-teal-600">${example.type}</span></div>`;
+                          }}
+                        />
+                        <div className="absolute inset-0 flex flex-col items-center justify-center bg-teal-600/50 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl p-4 text-center">
+                          <span className="text-lg md:text-xl font-bold">{example.brand}</span>
+                          <span className="text-sm md:text-base font-medium">{example.type}</span>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="text-center h-48 md:h-64 flex flex-col items-center justify-center">
+                        <span className="text-2xl md:text-3xl font-bold text-teal-600">{example.brand}</span>
+                        <span className="text-lg md:text-xl text-teal-600">{example.type}</span>
+                      </div>
+                    )}
+                  </button>
+                </motion.div>
+              ))}
+            </div>
+            <button
+              onClick={scrollLeft}
+              className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-teal-600/80 text-white p-3 rounded-full hover:bg-teal-500 transition-colors duration-300"
+              aria-label="Scroll Left"
+            >
+              <ChevronLeft size={24} />
+            </button>
+            <button
+              onClick={scrollRight}
+              className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-teal-600/80 text-white p-3 rounded-full hover:bg-teal-500 transition-colors duration-300"
+              aria-label="Scroll Right"
+            >
+              <ChevronRight size={24} />
+            </button>
+          </div>
+          <p className="mt-6 text-sm md:text-base text-gray-600 italic max-w-5xl mx-auto">
+            *Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.*
+          </p>
+        </motion.div>
+      </div>
+
+      {/* Modal */}
+      {isModalOpen && selectedSample && (
+        <motion.div
+          className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4 sm:p-6 md:p-8"
+          onClick={closeModal}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          <motion.div
+            className="bg-white rounded-3xl shadow-2xl w-full max-w-[90vw] sm:max-w-3xl md:max-w-4xl lg:max-w-5xl max-h-[90vh] overflow-y-auto p-6 sm:p-8 relative glassmorphic"
+            onClick={(e) => e.stopPropagation()}
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <button
+              onClick={closeModal}
+              className="absolute top-4 right-4 text-gray-600 hover:text-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-500"
+              aria-label="Close Modal"
+            >
+              <X size={28} />
+            </button>
+            <div className="flex flex-col md:flex-row gap-6 sm:gap-8">
+              {selectedSample.src ? (
+                <img
+                  src={selectedSample.src}
+                  alt={selectedSample.alt || `${selectedSample.brand} ${selectedSample.type} sample`}
+                  className="w-full md:w-1/2 h-64 sm:h-80 md:h-96 lg:h-[32rem] object-cover rounded-2xl"
+                  onError={(e) => {
+                    e.currentTarget.style.display = 'none';
+                    e.currentTarget.parentElement!.innerHTML = `<div class="w-full md:w-1/2 h-64 sm:h-80 md:h-96 lg:h-[32rem] flex flex-col items-center justify-center bg-gray-100 rounded-2xl"><span class="text-xl sm:text-2xl md:text-3xl font-bold text-teal-600">${selectedSample.brand}</span><span class="text-base sm:text-lg md:text-xl text-teal-600">${selectedSample.type}</span></div>`;
+                  }}
+                />
+              ) : (
+                <div className="w-full md:w-1/2 h-64 sm:h-80 md:h-96 lg:h-[32rem] flex flex-col items-center justify-center bg-gray-100 rounded-2xl">
+                  <span className="text-xl sm:text-2xl md:text-3xl font-bold text-teal-600">{selectedSample.brand}</span>
+                  <span className="text-base sm:text-lg md:text-xl text-teal-600">{selectedSample.type}</span>
+                </div>
+              )}
+              <div className="flex-1 flex flex-col justify-center">
+                <h3 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-teal-600 mb-2 sm:mb-3">{selectedSample.brand}</h3>
+                <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-800 mb-3 sm:mb-4">{selectedSample.type}</p>
+                <p className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-600">{selectedSample.description}</p>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </section>
+  );
 }