Animated Collection

1"use client";
2 
3import {
4  motion,
5  LayoutGroup,
6  AnimatePresence,
7  type Transition,
8} from "motion/react";
9import {
10  Playlist01Icon,
11  GridViewIcon,
12  Layers01Icon,
13  StarIcon,
14  Ticket01Icon,
15  Camera01Icon,
16  BrushIcon,
17} from "@hugeicons/core-free-icons";
18import { HugeiconsIcon } from "@hugeicons/react";
19import { cn } from "@/lib/utils";
20import React, { useState } from "react";
21 
22interface CollectionItem {
23  id: string;
24  title: string;
25  subtitle: string;
26  idNumber: string;
27  image: string;
28  icon: any;
29}
30 
31// Change Here
32const ITEMS: CollectionItem[] = [
33  {
34    id: "1",
35    title: "Cinematic Horizons",
36    subtitle: "Photography",
37    idNumber: "209",
38    image:
39      "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=400&h=400&auto=format&fit=crop",
40    icon: Camera01Icon,
41  },
42  {
43    id: "2",
44    title: "Abstract Dreams",
45    subtitle: "Digital Art",
46    idNumber: "808",
47    image:
48      "https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=400&h=400&auto=format&fit=crop",
49    icon: BrushIcon,
50  },
51];
52type ViewMode = "list" | "card" | "pack";
53 
54const snappySpring: Transition = {
55  type: "spring",
56  stiffness: 350,
57  damping: 30,
58  mass: 1,
59};
60 
61const fastFade: Transition = {
62  duration: 0.1,
63  ease: "linear",
64};
65 
66export default function LayoutSwitcher() {
67  const [view, setView] = useState<ViewMode>("list");
68  return (
69    <div className="w-full max-w-xl mx-auto p-4 md:p-8 font-sans selection:bg-primary/10">
70      <div className="flex flex-col gap-6">
71        <div className="flex flex-col gap-5">
72          <h2 className="text-xl font-medium text-foreground ">
73            My Collection
74          </h2>
75 
76          <div className="flex p-1 bg-muted rounded-full w-fit border border-border">
77            <Tab
78              active={view === "list"}
79              onClick={() => setView("list")}
80              icon={Playlist01Icon}
81              label="List view"
82            />
83            <Tab
84              active={view === "card"}
85              onClick={() => setView("card")}
86              icon={GridViewIcon}
87              label="Card view"
88            />
89            <Tab
90              active={view === "pack"}
91              onClick={() => setView("pack")}
92              icon={Layers01Icon}
93              label="Pack view"
94            />
95          </div>
96        </div>
97        <div className="h-px bg-border w-full" />
98        {/* Content Section */}
99        <div className="relative min-h-[350px] flex flex-col items-center">
100// … truncated