From 629d86c3938dea59ed219186014b0cac35644b7f Mon Sep 17 00:00:00 2001
From: Joesph Chrysanthopoulos <joeyc@Joesphs-Mac-mini.local>
Date: Wed, 30 Mar 2022 03:44:23 -0500
Subject: [PATCH] fix: removed commit for Tab component

---
 src/Root.tsx            |  9 -----
 src/components/Tab.tsx  |  9 -----
 src/components/Tabs.tsx | 84 -----------------------------------------
 src/components/index.ts |  2 -
 src/pages/TabsPage.tsx  | 43 ---------------------
 5 files changed, 147 deletions(-)
 delete mode 100644 src/components/Tab.tsx
 delete mode 100644 src/components/Tabs.tsx
 delete mode 100644 src/pages/TabsPage.tsx

diff --git a/src/Root.tsx b/src/Root.tsx
index 6dd153619..050c96dbd 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -16,7 +16,6 @@ import {
 import { BsCreditCard2FrontFill, BsGithub, BsImages } from 'react-icons/bs';
 import { FaSpinner } from 'react-icons/fa';
 import { FiNavigation } from 'react-icons/fi';
-import { MdTab } from 'react-icons/md';
 import { Route, Routes } from 'react-router-dom';
 
 import { DarkThemeToggle, Navbar, Sidebar, SidebarItem, Spinner } from './components';
@@ -36,7 +35,6 @@ import ListGroupPage from './pages/ListGroupPage';
 import NavbarPage from './pages/NavbarPage';
 import SpinnersPage from './pages/SpinnersPage';
 import TooltipsPage from './pages/TooltipsPage';
-import TabsPage from './pages/TabsPage';
 
 export const Root: FC = () => {
   const [collapsed, setCollapsed] = useState(false);
@@ -126,12 +124,6 @@ export const Root: FC = () => {
         title: 'Spinners',
         href: '/spinners',
       },
-      {
-        group: false,
-        icon: MdTab,
-        title: 'Tabs',
-        href: '/tabs',
-      },
       {
         group: false,
         icon: HiAnnotation,
@@ -188,7 +180,6 @@ export const Root: FC = () => {
               <Route path="list-group" element={<ListGroupPage />} />
               <Route path="navbars" element={<NavbarPage />} />
               <Route path="spinners" element={<SpinnersPage />} />
-              <Route path="tabs" element={<TabsPage />} />
               <Route path="tooltips" element={<TooltipsPage />} />
             </Routes>
           </Suspense>
diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx
deleted file mode 100644
index ce7269edc..000000000
--- a/src/components/Tab.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { FC, ReactNode } from 'react';
-
-export type TabProps = {
-  title: ReactNode;
-  active?: boolean;
-  disabled?: boolean;
-};
-
-export const Tab: FC<TabProps> = ({ children }) => <>{children}</>;
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
deleted file mode 100644
index cc2068540..000000000
--- a/src/components/Tabs.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Children, FC, PropsWithChildren, ReactElement, useMemo } from 'react';
-import { TabProps } from './Tab';
-import classNames from 'classnames';
-
-export type TabTypes = 'default' | 'underline' | 'pills' | 'fullWidth';
-export type ItemStyleTypes = 'active' | 'notActive';
-export const styleClasses: Record<TabTypes, string> = {
-  default: '',
-  underline: 'border-b border-gray-200 dark:border-gray-700',
-  pills: '',
-  fullWidth: '',
-};
-
-export const listStyleClasses: Record<TabTypes, string> = {
-  default: 'flex-wrap border-b border-gray-200 dark:border-gray-700',
-  underline: 'flex-wrap -mb-px',
-  pills: 'flex-wrap',
-  fullWidth: 'hidden rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700',
-};
-export const itemStyleClasses: Record<TabTypes, Record<ItemStyleTypes, string>> = {
-  default: {
-    active: 'bg-gray-100 text-blue-600 dark:bg-gray-800 dark:text-blue-500',
-    notActive:
-      'text-gray-500 hover:bg-gray-50 hover:text-gray-600 dark:text-gray-400 dark:hover:bg-gray-800  dark:hover:text-gray-300',
-  },
-  underline: {
-    active: 'text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500',
-    notActive:
-      'border-b-2 border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300',
-  },
-  pills: {
-    active: 'flex-wrap',
-    notActive: '',
-  },
-  fullWidth: {
-    active: 'flex-wrap',
-    notActive: '',
-  },
-};
-
-export type TabsProps = {
-  style?: TabTypes;
-};
-
-export const Tabs: FC<TabsProps> = ({ children, style = 'default' }) => {
-  const tabs = useMemo(
-    () =>
-      Children.map(children as ReactElement<PropsWithChildren<TabProps>>[], (child) => ({
-        title: child.props.title,
-        content: child.props.children,
-        active: child.props.active,
-        disabled: child.props.disabled,
-      })),
-    [children],
-  );
-
-  return (
-    <div className={classNames({ [styleClasses[style]]: style === 'underline' })}>
-      <ul className={classNames('flex', listStyleClasses[style])}>
-        {tabs.map((tab, index) => (
-          <li
-            className={classNames({
-              'mr-2': style !== 'fullWidth',
-              'w-full': style === 'fullWidth',
-            })}
-            key={index}
-          >
-            <a
-              href="#/tabs"
-              aria-current="page"
-              className={classNames('inline-block rounded-t-lg py-4 px-4 text-center text-sm font-medium', {
-                [itemStyleClasses[style].active]: tab.active,
-                [itemStyleClasses[style].notActive]: !tab.active,
-                'cursor-not-allowed text-gray-400 dark:text-gray-500': tab.disabled,
-              })}
-            >
-              {tab.title}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
diff --git a/src/components/index.ts b/src/components/index.ts
index 84aa549b5..9e9ce2d5e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,5 +14,3 @@ export * from './navbar/Navbar';
 export * from './Sidebar';
 export * from './Spinner';
 export * from './Tooltip';
-export * from './Tab';
-export * from './Tabs';
diff --git a/src/pages/TabsPage.tsx b/src/pages/TabsPage.tsx
deleted file mode 100644
index 17100a793..000000000
--- a/src/pages/TabsPage.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { FC } from 'react';
-import { CodeExample, DemoPage } from './DemoPage';
-import { Tab } from '../components';
-import { Tabs } from '../components';
-
-const TabsPage: FC = () => {
-  const examples: CodeExample[] = [
-    {
-      title: 'Default tabs',
-      code: (
-        <Tabs style="default">
-          <Tab active title="Profile">
-            Profile
-          </Tab>
-          <Tab title="Dashboard">Dashboard</Tab>
-          <Tab title="Settings">Settings</Tab>
-          <Tab title="Contacts">Contacts</Tab>
-          <Tab disabled title="Disabled">
-            Disabled
-          </Tab>
-        </Tabs>
-      ),
-    },
-    {
-      title: 'Tabs with underline',
-      code: (
-        <Tabs style="underline">
-          <Tab title="Profile">Profile</Tab>
-          <Tab active title="Dashboard">
-            Dashboard
-          </Tab>
-          <Tab title="Settings">Settings</Tab>
-          <Tab title="Contacts">Contacts</Tab>
-          <Tab disabled title="Disabled">
-            Disabled
-          </Tab>
-        </Tabs>
-      ),
-    },
-  ];
-  return <DemoPage examples={examples} />;
-};
-export default TabsPage;