dx v2.1

src/trash/trash-components.jsx

@@ -7,9 +7,11 @@ import {
   BiShow,
   BiX,
 } from "react-icons/bi";
-import { formatDate, getDateTags } from "./dengi.js";
+import { apiFormatDate, formatDate, getDateTags } from "./dengi.js";
 import { AnimatePresence, motion, LayoutGroup } from "motion/react";
 import trashcss from "./trash.module.css";
+import { useWebHaptics } from "web-haptics/react";
+
 export function Switch({
   checked,
   defaultChecked = false,
@@ -98,6 +100,7 @@ export function LoadingSpinner({ size }) {
 }
 
 function DatePickerButton({ next = false, date, setDate, pink = false }) {
+  const { trigger } = useWebHaptics();
   return (
     <span
       className={`cursor-pointer ${
@@ -109,6 +112,7 @@ function DatePickerButton({ next = false, date, setDate, pink = false }) {
         const d = new Date(date);
         d.setDate(d.getDate() + (next ? 1 : -1));
         setDate(d);
+        trigger([{ duration: 15 }], { intensity: 1 });
       }}
     >
       {!next ? <BiLeftArrowAlt size={34} /> : <BiRightArrowAlt size={34} />}
@@ -118,7 +122,7 @@ function DatePickerButton({ next = false, date, setDate, pink = false }) {
 
 export const DatePicker = (props) => {
   const dateTag = getDateTags(props.date);
-
+  const { trigger } = useWebHaptics();
   return (
     <LayoutGroup>
       <div
@@ -133,20 +137,27 @@ export const DatePicker = (props) => {
         />
         <AnimatePresence mode="popLayout">
           <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 ${
               !props.pink
                 ? "lg:hover:bg-white lg:hover:*:text-black"
                 : "lg:hover:bg-pink-500 lg:hover:*:text-white"
             } px-3 overflow-hidden `}
-            variants={{
-              a: { opacity: 0, filter: "blur(1px)" },
-              b: { opacity: 1, filter: "blur(0px)" },
-            }}
-            initial="a"
-            animate="b"
-            exit="a"
+            // variants={{
+            //   a: { opacity: 0, filter: "blur(1px)" },
+            //   b: { opacity: 1, filter: "blur(0px)" },
+            // }}
+            // initial="a"
+            // animate="b"
+            // exit="a"
+
             onClick={() => {
+              if (apiFormatDate(props.date) != apiFormatDate(new Date()))
+                trigger([
+                  { duration: 10, intensity: 1 },
+                  { delay: 40, duration: 20, intensity: 0.26 },
+                  { delay: 90, duration: 20, intensity: 0.34 },
+                ]);
               props.setDate(new Date());
             }}
           >
@@ -160,7 +171,7 @@ export const DatePicker = (props) => {
                   : " bg-transparent")
               }
               layoutId="datepicker_indicator"
-              layout="position"
+              // layout="position"
             />
             <motion.span
               layoutId="datepicker_date"
@@ -173,7 +184,7 @@ export const DatePicker = (props) => {
               <>
                 <motion.div
                   className="flex"
-                  layoutId="datepicker_date_div"
+                  // layoutId="datepicker_date_div"
                   layout="position"
                 >
                   <span
@@ -183,9 +194,9 @@ export const DatePicker = (props) => {
                   />
                 </motion.div>
                 <motion.span
-                  initial={{ x: 10, opacity: 0 }}
+                  initial={{ opacity: 0 }}
                   transition={{ delay: 0.1 }}
-                  animate={{ x: 0, opacity: 1 }}
+                  animate={{ opacity: 1 }}
                   className="text-zinc-600 italic"
                 >
                   {dateTag}
@@ -211,6 +222,8 @@ export function DengiButton({
   disabled = false,
   className = "",
 }) {
+  const { trigger } = useWebHaptics();
+
   return (
     <span
       role="button"
@@ -223,7 +236,19 @@ export function DengiButton({
         (className ? className : "")
       }
       aria-disabled={disabled}
-      onClick={disabled ? null : onClick}
+      onClick={
+        disabled
+          ? null
+          : () => {
+              onClick();
+              trigger([
+                {
+                  duration: 40,
+                  intensity: 0.8,
+                },
+              ]);
+            }
+      }
     >
       {children}
     </span>
@@ -285,6 +310,22 @@ export function DengiYesOrNoDialog({
   show,
   onAnswer,
 }) {
+  const { trigger } = useWebHaptics();
+  useEffect(() => {
+    if (show) {
+      trigger([
+        {
+          duration: 40,
+          intensity: 0.8,
+        },
+        {
+          delay: 15,
+          duration: 170,
+          intensity: 0.9,
+        },
+      ]);
+    }
+  }, [show]);
   return (
     <>
       <AnimatePresence>
@@ -296,8 +337,10 @@ export function DengiYesOrNoDialog({
             exit="off"
             className="fixed z-99 bg-black/50 backdrop-blur-xl top-0 left-0 w-full h-full overflow-hidden flex items-center justify-center"
             onClick={(e) => {
-              if (e.target === e.currentTarget && content.bgDissmis)
+              if (e.target === e.currentTarget && content.bgDissmis) {
                 onAnswer(false);
+                trigger([{ duration: 40, intensity: 1 }]);
+              }
             }}
           >
             <motion.div