feat : add types for all props components , add scroll css styles

package-lock.json

@@ -15,6 +15,7 @@
         "react-router-dom": "^6.23.1"
       },
       "devDependencies": {
+        "@types/nprogress": "^0.2.3",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
         "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -1317,6 +1318,12 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz",
+      "integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",

package.json

@@ -17,6 +17,7 @@
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
+    "@types/nprogress": "^0.2.3",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

src/components/alert/Alert.tsx

@@ -1,5 +1,16 @@
-const Alert = ({ children, type, message }) => {
-  const types = {
+import { AlertProps, MessageType } from "../../types/alertProps";
+
+const Alert = ({ children, type = "info", message }: AlertProps) => {
+  const types: Record<
+    MessageType,
+    {
+      text: string;
+      bg: string;
+      darkText: string;
+      darkBg: string;
+      iconPath: string;
+    }
+  > = {
     info: {
       text: "text-blue-800",
       bg: "bg-blue-50",
@@ -42,8 +53,7 @@ const Alert = ({ children, type, message }) => {
     },
   };
 
-  const { text, bg, darkText, darkBg, iconPath, title } =
-    types[type] || types.info;
+  const { text, bg, darkText, darkBg, iconPath } = types[type];
 
   return (
     <div
@@ -59,7 +69,7 @@ const Alert = ({ children, type, message }) => {
       >
         <path d={iconPath} />
       </svg>
-      <span className="sr-only">Info</span>
+      <span className="sr-only">{children}</span>
       <div>
         <span className="font-medium">{children}</span> {message}
       </div>

src/components/button/index.tsx

@@ -1,4 +1,6 @@
-function Button({ children, onClick, extra }) {
+import { ButtonProps } from "../../types/buttonProps";
+
+function Button({ children, onClick, extra }: 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 ${extra}`}

src/components/header/components/navbar/MobileMenu.tsx

@@ -1,6 +1,7 @@
 // src/components/Header/Navbar/MobileMenu.tsx
+import { MobileMenuProps } from "../../../../types/mobileMenu";
 import NavbarLink from "./NavbarLink";
-const MobileMenu = ({ isOpen, toggleMenu, routes }) => {
+const MobileMenu = ({ isOpen, toggleMenu, routes }: MobileMenuProps) => {
   return (
     <>
       <div

src/components/header/components/navbar/MobileMenuButton.tsx

@@ -1,4 +1,6 @@
-const MobileMenuButton = ({ isOpen, onClick }) => {
+import { MobileMenuButtonProps } from "../../../../types/mobileMenuButton";
+
+const MobileMenuButton = ({ isOpen, onClick }: MobileMenuButtonProps) => {
   return (
     <button
       onClick={onClick}

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

@@ -1,16 +1,17 @@
 // src/components/Header/Navbar/Navbar.tsx
-import React, { useState, useEffect } from "react";
+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 "../../../../assets/button";
+import Button from "../../../button";
 import { Link } from "react-router-dom";
+import { Route } from "../../../../types/routes";
 
 const Navbar = () => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const [routes, setRoutes] = useState(router);
+  const [routes] = useState<Route[]>(router);
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);

src/components/header/components/navbar/NavbarLink.tsx

@@ -1,10 +1,11 @@
 import { NavLink } from "react-router-dom";
+import { NavbarLinkProps, NavData } from "../../../../types/navbarLink";
 
-const NavbarLink = ({ to, children, onClick }) => {
+const NavbarLink = ({ to, children, onClick }: NavbarLinkProps) => {
   return (
     <NavLink
       to={to}
-      className={(navData) =>
+      className={(navData: NavData) =>
         navData.isActive
           ? "block px-2 mx-3 py-2 text-base font-medium text-yellow-600 border-b-2 border-yellow-600"
           : "block px-2 mx-3 py-2 rounded-md text-base font-medium text-white"

src/index.css

@@ -32,4 +32,41 @@
     @apply backdrop-blur-[19px] backdrop-saturate-[200%] bg-[rgba(17,25,40,0.25)] rounded-xl;
     -webkit-backdrop-filter: blur(19px) saturate(200%);
   }
+  /* برای مرورگرهای WebKit (مثل Chrome و Safari) */
+  ::-webkit-scrollbar {
+    width: 12px; /* عرض نوار اسکرول */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent; /* پس‌زمینه نوار اسکرول */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-yellow-600; /* رنگ نوار اسکرول */
+    border-radius: 20px; /* گرد کردن نوار اسکرول */
+    border: 3px solid transparent; /* ایجاد فضای خالی در اطراف نوار اسکرول */
+    background-clip: content-box; /* اطمینان از حفظ فضای خالی */
+  }
+
+  /* برای مرورگر Firefox */
+  * {
+    scrollbar-width: thin; /* عرض نوار اسکرول */
+    scrollbar-color: #ca8a04 transparent; /* رنگ نوار اسکرول و پس‌زمینه */
+  }
+
+  /* برای مرورگرهای مبتنی بر Blink (مثل Edge) */
+  ::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #ca8a04;
+    border-radius: 20px;
+    border: 3px solid transparent;
+    background-clip: content-box;
+  }
 }

src/types/alertProps.d.ts

@@ -0,0 +1,7 @@
+export type MessageType = "info" | "danger" | "success" | "warning" | "dark";
+
+export interface AlertProps {
+  children: React.ReactNode;
+  type?: "info" | "danger" | "success" | "warning" | "dark";
+  message: string;
+}

src/types/buttonProps.d.ts

@@ -0,0 +1,5 @@
+export interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  extra?: React.CSSProperties;
+}

src/types/mobileMenu.d.ts

@@ -0,0 +1,7 @@
+import { Route } from "./routes";
+
+export interface MobileMenuProps {
+  isOpen: boolean;
+  toggleMenu: () => void;
+  routes: Route[];
+}

src/types/mobileMenuButton.d.ts

@@ -0,0 +1,4 @@
+export interface MobileMenuButtonProps {
+  isOpen: boolean;
+  onClick: () => void;
+}

src/types/navbarLink.d.ts

@@ -0,0 +1,12 @@
+import { NavLinkProps } from "react-router-dom";
+
+export interface NavbarLinkProps {
+  to: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+export interface NavData {
+  isActive: boolean;
+  isPending: boolean;
+}

src/types/routes.d.ts

@@ -0,0 +1,5 @@
+export interface Route {
+  id: number;
+  path: string;
+  name: string;
+}