fix: datepicker animation

note: https://github.com/motiondivision/motion/issues/2416

src/trash/trash-components.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import {
   BiCheck,
   BiHide,
@@ -123,34 +123,36 @@ function DatePickerButton({ next = false, date, setDate, pink = false }) {
 export const DatePicker = (props) => {
   const dateTag = getDateTags(props.date);
   const { trigger } = useWebHaptics();
+  const layoutGroupId = useId();
+
   return (
-    <LayoutGroup>
+    <div
-      <div
+      className={`flex items-center justify-between px-2 py-1 w-full bg-grain ${
-        className={`flex items-center justify-between px-2 py-1 w-full bg-grain ${
+        !props.pink ? "border-zinc-800/40" : "border-pink-500/20"
-          !props.pink ? "border-zinc-800/40" : "border-pink-500/20"
+      } border rounded-2xl relative`}
-        } border rounded-2xl relative`}
+    >
-      >
+      <DatePickerButton
-        <DatePickerButton
+        date={props.date}
-          date={props.date}
+        setDate={props.setDate}
-          setDate={props.setDate}
+        pink={props.pink}
-          pink={props.pink}
+      />
-        />
+      <LayoutGroup id={layoutGroupId}>
-        <AnimatePresence mode="popLayout">
+        <AnimatePresence mode="wait">
           <motion.span
-            // key={formatDate(props.date)}
+            key={formatDate(props.date)}
-            className={`cursor-pointer flex items-center gap-1 justify-center w-[80%]  lg:hover:text-black *:transition-colors transition-colors p-1 rounded-3xl text-zinc-300 ${
+            className={`cursor-pointer flex items-center z gap-1 justify-center w-[80%] lg:hover:text-black *:transition-colors transition-colors p-1 rounded-3xl text-zinc-300 ${
               !props.pink
                 ? "lg:hover:bg-white lg:hover:*:text-black"
                 : "lg:hover:bg-pink-500 lg:hover:*:text-white"
             } px-3 overflow-hidden `}
-            // variants={{
+            variants={{
-            //   a: { opacity: 0, filter: "blur(1px)" },
+              a: { opacity: 0 },
-            //   b: { opacity: 1, filter: "blur(0px)" },
+              b: { opacity: 1 },
-            // }}
+            }}
-            // initial="a"
+            initial="a"
-            // animate="b"
+            animate="b"
-            // exit="a"
+            transition={{ duration: 0.2 }}
-
+            exit="a"
             onClick={() => {
               if (apiFormatDate(props.date) != apiFormatDate(new Date()))
                 trigger([
@@ -171,7 +173,7 @@ export const DatePicker = (props) => {
                   : " bg-transparent")
               }
               layoutId="datepicker_indicator"
-              // layout="position"
+              layout="position"
             />
             <motion.span
               layoutId="datepicker_date"
@@ -184,7 +186,7 @@ export const DatePicker = (props) => {
               <>
                 <motion.div
                   className="flex"
-                  // layoutId="datepicker_date_div"
+                  layoutId="datepicker_date_div"
                   layout="position"
                 >
                   <span
@@ -205,14 +207,14 @@ export const DatePicker = (props) => {
             )}
           </motion.span>
         </AnimatePresence>
-        <DatePickerButton
+      </LayoutGroup>
-          next
+      <DatePickerButton
-          date={props.date}
+        next
-          setDate={props.setDate}
+        date={props.date}
-          pink={props.pink}
+        setDate={props.setDate}
-        />
+        pink={props.pink}
-      </div>
+      />
-    </LayoutGroup>
+    </div>
   );
 };
 
@@ -255,45 +257,6 @@ export function DengiButton({
   );
 }
 
-// BAD IDEA::
-//
-// export function CoolMouseBg() {
-//   const x = useSpring(0, { stiffness: 200, damping: 40 });
-//   const y = useSpring(0, { stiffness: 200, damping: 40 });
-
-//   const [visible, setVisible] = useState(false);
-
-//   useEffect(() => {
-//     const move = (e) => {
-//       if (visible) {
-//         x.set(e.clientX - 25);
-//         y.set(e.clientY - 25);
-//       } else {
-//         setVisible(true);
-//       }
-//     };
-//     window.addEventListener("mousemove", move);
-//     return () => {
-//       window.removeEventListener("mousemove", move);
-//     };
-//   }, [visible]);
-
-//   return (
-//     <div className="not-md:hidden w-full h-full -z-2 overflow-hidden absolute top-0 left-0">
-//       <motion.span
-//         className="w-[50px] h-[50px] blur-3xl bg-white absolute rounded-full"
-//         style={{
-//           top: y,
-//           left: x,
-//         }}
-//         initial={{ opacity: 0 }}
-//         animate={{ opacity: visible ? 1 : 0 }}
-//         transition={{ duration: 0.5, delay: 1 }}
-//       />
-//     </div>
-//   );
-// }
-
 const defaultDialogContent = {
   message: "?",
   yesBtn: "da",