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

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

@@ -0,0 +1,14 @@
+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}`}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default Button;

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"