From 98dff089ac9ab1052afd1c6966734db8bfc4b268 Mon Sep 17 00:00:00 2001 From: Hamid Date: Tue, 2 Jul 2024 17:20:10 +0330 Subject: [PATCH] starting tabBar --- package-lock.json | 41 +++++++++++++++++++++++++++++++++++- package.json | 3 ++- src/App.css | 3 +-- src/App.tsx | 2 +- src/components/Tab.tsx | 27 ++++++++++++++++++++++++ src/components/TabBar.tsx | 44 +++++++++++++++++++++++++++++++-------- 6 files changed, 106 insertions(+), 14 deletions(-) create mode 100644 src/components/Tab.tsx diff --git a/package-lock.json b/package-lock.json index 817d7dc..4798baa 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 48d1486..de91cbd 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css index 7ed6657..787965d 100644 --- a/src/App.css +++ b/src/App.css @@ -47,8 +47,7 @@ } #root { - width: 100vw; /* 100% of viewport width */ - height: 100vh; /* 100% of viewport height */ + width: 100%; padding: 0; margin: 0; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index adf0a39..93a957d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ function App() { return ( <> - + ) } diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx new file mode 100644 index 0000000..777ea09 --- /dev/null +++ b/src/components/Tab.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +interface Props { + name: string; + } + + const Tab: React.FC = ({ }) => { + + + + return( +
+ {/* sample tab */} +
+

تب شماره 1

+
+ + {/*
+ +
*/} +
+ ); + }; + + export default Tab; + +// × \ No newline at end of file diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx index 2438f73..86cbddd 100644 --- a/src/components/TabBar.tsx +++ b/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 = ({ }) => { +const TabBar: React.FC = () => { + + const [buttons, setButtons] = useState([1]); + + const handleButtonClick = (index: number): void => { + const updatedButtons = buttons.filter((_, i) => i !== index); + setButtons(updatedButtons); + }; + return( +
+ {/* the URL and Tabs container */} +
+ {/* tabs and search-tabs section */} +
+ {/* the search-tabs section */} + +
+
+ {/* the tabBars container */} + + + {/* {buttons.map((button, index) => ( + */} + {/* ))} */} +
+
+
+
+ ); +} - return( -

hello

- ); -}; export default TabBar; \ No newline at end of file