feat : solid box-shadows

src/components/button/index.tsx

@@ -3,9 +3,9 @@ import { ButtonProps } from "../../types/props";
 function Button({ children, extra, active,...attrs }: ButtonProps) {
   return (
     <button
-      className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white shadow-lg hover:!shadow-gray-600 ${
+      className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white !shadow-lg ${
         active
-          ? "!bg-secondTheme shadow-secondTheme shadow-lg hover:!shadow-gray-600"
+          ? "!bg-secondTheme !shadow-lg hover:!shadow-inner"
           : ""
       } ${extra}`}
       type="button"

src/components/header/components/navbar/Navbar.tsx

@@ -5,13 +5,15 @@ import MobileMenu from "./MobileMenu";
 import NavbarLink from "./NavbarLink";
 import router from "../../../../routes/routes";
 import Button from "../../../button";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Route } from "../../../../types/props";
+import { isAuthenticated } from "../../../../utils/auth";
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-
+  const auth = isAuthenticated();
   const [routes] = useState<Route[]>(router);
+  const navigate = useNavigate();
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);
@@ -41,9 +43,11 @@ const Navbar = () => {
               );
             })}
           </div>
-          <Button>
-            <Link to="/profile"> پروفایل </Link>
-          </Button>
+          {auth ? (
+            <Button onClick={() => navigate("/profile")}>پروفایل</Button>
+          ) : (
+            <Button onClick={() => navigate("/login")}>ورود</Button>
+          )}
           <div className="md:hidden">
             <MobileMenuButton isOpen={isOpen} onClick={toggleMenu} />
           </div>

src/components/input/index.tsx

@@ -24,7 +24,7 @@ const Input = ({
         type={type}
         name={name}
         id={id}
-        className="outline-none border-none sm:text-sm rounded-lg block w-full p-2.5 md:p-3 bg-gray-700 border-gray-600 placeholder-gray-400 text-white"
+        className={`outline-none border-none sm:text-sm rounded-lg block w-full p-2.5 md:p-3 bg-gray-700 border-gray-600 placeholder-gray-400 text-white ${extra}`}
         placeholder={placeholder}
         {...attrs}
       />