design tabbar and tabs

src/App.css

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

src/components/TabBar.tsx

@@ -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 TabBar: React.FC = () => {
+  ]);
+  const [activeTab, setActiveTab]: [number, Function] = useState(0);
+
+  const handleTabClick = (index: number) => {
+      setActiveTab(index);
+  };
+
+  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>
-            </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>
+ 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-8 h-8 bg-red-500 rounded-md mx-2">
+                <a className="w-full h-full" href="###"></a>
+            </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;