"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { stagger, staggerItem, cardHoverTarget, fadeIn, scaleIn } from "@/lib/animations" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { X, ChevronLeft, ChevronRight, Grid3X3 } from "lucide-react" import { cn } from "@/lib/utils" const categories = ["All", "UI Design", "Dashboard", "Mobile", "Branding"] interface GalleryItem { id: string title: string category: string bg: string } const items: GalleryItem[] = [ { id: "1", title: "Payment Dashboard", category: "Dashboard", bg: "bg-linear-to-br from-blue-500 to-purple-600" }, { id: "2", title: "Mobile Wallet UI", category: "Mobile", bg: "bg-linear-to-br from-green-400 to-emerald-600" }, { id: "3", title: "Analytics Charts", category: "UI Design", bg: "bg-linear-to-br from-orange-400 to-red-500" }, { id: "4", title: "Dark Mode Concept", category: "UI Design", bg: "bg-linear-to-br from-slate-700 to-slate-900" }, { id: "5", title: "Team Dashboard", category: "Dashboard", bg: "bg-linear-to-br from-cyan-400 to-blue-600" }, { id: "6", title: "Brand Guidelines", category: "Branding", bg: "bg-linear-to-br from-pink-400 to-rose-600" }, { id: "7", title: "App Onboarding", category: "Mobile", bg: "bg-linear-to-br from-violet-400 to-purple-700" }, { id: "8", title: "Logo Variations", category: "Branding", bg: "bg-linear-to-br from-amber-400 to-yellow-600" }, { id: "9", title: "Invoice Template", category: "UI Design", bg: "bg-linear-to-br from-teal-400 to-cyan-600" }, { id: "10", title: "User Profile Page", category: "Dashboard", bg: "bg-linear-to-br from-indigo-400 to-blue-700" }, { id: "11", title: "Mobile Checkout", category: "Mobile", bg: "bg-linear-to-br from-lime-400 to-green-600" }, { id: "12", title: "Color System", category: "Branding", bg: "bg-linear-to-br from-fuchsia-400 to-pink-600" }, ] export default function Gallery() { const [activeCategory, setActiveCategory] = useState("All") const [lightbox, setLightbox] = useState(null) const [lightboxIndex, setLightboxIndex] = useState(0) const filtered = activeCategory === "All" ? items : items.filter((item) => item.category === activeCategory) const openLightbox = (item: GalleryItem) => { const idx = filtered.findIndex((i) => i.id === item.id) setLightboxIndex(idx) setLightbox(item) } const navigateLightbox = (direction: "prev" | "next") => { const newIndex = direction === "prev" ? lightboxIndex - 1 : lightboxIndex + 1 if (newIndex >= 0 && newIndex < filtered.length) { setLightboxIndex(newIndex) setLightbox(filtered[newIndex]) } } return (

Gallery

Browse our collection of UI designs and components.

{categories.map((cat) => ( ))} {filtered.map((item) => ( openLightbox(item)} >

{item.category}

{item.title}

))}

{lightbox && ( setLightbox(null)} > e.stopPropagation()} >

{lightbox.title}

{lightbox.category}

{lightboxIndex > 0 && ( )} {lightboxIndex < filtered.length - 1 && ( )} )}

) }