initial commit

2025-01-24 20:05:48 +01:00
commit db55c10f43
484 changed files with 118165 additions and 0 deletions
@@ -0,0 +1,79 @@
+import { AuthContext } from "@/authContext";
+import { isNotInViewport } from "@/utils/utils";
+import React, { useEffect, useState } from "react";
+import { useContext } from "react";
+import { useLocation, useNavigate } from "react-router";
+import { NavLink } from "react-router-dom";
+import Icon from "../Icons";
+import HeartIcon from "./icons/HeartIcon";
+import LogoutIcon from "./icons/LogoutIcon";
+import SearchIcon from "./icons/SearchIcon";
+
+export default function BottomNav({ scrollDir, showAccount }) {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { dispatch } = useContext(AuthContext);
+
+  const [showStaticBar, setShowStaticBar] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setShowStaticBar(isNotInViewport("search-bar"));
+    };
+    window.addEventListener("scroll", onScroll);
+    setShowStaticBar(isNotInViewport("search-bar"));
+
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [pathname]);
+
+  function logout() {
+    dispatch({ type: "LOGOUT" });
+    navigate("/");
+  }
+
+  const whiteList = ["/search", "/"];
+
+  if (!whiteList.some((path) => pathname == path)) return null;
+
+  return (
+    <div className={`${scrollDir == "UP" && showStaticBar ? "block" : "hidden"} md:hidden bg-white py-1 fixed bottom-0 left-0 right-0 z-[200] bottom-nav border-t border-b slideUp`}>
+      <div className="flex justify-center text-sm">
+        <NavLink
+          to="/explore"
+          className="px-4 py-2 flex flex-col items-center justify-between"
+        >
+          <SearchIcon stroke={"black"} />
+          Explore
+        </NavLink>
+        <NavLink
+          to="/favorites"
+          className="px-4 py-2 flex flex-col items-center justify-between"
+        >
+          <HeartIcon stroke={"black"} />
+          Favorites
+        </NavLink>
+        <NavLink
+          to={showAccount ? "/account/profile" : "/login"}
+          className="px-4 py-2 flex flex-col items-center justify-between"
+        >
+          <Icon
+            type="user"
+            fill=""
+            variant="circle"
+            className={"my-stroke-" + "white"}
+          />
+          {showAccount ? "Account" : "Login"}
+        </NavLink>
+        <button
+          className={`${showAccount ? "flex" : "hidden"} px-4 py-2 flex-col items-center justify-between`}
+          onClick={logout}
+        >
+          <LogoutIcon />
+          Logout
+        </button>
+      </div>
+    </div>
+  );
+}