"use client"; import React, { useState } from "react"; import { motion } from "framer-motion"; import { cn } from "@/src/lib/utils"; import { CheckCircle2 } from "lucide-react"; import { LayoutGrid, List, Table, Activity, } from "lucide-react"; // --- Mock Options --- const VIEW_OPTIONS = [ { id: "grid", label: "Grid View", icon: LayoutGrid }, { id: "list", label: "List View", icon: List }, { id: "table", label: "Data Table", icon: Table }, { id: "graph", label: "Analytics", icon: Activity }, ]; // --- 7. Large Preview Thumbnails (The Cinematic) --- export default function LargeThumbnails() { const [active, setActive] = useState("grid"); return (

{VIEW_OPTIONS.map((opt) => ( setActive(opt.id)} className="group relative h-32 w-48 shrink-0 cursor-pointer overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950" whileHover={{ scale: 1.02 }} > {/* Mock Content inside thumbnail */}

{opt.id === 'grid' &&

} {opt.id === 'list' &&

} {opt.id === 'table' &&

} {opt.id === 'graph' &&

}

{/* Overlay Active State */}

{active === opt.id ? : }

{opt.label}

{/* Active Border */} {active === opt.id &&

} ))}

); };

Large Thumbnails