"use client"; import { Tick02Icon, UnfoldMoreIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; const days = ["ی", "د", "س", "چ", "پ", "ج", "ش"]; type options = "روزانه" | "هفتگی" | "ماهانه" | "سالانه"; // Change Here const options: options[] = ["روزانه", "هفتگی", "ماهانه", "سالانه"]; const springTransition = { type: "spring", damping: 30, stiffness: 400, mass: 1, } as const; export default function DayPicker() { const [day, setDay] = useState(1); const [option, setOption] = useState("روزانه"); const [isOptionOpen, setisOptionOpen] = useState(false); const [isSelectorOpen, setIsSelectorOpen] = useState(true); return (

تکرار {isOptionOpen ? (

{options.map((op) => { return ( { setOption(op); setIsSelectorOpen(true); }} className={cn( "relative cursor-pointer rounded-[24px] px-2 py-1 text-muted-foreground transition-colors duration-300", option === op && "text-foreground" )} > {option === op && ( )} {op} ); })}

{ setisOptionOpen(false); setIsSelectorOpen(false); }} initial={{ filter: "blur(1px)", opacity: 0.6, }} animate={{ filter: "blur(0px)", opacity: 1, }} exit={{ filter: "blur(1px)", opacity: 0.6, }} transition={springTransition} style={{ borderRadius: 24 }} className="flex h-full cursor-pointer items-center justify-center bg-primary px-[10px] text-primary-foreground" >

) : ( setisOptionOpen(true)} className="relative flex w-fit cursor-pointer items-center gap-0 rounded-full p-0 px-0" > {option === "هفتگی" ? option + "، " + days[day] : option} )}

{isSelectorOpen && option === "هفتگی" && ( {days.map((d, index) => { return ( setDay(index)} className={cn( "relative cursor-pointer rounded-3xl px-2 py-1 transition-colors duration-300", index === day ? "text-foreground" : "text-muted-foreground" )} > {d} {index === day && ( )} ); })} )}

); }