Day Picker

1"use client";
2import {
3  Tick02Icon,
4  CodeIcon,
5  UnfoldMoreIcon,
6} from "@hugeicons/core-free-icons";
7import { HugeiconsIcon } from "@hugeicons/react";
8import { useState } from "react";
9import { cn } from "@/lib/utils";
10import { AnimatePresence, motion } from "motion/react";
11 
12const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
13type options = "Daily" | "Weekly" | "Monthly" | "Yearly";
14// Change Here
15const options: options[] = ["Daily", "Weekly", "Monthly", "Yearly"];
16 
17const springTransition = {
18  type: "spring",
19  damping: 30,
20  stiffness: 400,
21  mass: 1,
22} as const;
23 
24export default function TwentyThreeFour() {
25  const [day, setDay] = useState(1);
26  const [option, setOption] = useState<options>("Daily");
27  const [isOptionOpen, setisOptionOpen] = useState(false);
28  const [isSelectorOpen, setIsSelectorOpen] = useState(true);
29 
30  return (
31    <div className="w-full h-full  flex justify-center items-center font-medium text-sm">
32      <motion.div
33        layout
34        transition={springTransition}
35        className="flex flex-col gap-1.5 shadow-lg overflow-hidden rounded-3xl bg-muted p-1.5 max-w-xs w-full"
36      >
37        <div className="flex justify-between items-center relative">
38          <motion.div
39            layout
40            animate={{
41              filter: isOptionOpen ? "blur(8px)" : "blur(0px)",
42            }}
43            transition={springTransition}
44            className="px-3 text-muted-foreground h-full flex items-center justify-center py-2 "
45          >
46            Frequency
47          </motion.div>
48          {isOptionOpen ? (
49            <div className="absolute w-full h-full flex justify-between gap-2 p-0">
50              <motion.div className="flex justify-between w-full relative items-center rounded-3xl ">
51                <motion.div
52                  layout
53                  transition={springTransition}
54                  layoutId="options"
55                  className="absolute w-full rounded-3xl bg-background h-full"
56                ></motion.div>
57 
58                <div className="flex justify-between px-1">
59                  {options.map((op) => {
60                    return (
61                      <motion.div
62                        key={op}
63                        layout
64                        initial={{
65                          filter: "blur(8px)",
66                          opacity: 0,
67                        }}
68                        animate={{
69                          filter: "blur(0px)",
70// … truncated