starting tabBar

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.24.0"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
@@ -1058,6 +1059,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.0.tgz",
+      "integrity": "sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -3483,6 +3492,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.24.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.0.tgz",
+      "integrity": "sha512-sQrgJ5bXk7vbcC4BxQxeNa5UmboFm35we1AFK0VvQaz9g0LzxEIuLOhHIoZ8rnu9BO21ishGeL9no1WB76W/eg==",
+      "dependencies": {
+        "@remix-run/router": "1.17.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.24.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.0.tgz",
+      "integrity": "sha512-960sKuau6/yEwS8e+NVEidYQb1hNjAYM327gjEyXlc6r3Skf2vtwuJ2l7lssdegD2YjoKG5l8MsVyeTDlVeY8g==",
+      "dependencies": {
+        "@remix-run/router": "1.17.0",
+        "react-router": "6.24.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

src/App.css

@@ -47,8 +47,7 @@
 }
 
 #root {
-  width: 100vw; /* 100% of viewport width */
+  width: 100%;
-  height: 100vh; /* 100% of viewport height */
   padding: 0;
   margin: 0;
 }

src/App.tsx

@@ -5,7 +5,7 @@ function App() {
 
   return (
     <>
-      <TabBar name='me' />
+      <TabBar />
     </>
   )
 }

src/components/Tab.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface Props {
+    name: string;
+  }
+  
+  const Tab: React.FC<Props> = ({ }) => {
+
+  
+  
+    return(
+        <div className="w-2/12 min-h-10 bg-yellow-300 flex flex-row-reverse rounded-md">
+        {/* sample tab */}
+            <div className='w-11/12 p-auto py-1/2'>
+                <p className="h-full text-right pr-4 pt-2">تب شماره 1</p>
+            </div>
+            <button key={1} className="relative top-0 left-2 rounded-full my-3"></button>
+            {/* <div className='w-2/12 h-full p-0 pl-1'>
+                <button className=""></button>
+            </div> */}
+        </div>
+    );
+  };
+  
+  export default Tab;
+
+//   ×

src/components/TabBar.tsx

@@ -1,15 +1,41 @@
-import React from 'react';
+import React, {useState} from 'react';
+import Tab from './Tab';
+
 
-interface Props {
-  name: string;
-}
 
-const TabBar: React.FC<Props> = ({ }) => {
+const TabBar: React.FC = () => {
+
+  const [buttons, setButtons] = useState<number[]>([1]);
+    
+  const handleButtonClick = (index: number): void => {
+    const updatedButtons = buttons.filter((_, i) => i !== index);
+    setButtons(updatedButtons);
+  };
+    return(
+      <div className='fixed top-0 right-0 w-full min-h-20 bg-gray-500'>
+        {/* the URL and Tabs container */}
+        <div className="w-full min-h-10 flex flex-row-reverse">
+          {/* tabs and search-tabs section */}
+            <div className="w-11 min-h-10 flex flex-row m-1">
+              {/* the search-tabs section */}
+                <button className='h-full w-full mb-0 rounded-md'></button>
+            </div>
+            <div className="w-full min-h-10 bg-gray-500 flex flex-row-reverse border-box rounded-md mr-1">
+              {/* the tabBars container */}
+              <Tab name='hello'/>
+                <button key={1} id='addTabBtn' className="block w-1 h-2/3 bg-black relative top-2 right-1 rounded-full z-2" onClick={ () => handleButtonClick(1)}></button>
+                {/* {buttons.map((button, index) => (
+                  <button key={index} onClick={() => handleButtonClick(index)}>
+                {button}
+                </button> */}
+      {/* ))} */}
+            </div>
+        </div>
+        <div className='fixed top-13 right-0 w-full min-h-10 bg-red-400'></div>
+      </div>
+    );
+}
 
 
-  return(
-    <h1>hello</h1>
-  );
-};
 
 export default TabBar;