feat(animation)

src/components/Layout/Grid.tsx

@@ -9,7 +9,7 @@ interface IGrid {
 export default function Grid({ isGrid, setIsGrid }: IGrid) {
   return (
     <button
-      className="text-dark0 dark:text-light0 animate hover:rotate-180 animate"
+      className="text-dark0 dark:text-light0 hover:rotate-180 animate"
       onClick={() => setIsGrid(!isGrid)}
     >
       {isGrid ? (

src/components/Modal.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { useStoreApp } from "~/stores/useStoreApp";
+import { slideInupAnimate } from "~/utils/animations";
 
 type TModal = {
   id: number;
@@ -31,14 +32,15 @@ const Modal = ({ id, isModal, setIsModal }: TModal) => {
     <div className="fixed inset-0 flexCenterCenter z-50">
       {/* Modal Overlay */}
       <div
-        className={`fixed inset-0 ${isModal ? "bg-black bg-opacity-50" : "bg-transparent"
-          }`}
+        className={`fixed inset-0 ${
+          isModal ? "bg-black bg-opacity-50" : "bg-transparent"
+        }`}
         onClick={handleOutsideClick}
       ></div>
 
       {/* Modal Content */}
       {isModal && id && (
-        <div className="bg-light0 text-dark0 shadow-lg w-4/5 md:w-1/2 lg:w-1/3 rounded-lg p-3 z-50">
+        <div className="bg-light0 text-dark0 shadow-lg w-4/5 md:w-1/2 lg:w-1/3 rounded-lg p-3 z-50" style={slideInupAnimate("100ms")}>
           <p>Are you sure you want to delete this notes?</p>
 
           <div className="flexCenterCenter mt-5">

src/main.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
-import "./globals.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
+
+import "./styles/globals.css";
+import "./styles/animations.css";
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <BrowserRouter>

src/pages/Notes/NoteUpdate.tsx

@@ -7,7 +7,7 @@ import { useStoreApp } from "~/stores/useStoreApp";
 export default function EditNotes() {
   const { editNotes, notes } = useStoreApp();
   const { id } = useParams();
-  const note = notes[Number(id)];// get params and parse to number
+  const note = notes[Number(id)];
   const [notesEdit, setNotesEdit] = useState({
     title: note.title,
     body: note.body,