Upload components/Carousel.js with huggingface_hub

components/Carousel.js

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export default function Carousel({ items, renderItem, title }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const itemsPerPage = 1;
+  const totalPages = Math.ceil(items.length / itemsPerPage);
+
+  const goToPrevious = () => {
+    setCurrentIndex((prev) => (prev === 0 ? totalPages - 1 : prev - 1));
+  };
+
+  const goToNext = () => {
+    setCurrentIndex((prev) => (prev === totalPages - 1 ? 0 : prev + 1));
+  };
+
+  return (
+    <div className="brutal-card">
+      {title && <div className="section-header">{title}</div>}
+      
+      <div className="relative">
+        {/* Main carousel container */}
+        <div className="overflow-hidden">
+          <div 
+            className="flex transition-transform duration-300 ease-out"
+            style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+          >
+            {items.map((item, index) => (
+              <div key={index} className="w-full flex-shrink-0">
+                {renderItem(item, index)}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Navigation buttons */}
+        <div className="flex items-center justify-between mt-6">
+          <button
+            onClick={goToPrevious}
+            className="brutal-btn flex items-center gap-2"
+          >
+            <ChevronLeft size={18} />
+            <span className="hidden sm:inline">Prev</span>
+          </button>
+
+          {/* Dots indicator */}
+          <div className="flex gap-2">
+            {Array.from({ length: totalPages }).map((_, index) => (
+              <button
+                key={index}
+                onClick={() => setCurrentIndex(index)}
+                className={`
+                  w-3 h-3 border-2 border-brutal-black transition-all
+                  ${currentIndex === index ? 'bg-brutal-black' : 'bg-transparent'}
+                `}
+                aria-label={`Go to slide ${index + 1}`}
+              />
+            ))}
+          </div>
+
+          <button
+            onClick={goToNext}
+            className="brutal-btn flex items-center gap-2"
+          >
+            <span className="hidden sm:inline">Next</span>
+            <ChevronRight size={18} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}