feat: toast animation

fezcode · fezcode · commit 3d14902cf6d9 · 2025-10-17T04:57:03.000+03:00
diff --git a/src/components/Toast.js b/src/components/Toast.js
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { motion } from 'framer-motion';
 
 import { X } from '@phosphor-icons/react';
 
@@ -14,9 +15,13 @@ const Toast = ({ title, message, duration, onClose }) => {
   }, [duration, onClose]);
 
   return (
-    <div
-      className="fixed top-28 left-1/2 -translate-x-1/2 text-gray-300 py-4 px-10 rounded-lg shadow-lg border backdrop-blur-sm flex items-center justify-between w-96"
-      style={{ backgroundColor: 'rgba(68, 64, 59, 0.65)', borderColor: '#5a5e64' }}
+    <motion.div
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ y: -100, opacity: 0 }}
+      transition={{ type: 'spring', stiffness: 120, damping: 20 }}
+      className="fixed top-28 -translate-y-1/2 left-0 right-0 mx-auto text-gray-300 py-4 px-10 rounded-lg shadow-lg border backdrop-blur-sm flex items-center justify-between w-96"
+      style={{ backgroundColor: 'rgba(68, 64, 59, 0.8)', borderColor: '#5a5e64' }}
     >
       <div className="flex flex-col text-sm">
         <span>{title}</span>
@@ -25,7 +30,7 @@ const Toast = ({ title, message, duration, onClose }) => {
       <button onClick={onClose} className="pr-2">
         <X size={24} weight="bold" />
       </button>
-    </div>
+    </motion.div>
   );
 };
 
diff --git a/src/pages/BlogPostPage.js b/src/pages/BlogPostPage.js
@@ -6,6 +6,7 @@ import { customTheme } from '../utils/customTheme';
 import PostMetadata from '../components/PostMetadata';
 import CodeModal from '../components/CodeModal';
 import Toast from '../components/Toast';
+import { AnimatePresence } from 'framer-motion';
 import { ArrowLeftIcon, ArrowSquareOutIcon, ClipboardIcon, ArrowsOutSimpleIcon } from '@phosphor-icons/react';
 
 const LinkRenderer = ({ href, children }) => {
@@ -187,7 +188,9 @@ const BlogPostPage = () => {
       <CodeModal isOpen={isModalOpen} onClose={closeModal}>
         {modalContent}
       </CodeModal>
-      {toastMessage && <Toast title={toastMessage.title} message={toastMessage.message} duration={3000} onClose={() => setToastMessage(null)} />}
+      <AnimatePresence>
+        {toastMessage && <Toast title={toastMessage.title} message={toastMessage.message} duration={3000} onClose={() => setToastMessage(null)} />}
+      </AnimatePresence>
     </div>
   );
 };
