basic tabs component added

ui/src/components/AdminSettings/AdminSettings.tsx

@@ -0,0 +1,15 @@
+import BasicTabs from "../UI/BasicTab/BasicTabs";
+import Tab from "../UI/BasicTab/Tab";
+
+const AdminSettings: React.FC = () => {
+  return (
+      <div style={{overflowY:"auto", height:"100%", backgroundColor:"white",color:"$494677",borderRadius:"4px",padding:"10px",position:"relative",display: 'inline-block',}}>
+        <BasicTabs>
+            <Tab title="USERS">USERS</Tab>
+            <Tab title="WORKSPACE">WORKSPACE</Tab>
+        </BasicTabs>
+    </div>
+  )
+}
+
+export default AdminSettings;

ui/src/components/UI/BasicTab/BasicTabs.tsx

@@ -0,0 +1,37 @@
+import React, { ReactElement, useState } from "react";
+import TabTitle from "./TabTitle";
+import styles from '../style/BasicTabs.module.sass'
+
+
+type Props = {
+  children: ReactElement[]
+}
+
+const Tabs: React.FC<Props> = ({ children }) => {
+  const [selectedTab, setSelectedTab] = useState(0);
+
+  return (
+    <div>
+      <ul style={{"display":"flex","justifyContent":"space-between", listStyleType:"none"}}>
+        {children.map((item, index) => {
+          <TabTitle
+            key={index}
+            title={item.props.title}
+            index={index}
+            setSelectedTab={setSelectedTab}
+          />
+          {<span style={{    
+            cursor: "unset",
+            height: "20px",
+            margin: "0 20px",
+            borderRight: "1px solid #303f9f",
+            verticalAlign: "middle"
+            }}></span>}
+    })}
+      </ul>
+      {children[selectedTab]}
+    </div>
+  )
+}
+
+export default Tabs

ui/src/components/UI/BasicTab/Tab.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+type Props = {
+  title: string
+}
+
+const Tab: React.FC<Props> = ({ children }) => {
+  return <div >{children}</div>
+}
+
+export default Tab

ui/src/components/UI/BasicTab/TabTitle.tsx

@@ -0,0 +1,29 @@
+import React, { useCallback } from "react"
+
+type Props = {
+  title: string
+  index: number
+  setSelectedTab: (index: number) => void
+}
+
+const TabTitle: React.FC<Props> = ({ title, setSelectedTab, index }) => {
+
+  const onClick = useCallback(() => {
+    setSelectedTab(index)
+  }, [setSelectedTab, index])
+
+  return (
+    <li style={{color: "rgb(32,92,245" ,cursor:"pointer"}}>
+      <div onClick={onClick}>{title}</div>
+      <span style={{    
+              cursor: "unset",
+              height: "20px",
+              margin: "0 20px",
+              borderRight: "1px solid #303f9f",
+              verticalAlign: "middle"
+          }}></span>
+    </li>
+  )
+}
+
+export default TabTitle

ui/src/components/UI/style/BasicTabs.module.sass

@@ -0,0 +1,33 @@
+@import '../../../variables.module'
+    
+.root
+    height: 40%
+    paddingTop: 15px
+
+.tab
+    display: 'inline-block'
+    textTransform: 'uppercase'
+    color: $blue-color
+    cursor: 'pointer'
+
+.tabsAlignLeft
+    textAlign: 'left'
+
+.active
+    color: $font-color
+    cursor: 'unset'
+    borderBottom: "2px solid " + $font-color
+    paddingBottom: 6
+
+    &.dark
+
+.disabled
+
+.highlight
+
+.separator
+    borderRight: "1px solid " + 'black'
+    height: 20
+    verticalAlign: 'middle'
+    margin: '0 20px'
+    cursor: 'unset'