starting tabBar

TabBarDesign
Hamid 3 months ago
parent 6091957a2f
commit 98dff089ac
  1. 41
      package-lock.json
  2. 3
      package.json
  3. 3
      src/App.css
  4. 2
      src/App.tsx
  5. 27
      src/components/Tab.tsx
  6. 44
      src/components/TabBar.tsx

41
package-lock.json generated

@ -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",

@ -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",

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

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

@ -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;
// ×

@ -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;
Loading…
Cancel
Save