"use client"; import React, { useState } from "react"; import { motion, LayoutGroup, AnimatePresence, type Transition, } from "motion/react"; import { Playlist01Icon, GridViewIcon, Layers01Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { cn } from "@/lib/utils"; interface CollectionItem { id: string; title: string; subtitle: string; idNumber: string; image: string; } const ITEMS: CollectionItem[] = [ { id: "1", title: "افق‌های سینمایی", subtitle: "عکاسی", idNumber: "۲۰۹", image: "/unsplash/1506744038136-46273834b3fb.webp", }, { id: "2", title: "رؤیاهای انتزاعی", subtitle: "هنر دیجیتال", idNumber: "۸۰۸", image: "/unsplash/1541701494587-cb58502866ab.webp", }, ]; type ViewMode = "list" | "card" | "pack"; const snappySpring: Transition = { type: "spring", stiffness: 350, damping: 30, mass: 1, }; const fadeMeta: Transition = { duration: 0.16, ease: [0.16, 1, 0.3, 1], }; const PACK_POSE = [ { rotate: -11, x: -22, y: 6 }, { rotate: 9, x: 24, y: -8 }, ] as const; export default function AnimatedCollection() { const [view, setView] = useState("list"); return (

مجموعهٔ من

{ITEMS.length.toLocaleString("fa-IR")} مورد

setView("list")} icon={Playlist01Icon} label="فهرست" /> setView("card")} icon={GridViewIcon} label="کارت" /> setView("pack")} icon={Layers01Icon} label="بسته" />

{ITEMS.map((item, index) => ( {view !== "pack" && (

{item.title}

{item.subtitle} · {item.idNumber}

)} ))} {view === "pack" && (

{ITEMS.map((item) => item.title).join(" · ")}

{ITEMS.length.toLocaleString("fa-IR")} اثر

)}

); } function Tab({ active, onClick, icon, label, }: { active: boolean; onClick: () => void; icon: typeof Playlist01Icon; label: string; }) { return ( ); }