site: fix sudden success clipboard animation

Author: wael-forsureai

apps/site/components/Common/CodeBox.tsx

@@ -24,7 +24,7 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = props => {
     copyToClipboard(text);
 
     notify({
-      duration: 300,
+      duration: 800,
       message: (
         <div className="flex items-center gap-3">
           <CodeBracketIcon className={styles.icon} />

apps/site/providers/notificationProvider.tsx

@@ -27,23 +27,39 @@ export const NotificationProvider: FC<PropsWithChildren<NotificationProps>> = ({
   children,
 }) => {
   const [notification, dispatch] = useState<NotificationContextType>(null);
+  const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
-    const timeout = setTimeout(() => dispatch(null), notification?.duration);
-
-    return () => clearTimeout(timeout);
+    if (notification) {
+      setIsOpen(true);
+      const timeout = setTimeout(() => {
+        setIsOpen(false);
+      }, notification.duration);
+      return () => clearTimeout(timeout);
+    }
   }, [notification]);
 
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+    if (!open) {
+      setTimeout(() => {
+        dispatch(null);
+      }, 200); // Match your exit animation duration
+    }
+  };
+
   return (
     <NotificationContext.Provider value={notification}>
       <NotificationDispatch.Provider value={dispatch}>
-        <Toast.Provider>
+        <Toast.Provider swipeDirection="right">
           {children}
-
           <Toast.Viewport className={viewportClassName} />
-
           {notification && (
-            <Notification duration={notification.duration}>
+            <Notification
+              open={isOpen}
+              duration={notification.duration}
+              onChange={handleOpenChange}
+            >
               {notification.message}
             </Notification>
           )}

packages/ui-components/Common/Notification/index.module.css

@@ -13,8 +13,64 @@
     dark:bg-neutral-900;
 }
 
+.root[data-state='open'] {
+  animation: slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.root[data-state='closed'] {
+  animation: slide-out 200ms ease-in forwards;
+}
+
+.root[data-swipe='move'] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
+}
+
+.root[data-swipe='cancel'] {
+  transform: translateX(0);
+  transition: transform 200ms ease-out;
+}
+
+.root[data-swipe='end'] {
+  animation: swipe-out 150ms ease-out forwards;
+}
+
 .message {
   @apply font-medium
     text-green-600
     dark:text-white;
 }
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(calc(100% + 24px));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(calc(100% + 24px));
+  }
+}
+
+@keyframes swipe-out {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(calc(100% + 24px));
+  }
+}