ui fixes

sreecharan-desu · Dec 9, 2024 · e1a6346 · e1a6346
1 parent ecf66d4
commit e1a6346
Show file tree

Hide file tree

Showing 26 changed files with 2,784 additions and 823 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,23 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router": "^6.25.1",
-    "react-router-dom": "^6.25.1",
+    "framer-motion": "^11.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-router": "^6.22.3",
+    "react-router-dom": "^6.22.3",
     "recoil": "^0.7.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.19",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
     "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "postcss": "^8.4.40",
-    "tailwindcss": "^3.4.7",
-    "vite": "^5.3.4"
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.6"
   }
 }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,9 +1,10 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense } from 'react';
 import './App.css'
-import {BrowserRouter, Route, Routes, useNavigate} from 'react-router-dom';
+import {BrowserRouter, Route, Routes} from 'react-router-dom';
 import AdminProfile from './pages/admin/profile/profile';
 import UserDashboard from './pages/user/Dashboard/userdashboard';
-import UserProfile from './pages/user/Profile/userprofile';
+const UserProfile = React.lazy(() => import('./pages/user/Profile/userprofile'));
+import Home from './pages/home/Home';
 
 const AdminSignup = React.lazy((()=>import('./pages/admin/signup/signup')));
 const AdminSignin = React.lazy((()=>import('./pages/admin/signin/signin')));
@@ -44,7 +45,7 @@ function App() {
       <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <BrowserRouter>
           <Routes>
-            <Route path = '/' element = {<Suspense fallback={<Loader2/>}>{<Home/>}</Suspense>}/>
+            <Route path = '/' element = {<Suspense fallback={<Loader2/>}><Home/></Suspense>}/>
             <Route path = '/user/signin' element = {<Suspense fallback={<Loader2/>}>{<UserSignin/>}</Suspense>}/>
             <Route path = '/user/signup' element = {<Suspense fallback={<Loader2/>}><UserSignup/></Suspense>}/>
             <Route path = '/admin/signin' element = {<Suspense fallback={<Loader2/>}><AdminSignin/></Suspense>}/>        
@@ -60,22 +61,6 @@ function App() {
   )
 }
 
-function Home(){
-  const navigate = useNavigate();
-  useEffect(()=>{
-    navigate('/user/signup')
-  },[])
-
-  return(<>
-
-    Hello from frontend
-
-  </>)
-}
-
-
-
-
 function TodoSkeleton(){
   return(<>
     <div class="skeleton-panel">

diff --git a/frontend/src/components/LoadingSpinner.jsx b/frontend/src/components/LoadingSpinner.jsx
@@ -0,0 +1,52 @@
+import { motion } from "framer-motion";
+
+export function LoadingSpinner() {
+    return (
+        <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50">
+            <motion.div 
+                className="flex space-x-2"
+                animate={{
+                    scale: [1, 0.9, 1],
+                }}
+                transition={{
+                    duration: 0.5,
+                    repeat: Infinity,
+                }}
+            >
+                <motion.div
+                    className="w-3 h-3 bg-indigo-600 rounded-full"
+                    animate={{
+                        y: ["0%", "-50%", "0%"],
+                    }}
+                    transition={{
+                        duration: 0.5,
+                        repeat: Infinity,
+                        delay: 0,
+                    }}
+                />
+                <motion.div
+                    className="w-3 h-3 bg-purple-600 rounded-full"
+                    animate={{
+                        y: ["0%", "-50%", "0%"],
+                    }}
+                    transition={{
+                        duration: 0.5,
+                        repeat: Infinity,
+                        delay: 0.1,
+                    }}
+                />
+                <motion.div
+                    className="w-3 h-3 bg-indigo-600 rounded-full"
+                    animate={{
+                        y: ["0%", "-50%", "0%"],
+                    }}
+                    transition={{
+                        duration: 0.5,
+                        repeat: Infinity,
+                        delay: 0.2,
+                    }}
+                />
+            </motion.div>
+        </div>
+    );
+}