fix: code cleanup

SSameer20 · Dec 16, 2024 · 4413df6 · 4413df6
1 parent 74fdcca
commit 4413df6
Show file tree

Hide file tree

Showing 35 changed files with 133 additions and 1,323 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/LOGO.png" />
+    <link rel="icon" type="image/png" href="./public/icon.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SkinAI | AI Assistant for SKIN</title>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -23,6 +23,7 @@
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.5",
     "react-hook-form": "^7.53.0",
+    "react-icons": "^5.4.0",
     "react-router-dom": "^6.26.2",
     "sweetalert": "^2.1.2",
     "tailwind-merge": "^2.5.3",

diff --git a/client/public/icon.png b/client/public/icon.png
diff --git a/client/src/App.tsx b/client/src/App.tsx
diff --git a/client/src/assets/arrow-left.svg b/client/src/assets/arrow-left.svg
diff --git a/client/src/assets/arrow-right.svg b/client/src/assets/arrow-right.svg
diff --git a/client/src/components/Navigation.tsx b/client/src/components/Navigation.tsx
@@ -0,0 +1,92 @@
+import { Screen, userLoginStatus } from "@/utils/helper";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+export default function Navigation({
+  className,
+  logo = "SKIN.AI",
+}: {
+  className?: string;
+  logo?: string;
+}) {
+  const [size, setSize] = useState<{ height: number; width: number }>({
+    height: window.innerHeight,
+    width: window.innerWidth,
+  });
+  const [logged, setLogged] = useState<boolean>(false);
+  useEffect(() => {
+    const status = userLoginStatus();
+    if (status) {
+      setLogged(true);
+    } else setLogged(false);
+    return () => setLogged(false);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("resize", () => {
+      setSize({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      });
+    });
+
+    return () =>
+      window.removeEventListener("resize", () => {
+        setSize({
+          height: window.innerHeight,
+          width: window.innerWidth,
+        });
+      });
+  }, [size]);
+
+  return (
+    <div
+      className={className + "w-[100%] h-[10%] flex flex-row justify-between"}
+      style={
+        size.width <= Screen.SMALL
+          ? { padding: " 6px 16px " }
+          : size.width <= Screen.MEDIUM
+          ? { padding: " 10px 20px" }
+          : { padding: " 15px 100px" }
+      }
+    >
+      <p
+        className="font-bold"
+        style={
+          size.width <= Screen.SMALL
+            ? { fontSize: "20px" }
+            : size.width <= Screen.MEDIUM
+            ? { fontSize: "24px" }
+            : { fontSize: "28px" }
+        }
+      >
+        {logo}
+      </p>
+
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/app">Test</Link>
+        </li>
+        <li>
+          <Link to="/about">About</Link>
+        </li>
+        <li>
+          <Link to="/contact">Contact</Link>
+        </li>
+        {!logged && (
+          <div>
+            <li>
+              <Link to="/auth/login">Login</Link>
+            </li>
+            <li>
+              <Link to="/auth/register">Register</Link>
+            </li>
+          </div>
+        )}
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/components/pages/Auth.tsx b/client/src/components/pages/Auth.tsx
diff --git a/client/src/components/pages/Dashboard.tsx b/client/src/components/pages/Dashboard.tsx