List Item

1"use client";
2import { motion, MotionConfig } from "motion/react";
3import { Dispatch, SetStateAction, useState } from "react";
4import clsx from "clsx";
5 
6import {
7  Appointment01Icon,
8  BalloonsIcon,
9  GoogleMapsIcon,
10  ZoomIcon,
11  ReminderIcon,
12  TaskDaily01Icon,
13  Tick02Icon,
14  FilterHorizontalIcon,
15} from "@hugeicons/core-free-icons";
16import { HugeiconsFreeIcons } from "@hugeicons/core-free-icons";
17import { HugeiconsIcon } from "@hugeicons/react";
18 
19export type FilterKey = (typeof filterKeys)[number];
20 
21// Change Here
22export const filterKeys = [
23  {
24    name: "tasks",
25    Icon: ({ size }: { size: number }) => (
26      <HugeiconsIcon icon={TaskDaily01Icon} size={size} />
27    ),
28  },
29  {
30    name: "events",
31    Icon: ({ size }: { size: number }) => (
32      <HugeiconsIcon icon={GoogleMapsIcon} size={size} />
33    ),
34  },
35  {
36    name: "reminders",
37    Icon: ({ size }: { size: number }) => (
38      <HugeiconsIcon icon={ReminderIcon} size={size} />
39    ),
40  },
41  {
42    name: "appointments",
43    Icon: ({ size }: { size: number }) => (
44      <HugeiconsIcon icon={Appointment01Icon} size={size} />
45    ),
46  },
47  {
48    name: "meetings",
49    Icon: ({ size }: { size: number }) => (
50      <HugeiconsIcon icon={ZoomIcon} size={size} />
51    ),
52  },
53  {
54    name: "celebrations",
55    Icon: ({ size }: { size: number }) => (
56      <HugeiconsIcon icon={BalloonsIcon} size={size} />
57    ),
58  },
59];
60 
61function ListItem(props: {
62  index: number;
63  filterKey: FilterKey;
64  selectedFilterKey: FilterKey;
65  setSelectedFilterKey: Dispatch<SetStateAction<FilterKey>>;
66  setIsOpened: Dispatch<SetStateAction<boolean>>;
67}) {
68  const {
69    index,
70    filterKey,
71    selectedFilterKey,
72    setSelectedFilterKey,
73    setIsOpened,
74  } = props;
75  const delay = (index + 8) * 0.025;
76 
77  return (
78    <motion.div
79      initial={{ opacity: 0, y: 40 }}
80      animate={{ opacity: 1, y: 0 }}
81      transition={{
82        type: "spring",
83        bounce: 0.1,
84        duration: 0.25,
85        delay,
86        ease: [0.215, 0.61, 0.355, 1],
87      }}
88      onClick={() => {
89        setSelectedFilterKey(filterKey);
90 
91        setTimeout(() => {
92          setIsOpened(false);
93        }, 150);
94      }}
95      className="px-3 py-2 rounded-2xl flex justify-between items-center cursor-default hover:bg-accent  text-foreground"
96    >
97      <div className="flex items-center gap-x-3">
98        <span className="text-muted-foreground">
99          <filterKey.Icon size={24} />
100        </span>
101// … truncated