From dbe52f1b82870a4149582d7f796f17ad27f227ff Mon Sep 17 00:00:00 2001 From: Hamid Date: Wed, 3 Jul 2024 20:48:36 +0330 Subject: [PATCH] design tabbar and tabs --- src/App.css | 16 +++++ src/components/TabBar.tsx | 123 ++++++++++++++++++++++++++++---------- 2 files changed, 109 insertions(+), 30 deletions(-) diff --git a/src/App.css b/src/App.css index 787965d..a1fdc0b 100644 --- a/src/App.css +++ b/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; diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx index 86cbddd..50093a2 100644 --- a/src/components/TabBar.tsx +++ b/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 [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([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( -
- {/* the URL and Tabs container */} -
- {/* tabs and search-tabs section */} -
- {/* the search-tabs section */} - + let revtabs = [...tabs].reverse(); + return ( +
+
+
newTab()}>+
+ {revtabs.map((tab, i) => { + let index = revtabs.length-i-1; + return ( + handleTabClick(index)}> +
+
+ {tab.title} + +
handleTabClose(index,e)}>x
+
+
+
+ ); + })} + +
+
+
-
- {/* the tabBars container */} - - - {/* {buttons.map((button, index) => ( - */} - {/* ))} */} +
+
-
-
- ); -} + +
+
^
+
    + {tabs.map((tab) => { + return ( +
  • {tab.title}
  • ); + })} +
+
+
+
+ +
+
+ ); +}; -export default TabBar; \ No newline at end of file +export default TabBar;