(force) Update project: Added 60 new features and made various changes

{warning: this all chnaged}
2024-08-26 23:28:34 +03:30
parent 69d728485e
commit b0c9276e52
54 changed files with 1452 additions and 170 deletions
--- a/src/components/footer/components/SocialMedia.tsx
+++ b/src/components/footer/components/SocialMedia.tsx
@@ -2,7 +2,7 @@ import { FaInstagram, FaTelegram, FaTwitter } from "react-icons/fa6";

 const SocialMedia = () => {
  return (
-    <div className="w-full h-full flex pt-2 gap-5 justify-center items-center">
+    <div className="w-full h-full flex p-3 gap-5 justify-center items-center">
      <FaInstagram />
      <FaTwitter />
      <FaTelegram />
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -2,12 +2,33 @@ import CopyRight from "./components/CopyRight";
 import SocialMedia from "./components/SocialMedia";

 const Footer = () => {
+  const code = "k8K3Na16cdzB31hBnriumB3rvZOblawy";
+
  return (
-    <div className="relative w-full p-5 h-[10rem]">
-      <footer className="glass w-full flex flex-col justify-center items-center gap-2 h-full">
-        <SocialMedia />
-        <hr className="w-3/4 border-gray-700" />
-        <CopyRight />
+    <div className="relative w-full p-5 h-full">
+      <div className="w-full h-full"></div>
+      <footer className="glass w-full flex flex-row-reverse h-full">
+        <div className="w-full h-full flex flex-col py-4 justify-center items-center gap-2">
+          <SocialMedia />
+          <hr className="w-5/6 border-gray-700" />
+          <CopyRight />
+        </div>
+        <div className="w-auto h-full flex my-auto mr-4 md:mr-10 justify-center items-center">
+          <a
+            referrerPolicy="origin"
+            target="_blank"
+            href={`https://trustseal.enamad.ir/?id=515269&Code=${code}`}
+            rel="noopener noreferrer"
+          >
+            <img
+              referrerPolicy="origin"
+              src={`https://trustseal.enamad.ir/logo.aspx?id=515269&Code=${code}`}
+              alt="Enamad Trust Seal"
+              style={{ cursor: "pointer" }}
+              className="w-20"
+            />
+          </a>
+        </div>
      </footer>
    </div>
  );
--- a/src/components/header/components/navbar/Navbar.tsx
+++ b/src/components/header/components/navbar/Navbar.tsx
@@ -44,7 +44,7 @@ const Navbar = ({extra}:{extra?:string}) => {
            })}
          </div>
          {auth ? (
-            <Button onClick={() => navigate("/profile")}>پروفایل</Button>
+            <Button onClick={() => navigate("/profile")}>صفحه کاربری</Button>
          ) : (
            <Button onClick={() => navigate("/login")}>ورود یا ثبت نام</Button>
          )}
--- a/src/components/header/components/navbar/NavbarLink.tsx
+++ b/src/components/header/components/navbar/NavbarLink.tsx
@@ -1,12 +1,13 @@
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 import { NavbarLinkProps, NavData } from "../../../../types/props";

 const NavbarLink = ({ to, children, onClick }: NavbarLinkProps) => {
+  const location = useLocation();
  return (
    <NavLink
      to={to}
      className={(navData: NavData) =>
-        navData.isActive
+        navData.isActive && location.pathname === to
          ? "block px-2 mx-3 py-2 text-base font-medium text-secondTheme border-b-2 border-secondTheme"
          : "block px-2 mx-3 py-2 rounded-md text-base font-medium text-white"
      }
--- a/src/components/landing-header/components/navbar/MobileMenu.tsx
+++ b/src/components/landing-header/components/navbar/MobileMenu.tsx
@@ -0,0 +1,51 @@
+// src/components/Header/Navbar/MobileMenu.tsx
+import { MobileMenuProps } from "../../../../types/props";
+import NavbarLink from "./NavbarLink";
+const MobileMenu = ({ isOpen, toggleMenu, routes }: MobileMenuProps) => {
+  return (
+    <>
+      <div
+        className={`fixed inset-y-0 right-0 w-1/2 glass transform ${
+          isOpen ? "translate-x-0" : "translate-x-full"
+        } transition-transform duration-300 ease-in-out z-50 md:hidden`}
+      >
+        <div className="absolute top-0 left-0 p-4">
+          <button onClick={toggleMenu} className="text-white">
+            <svg
+              className="h-6 w-6"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="p-8 mt-4 ">
+          {routes?.map((i) => {
+            return (
+              <NavbarLink key={i.id} to={"#"} onClick={toggleMenu}>
+                {i.name}
+              </NavbarLink>
+            );
+          })}
+        </div>
+      </div>
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 backdrop-filter backdrop-blur-sm z-40 md:hidden"
+          onClick={toggleMenu}
+        ></div>
+      )}
+    </>
+  );
+};
+
+export default MobileMenu;
--- a/src/components/landing-header/components/navbar/MobileMenuButton.tsx
+++ b/src/components/landing-header/components/navbar/MobileMenuButton.tsx
@@ -0,0 +1,48 @@
+import { MobileMenuButtonProps } from "../../../../types/props";
+
+const MobileMenuButton = ({ isOpen, onClick }: MobileMenuButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+      className="p-2 rounded-md scale-110 text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"
+    >
+      <span className="sr-only">{"باز کردن منو"}</span>
+      {!isOpen ? (
+        <svg
+          className="block h-6 w-6"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+      ) : (
+        <svg
+          className="block h-6 w-6"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      )}
+    </button>
+  );
+};
+
+export default MobileMenuButton;
--- a/src/components/landing-header/components/navbar/Navbar.tsx
+++ b/src/components/landing-header/components/navbar/Navbar.tsx
@@ -0,0 +1,53 @@
+// src/components/Header/Navbar/Navbar.tsx
+import { useState, useEffect } from "react";
+import MobileMenuButton from "./MobileMenuButton";
+import MobileMenu from "./MobileMenu";
+import NavbarLink from "./NavbarLink";
+import router from "../../../../routes/routes";
+import Button from "../../../button";
+import { Route } from "../../../../types/props";
+
+const Navbar = ({extra}:{extra?:string}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [routes] = useState<Route[]>(router);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [isOpen]);
+
+  return (
+    <div className="relative">
+      <nav className={`glass text-white p-4 flex justify-between items-center ${extra}`}>
+        <div className="flex items-center">
+          <h1 className="text-xl font-bold">پرشین پینگ</h1>
+        </div>
+        <div className="flex gap-3 md:space-x-4">
+          <div className="hidden md:flex space-x-4">
+            {routes?.map((i) => {
+              return (
+                <NavbarLink key={i.id} to={"#"}>
+                  {i.name}
+                </NavbarLink>
+              );
+            })}
+          </div>
+          <Button>ورود یا ثبت نام</Button>
+          <div className="md:hidden">
+            <MobileMenuButton isOpen={isOpen} onClick={toggleMenu} />
+          </div>
+        </div>
+      </nav>
+      <MobileMenu isOpen={isOpen} toggleMenu={toggleMenu} routes={routes} />
+    </div>
+  );
+};
+
+export default Navbar;
--- a/src/components/landing-header/components/navbar/NavbarLink.tsx
+++ b/src/components/landing-header/components/navbar/NavbarLink.tsx
@@ -0,0 +1,21 @@
+import { NavLink, useLocation } from "react-router-dom";
+import { NavbarLinkProps, NavData } from "../../../../types/props";
+
+const NavbarLink = ({ to, children, onClick }: NavbarLinkProps) => {
+  const location = useLocation();
+  return (
+    <NavLink
+      to={to}
+      className={(navData: NavData) =>
+        navData.isActive && location.pathname === to
+          ? "block px-2 mx-3 py-2 text-base font-medium text-secondTheme border-b-2 border-secondTheme"
+          : "block px-2 mx-3 py-2 rounded-md text-base font-medium text-white"
+      }
+      onClick={onClick}
+    >
+      {children}
+    </NavLink>
+  );
+};
+
+export default NavbarLink;
--- a/src/components/landing-header/index.tsx
+++ b/src/components/landing-header/index.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import Navbar from "./components/navbar/Navbar";
+const LandingHeader = () => {
+  const [isFixed, setIsFixed] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 50) {
+        setIsFixed(true);
+      } else {
+        setIsFixed(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <div className="w-full p-5 h-[7rem]">
+      <header className={`w-full transition-all duration-300 ease-in-out ${isFixed ? "fixed max-w-[1400px] h-[6rem] mx-auto z-[1000] inset-0 p-2" : ""}`}>
+        <Navbar extra={`${isFixed && '!bg-gray-800/90'}`}/>
+      </header>
+    </div>
+  );
+};
+
+export default LandingHeader;
--- a/src/components/progressSpace/index.tsx
+++ b/src/components/progressSpace/index.tsx
@@ -4,10 +4,22 @@ import { ProgressSpaceProps } from "../../types/props";
 const ProgressSpace = ({ startSpace, endSpace }: ProgressSpaceProps) => {
  let startSpacePercentage;
  let remaining;
-  if (typeof endSpace === "number") {
-    startSpacePercentage = (startSpace / endSpace) * 100;
-    remaining = endSpace - startSpace;
+  let startSpaceToNumber = Number(startSpace);
+  let endSpaceToNumber = Number(endSpace);
+
+  const isMaxSpace = startSpaceToNumber >= endSpaceToNumber;
+
+  if (!isNaN(startSpaceToNumber) && !isNaN(endSpaceToNumber) && startSpaceToNumber <= endSpaceToNumber) {
+    startSpacePercentage = (startSpaceToNumber / endSpaceToNumber) * 100;
+    remaining = endSpaceToNumber - startSpaceToNumber;
+  } else if (isMaxSpace) {
+    remaining = 0;
+    startSpacePercentage = 100;
+  } else {
+    remaining = 0;
+    startSpacePercentage = 0;
  }
+
  return (
    <>
      <div className="relative w-full h-full p-3 bg-gray-800 rounded-md flex gap-2 justify-center items-center">
@@ -18,7 +30,7 @@ const ProgressSpace = ({ startSpace, endSpace }: ProgressSpaceProps) => {
        </div>
        <div className="w-full rounded-full h-2 md:h-2.5 bg-gray-700">
          <motion.div
-            className="bg-secondTheme h-2 md:h-2.5 rounded-full"
+            className={`${isMaxSpace ? 'bg-rose-600' : 'bg-secondTheme'} h-2 md:h-2.5 rounded-full`}
            initial={{ width: 0 }}
            animate={{
              width: `${
@@ -35,13 +47,18 @@ const ProgressSpace = ({ startSpace, endSpace }: ProgressSpaceProps) => {
        </div>
      </div>
      <div className="w-full h-full mt-1 p-2 text-center text-xs md:text-base">
-        <p>
-          {" "}
-          حجم باقیمانده کانفیگ شما از{" "}
-          {endSpace === "unlimited" ? "نامحدود" : endSpace} گیگ{" "}
-          <span className="mx-1 border-b border-secondTheme">{remaining}</span>
-          گیگ میباشد{" "}
-        </p>
+        {isMaxSpace ? (
+          <p>حجم شما به پایان رسیده است</p>
+        ) : (
+          <p>
+            حجم باقیمانده کانفیگ شما از{" "}
+            {endSpace === "unlimited" ? "نامحدود" : endSpace} گیگ{" "}
+            <span className="mx-1 border-b border-secondTheme">
+              {remaining.toFixed(2)}
+            </span>{" "}
+            گیگ می‌باشد
+          </p>
+        )}
      </div>
    </>
  );