design tabbar and tabs

TabBarDesign
Hamid 3 months ago
parent 98dff089ac
commit dbe52f1b82
  1. 16
      src/App.css
  2. 123
      src/components/TabBar.tsx

@ -3,6 +3,22 @@
@tailwind utilities;
.rtl{
direction: rtl !important;
}
.ltr{
direction: ltr !important;
}
:root {
--tab-bg: gray;
--tab-border-color: gray;
--color: white;
}
#root {
max-width: 1280px;
margin: 0 auto;

@ -1,41 +1,104 @@
import React, {useState} from 'react';
import Tab from './Tab';
import React, { useState } from "react";
const TabBar: React.FC = () => {
const [tabs, setTabs] = useState([
{ title: "تب 1", url: "/question", props: {}, states: {} },
{ title: "تب 2", url: "/question", props: {}, states: {} },
{ title: "تب 3", url: "/question", props: {}, states: {} },
{ title: "تب 4", url: "/question", props: {}, states: {} },
]);
const [activeTab, setActiveTab]: [number, Function] = useState(0);
const handleTabClick = (index: number) => {
setActiveTab(index);
};
const TabBar: React.FC = () => {
const newTab = () => {
let x = [...tabs];
x.push({ title: "تب "+ (+tabs.length+1), url: "/question", props: {}, states: {} });
setActiveTab(x.length-1);
setTabs(x);
const [buttons, setButtons] = useState<number[]>([1]);
const handleButtonClick = (index: number): void => {
const updatedButtons = buttons.filter((_, i) => i !== index);
setButtons(updatedButtons);
}
const handleTabClose = (index: number,e: any) => {
e.preventDefault();
let x = [...tabs];
x.splice(index, 1);
setTabs(x);
if (index === activeTab && activeTab === tabs.length) setActiveTab(x.length - 1);
else if (activeTab > index) setActiveTab(activeTab - 1)
e.stopPropagation()
};
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>
let revtabs = [...tabs].reverse();
return (
<div className="w-full fixed top-0 rtl bg-gray-800">
<div role="tablist" className="tabs ltr flex justify-end tabs-lifted pt-1 px-1">
<a role="tab"> <div className="btn my-1 btn-xs btn-ghost" onClick={()=> newTab()}>+</div></a>
{revtabs.map((tab, i) => {
let index = revtabs.length-i-1;
return (
<a
role="tab"
key={index}
className={`tab rtl w-40 min-w-12 ${
activeTab === index
? "tab-active text-primary [--tab-bg:gray] "
: ""
} [--tab-padding:1px] [--tab-border-color:gray]`}
onClick={() => handleTabClick(index)}>
<div className={`w-full px-2 py-0.5`} >
<div className={`${ activeTab === index ? "":"hover:bg-slate-700 transition-all"} flex justify-between w-full rounded-lg px-1 `}>
<span className="pr-1 text-white truncate" title={tab.title} >{tab.title}</span>
<div className="btn my-1 btn-xs btn-ghost" onClick={(e)=> handleTabClose(index,e)}>x</div>
</div>
</div>
</a>
);
})}
<div className="flex justify-end align-bottom absolute top-2 left-0">
<div className="w-8 h-8 bg-red-500 rounded-md mx-2">
<a className="w-full h-full" href="###" ></a>
</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 className="w-8 h-8 bg-red-500 rounded-md mx-2">
<a className="w-full h-full" href="###"></a>
</div>
</div>
<div className='fixed top-13 right-0 w-full min-h-10 bg-red-400'></div>
</div>
);
}
<div className="dropdown rtl " role="tab">
<div tabIndex={0} role="button" className="btn my-1 btn-xs btn-neutral mx-2 rotate-180">^</div>
<ul tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
{tabs.map((tab) => {
return (
<li><a className="text-gray-50 no-underline">{tab.title}</a></li>);
})}
</ul>
</div>
</div>
<div className="breadcrumbs w-full text-sm bg-slate-800 !text-white">
<ul className="flex justify-end">
<li className="pr-2">
<a className="text-gray-50 no-underline">
تب 1
</a>
</li>
<li>
<a className="text-gray-50">
تب 2
</a>
</li>
</ul>
</div>
</div>
);
};
export default TabBar;
export default TabBar;

Loading…
Cancel
Save