navigation login and signup

taskncoffee-app/src/App.jsx

@@ -1,12 +1,25 @@
 import './App.css'
 import { LoginPage } from './pages/Login'
+import { SignUp } from './pages/SignUp'
+import { AuthLayout } from './layouts/AuthLayout'
+import { Routes, Route, Navigate } from 'react-router'
+
 
 function App() {
 
   return (
-    <>
+    <Routes>
-      <LoginPage className="flex min-h-svh flex-col items-center justify-center bg-background text-foreground" />
+      <Route path="/" element={<Navigate to="/auth/login" replace />} />
-    </>
+
+      <Route path="/auth" element={
+        <AuthLayout className="flex min-h-svh flex-col items-center justify-center bg-background text-foreground" />
+      }>
+        <Route path="login" element={<LoginPage />} />
+        <Route path="signup" element={<SignUp />} />
+      </Route>
+
+      <Route path="*" element={<Navigate to="/auth/login" replace />} />
+    </Routes>
   )
 }
 

taskncoffee-app/src/components/test.jsx

@@ -0,0 +1,46 @@
+"use client"
+
+import React, { useState } from "react"
+import { motion, AnimatePresence } from "motion/react"
+
+export default function RippleButton({ children }) {
+    const [ripples, setRipples] = useState([])
+
+    const addRipple = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+        const id = Date.now()
+
+        setRipples([...ripples, { x, y, id }])
+
+        setTimeout(() => {
+            setRipples((r) => r.filter((ripple) => ripple.id !== id))
+        }, 600) // ripple длится ~600ms
+    }
+
+    return (
+        <button
+            onClick={addRipple}
+            className="relative overflow-hidden rounded-lg bg-blue-600 px-4 py-2 text-white font-medium"
+        >
+            {children}
+            <AnimatePresence>
+                {ripples.map((ripple) => (
+                    <motion.span
+                        key={ripple.id}
+                        initial={{ scale: 0, opacity: 0.6 }}
+                        animate={{ scale: 4, opacity: 0 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.6, ease: "easeOut" }}
+                        style={{
+                            left: ripple.x,
+                            top: ripple.y,
+                        }}
+                        className="absolute h-8 w-8 rounded-full bg-white/70 pointer-events-none -translate-x-1/2 -translate-y-1/2"
+                    />
+                ))}
+            </AnimatePresence>
+        </button>
+    )
+}

taskncoffee-app/src/layouts/AuthLayout.jsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router'
+
+const AuthLayout = ({ className }) => {
+    return (
+        <div className={className}>
+            <div className="w-full max-w-sm">
+                <Outlet />
+            </div>
+        </div>
+    )
+}
+
+export { AuthLayout }

taskncoffee-app/src/main.jsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import { BrowserRouter } from 'react-router'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

taskncoffee-app/src/pages/Login.jsx

@@ -12,6 +12,7 @@ import {
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { login } from "@/apiv1/auth.service"
+import { Link } from "react-router"
 
 
 export function LoginPage({ className }) {
@@ -49,7 +50,9 @@ export function LoginPage({ className }) {
                         Enter your username below to login to your account
                     </CardDescription>
                     <CardAction>
-                        <Button variant="link">Sign Up</Button>
+                        <Button variant="link">
+                            <Link to="/auth/signup">Sign Up</Link>
+                        </Button>
                     </CardAction>
                 </CardHeader>
                 <CardContent>

taskncoffee-app/src/pages/SignUp.jsx

@@ -1,7 +1,8 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Link } from "react-router"
 
-const Signup1 = ({
+const SignUp = ({
     heading = "Signup",
     logo = {
         url: "https://www.shadcnblocks.com",
@@ -56,7 +57,7 @@ const Signup1 = ({
                             href={signupUrl}
                             className="text-primary font-medium hover:underline"
                         >
-                            Login
+                            <Link to="/auth/login">Login</Link>
                         </a>
                     </div>
                 </div>
@@ -65,4 +66,4 @@ const Signup1 = ({
     );
 };
 
-export { Signup1 };
+export { SignUp };