"use client"; import { motion, MotionConfig } from "motion/react"; import { Dispatch, SetStateAction, useState } from "react"; import clsx from "clsx"; import { Appointment01Icon, BalloonsIcon, GoogleMapsIcon, ZoomIcon, ReminderIcon, TaskDaily01Icon, Tick02Icon, FilterHorizontalIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; export type FilterKey = (typeof filterKeys)[number]; // Change Here export const filterKeys = [ { name: "tasks", label: "وظایف", Icon: ({ size }: { size: number }) => ( ), }, { name: "events", label: "رویدادها", Icon: ({ size }: { size: number }) => ( ), }, { name: "reminders", label: "یادآورها", Icon: ({ size }: { size: number }) => ( ), }, { name: "appointments", label: "قرارها", Icon: ({ size }: { size: number }) => ( ), }, { name: "meetings", label: "جلسات", Icon: ({ size }: { size: number }) => ( ), }, { name: "celebrations", label: "جشن‌ها", Icon: ({ size }: { size: number }) => ( ), }, ]; function ListItem(props: { index: number; filterKey: FilterKey; selectedFilterKey: FilterKey; setSelectedFilterKey: Dispatch>; setIsOpened: Dispatch>; }) { const { index, filterKey, selectedFilterKey, setSelectedFilterKey, setIsOpened, } = props; const delay = (index + 8) * 0.025; return ( { setSelectedFilterKey(filterKey); setTimeout(() => { setIsOpened(false); }, 150); }} className="flex cursor-default items-center justify-between rounded-2xl px-3 py-2 text-foreground hover:bg-accent" >

{filterKey.label}

{selectedFilterKey.name == filterKey.name && (

)}

); } const FilterInteraction = () => { const [selectedFilterKey, setSelectedFilterKey] = useState(filterKeys[0]); const [isOpened, setIsOpened] = useState(false); return (

setIsOpened(true)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setIsOpened(true); } }} className="relative start-2.5 flex h-20 w-20 items-center justify-center" >

{isOpened && (

{filterKeys.map((item, index) => ( ))}

)}

); }; export default FilterInteraction;