account and protected router

src/components/button/ReverseButton.tsx

@@ -7,14 +7,32 @@ interface ButtonProps {
     className?: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     children?: React.ReactNode;
+    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'success';
 }
 
+const ColorBgVariants = {
+    primary: 'group-hover:bg-liquid-brightmain ring-liquid-brightmain',
+    secondary: 'group-hover:bg-liquid-darkmain ring-liquid-darkmain',
+    error: 'group-hover:bg-liquid-red ring-liquid-red',
+    warning: 'group-hover:bg-liquid-orange ring-liquid-orange',
+    success: 'group-hover:bg-liquid-green ring-liquid-green',
+};
+
+const ColorTextVariants = {
+    primary: 'text-liquid-brightmain ',
+    secondary: 'text-liquid-brightmain ',
+    error: 'text-liquid-red ',
+    warning: 'text-liquid-orange ',
+    success: 'text-liquid-green ',
+};
+
 export const ReverseButton: React.FC<ButtonProps> = ({
     disabled = false,
     text = '',
     className,
     onClick,
     children,
+    color = 'secondary',
 }) => {
     return (
         <label
@@ -32,6 +50,7 @@ export const ReverseButton: React.FC<ButtonProps> = ({
                     'group-hover:bg-liquid-darkmain ',
                     'px-[16px] py-[8px]',
                     'bg-liquid-lighter ring-[1px] ring-liquid-darkmain ring-inset',
+                    ColorBgVariants[color],
                     disabled && 'bg-liquid-lighter',
                 )}
             >
@@ -61,8 +80,9 @@ export const ReverseButton: React.FC<ButtonProps> = ({
                 </div>
                 <div
                     className={cn(
-                        'transition-all duration-300 text-liquid-brightmain text-[18px] font-bold p-0 m-0 leading-[23px]',
+                        'transition-all duration-300  text-[18px] font-bold p-0 m-0 leading-[23px]',
                         'group-hover:text-liquid-white ',
+                        ColorTextVariants[color],
                         disabled && 'text-liquid-light',
                     )}
                 >

src/components/router/ProtectedRoute.tsx

@@ -0,0 +1,12 @@
+// src/routes/ProtectedRoute.tsx
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAppSelector } from '../../redux/hooks';
+
+export default function ProtectedRoute() {
+    const isAuthenticated = useAppSelector((state) => !!state.auth.jwt);
+    if (!isAuthenticated) {
+        return <Navigate to="/home/login" replace />;
+    }
+
+    return <Outlet />;
+}