+ } = props as any;
+
+ const codeStyleBase = {
+ fontFamily:
+ 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace',
+ };
+
+ if (isInline) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ // For block code (inside )
+ return (
+ wrapper
+ // However, ensure no extra padding/margin if pre handles it
+ padding: 0,
+ backgroundColor: "transparent", // Pre has the background
+ }}
+ {...htmlProps}
+ >
+ {children}
+
+ );
+ },
+ };
+
+ return (
+
+ );
+};
+
+export default ReadmePage;
diff --git a/app/slider/page.tsx b/app/slider/page.tsx
new file mode 100644
index 0000000..a548250
--- /dev/null
+++ b/app/slider/page.tsx
@@ -0,0 +1,64 @@
+import ImageSlider from "@/components/custom/ImageSlider";
+
+const SliderPage = () => {
+ const images = [
+ "/assets/1.png",
+ "/assets/2.png",
+ "/assets/3.png",
+ "/assets/4.png",
+ "/assets/5.png",
+ "/assets/6.png",
+ "/assets/7.png",
+ "/assets/8.png",
+ "/assets/9.png",
+ "/assets/10.png",
+ "/assets/11.png",
+ "/assets/12.png",
+ "/assets/13.png",
+ "/assets/14.png",
+ "/assets/15.png",
+ "/assets/16.png",
+ "/assets/17.png",
+ "/assets/18.png",
+ "/assets/19.png",
+ "/assets/20.png",
+ "/assets/21.png",
+ "/assets/22.png",
+ "/assets/23.png",
+ "/assets/24.png",
+ "/assets/25.png",
+ "/assets/26.png",
+ "/assets/27.png",
+ "/assets/28.png",
+ "/assets/29.png",
+ "/assets/30.png",
+ "/assets/31.png",
+ "/assets/32.png",
+ "/assets/33.png",
+ "/assets/34.png",
+ "/assets/35.png",
+ "/assets/36.png",
+ "/assets/37.png",
+ "/assets/38.png",
+ "/assets/39.png",
+ "/assets/40.png",
+ "/assets/41.png",
+ "/assets/42.png",
+ "/assets/43.png",
+ "/assets/44.png",
+ "/assets/45.png",
+ "/assets/46.png",
+ "/assets/47.png",
+ "/assets/48.png",
+ "/assets/49.png",
+ ];
+
+ return (
+
+
Image Slider
+
+
+ );
+};
+
+export default SliderPage;
diff --git a/components/custom/ImageSlider.tsx b/components/custom/ImageSlider.tsx
new file mode 100644
index 0000000..f14ca1b
--- /dev/null
+++ b/components/custom/ImageSlider.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight, ArrowLeft, Download } from "lucide-react"; // Added Download
+import { useRouter } from "next/navigation";
+import JSZip from "jszip";
+import { saveAs } from "file-saver";
+
+interface ImageSliderProps {
+ images: string[];
+}
+
+const ImageSlider: React.FC = ({ images }) => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isDownloading, setIsDownloading] = useState(false);
+ const [isHovered, setIsHovered] = useState(false); // New state for hover
+ const router = useRouter();
+
+ const goToPrevious = () => {
+ const isFirstImage = currentIndex === 0;
+ const newIndex = isFirstImage ? images.length - 1 : currentIndex - 1;
+ setCurrentIndex(newIndex);
+ };
+
+ const goToNext = () => {
+ const isLastImage = currentIndex === images.length - 1;
+ const newIndex = isLastImage ? 0 : currentIndex + 1;
+ setCurrentIndex(newIndex);
+ };
+
+ useEffect(() => {
+ let timer: NodeJS.Timeout;
+ if (!isHovered) {
+ // Only set timer if not hovered
+ timer = setTimeout(() => {
+ goToNext();
+ }, 5000); // Change image every 5 seconds
+ }
+ return () => clearTimeout(timer);
+ }, [currentIndex, images.length, isHovered, goToNext]); // Added isHovered and goToNext to dependency array
+
+ const handleDownloadAll = async () => {
+ if (!images || images.length === 0) return;
+ setIsDownloading(true);
+ const zip = new JSZip();
+ try {
+ for (let i = 0; i < images.length; i++) {
+ const response = await fetch(images[i]);
+ const blob = await response.blob();
+ // Extract filename from path, or use index as fallback
+ const filename =
+ images[i].substring(images[i].lastIndexOf("/") + 1) ||
+ `image_${i + 1}.png`;
+ zip.file(filename, blob);
+ }
+ const zipBlob = await zip.generateAsync({ type: "blob" });
+ saveAs(zipBlob, "images.zip");
+ } catch (error) {
+ console.error("Error zipping images:", error);
+ // Handle error (e.g., show a notification to the user)
+ } finally {
+ setIsDownloading(false);
+ }
+ };
+
+ if (!images || images.length === 0) {
+ return No images to display.
;
+ }
+
+ return (
+ setIsHovered(true)} // Set hovered to true
+ onMouseLeave={() => setIsHovered(false)} // Set hovered to false
+ >
+
+
+
+ {" "}
+ {/* Added mt-12 to make space for back button */}
+
+ {images.map((src, index) => (
+
+
+
+ ))}
+
+
+
+
+
+ {" "}
+ {/* Changed py-4 to pt-4 pb-1 to move dots lower */}
+ {images.map((_, index) => (
+
+
{/* Hamburger menu for mobile */}
@@ -29,7 +34,10 @@ export default function Navbar({ setDrawerOpen }: { setDrawerOpen?: Dispatch
-
+
@@ -40,7 +48,11 @@ export default function Navbar({ setDrawerOpen }: { setDrawerOpen?: Dispatch
+
Creator
+
Marketplace
+
Slider
+
Docs
{/* Logo and Brand */}
-
- Wodey
+
+
+ Wodey
+
{/* Mobile Menu Button */}
-