From 327c3b60a45c03e26f58021f6f3a9b0ce096e04f Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 1 Oct 2025 16:20:07 +0800
Subject: [PATCH] Updated table

---
 src/components/Table/Table.tsx |  7 -------
 src/components/Tabs/Tabs.tsx   | 37 ++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Tabs/Tabs.tsx

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index e1c97ef..3d208d0 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,5 +1,4 @@
 import './Table.sass'
-import { Modal } from '../../components'
 import { createSignal } from 'solid-js'
 import { ofetch } from 'ofetch'
 // import { Button } from '../../components'
@@ -78,12 +77,6 @@ export default () => {
           </tr> */}
         </tbody>
       </table>
-
-      <div id="modal" style="display: none">
-        <Modal background="rgba(0,0,0,0.5)">
-          <h1>SAMPLE</h1>
-        </Modal>
-      </div>
     </>
   )
 }
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
new file mode 100644
index 0000000..88d4b28
--- /dev/null
+++ b/src/components/Tabs/Tabs.tsx
@@ -0,0 +1,37 @@
+import { Tabs } from '@kobalte/core/tabs'
+
+export default () => {
+  return (
+    <>
+      <Tabs aria-label="Main navigation" class="tabs">
+        <Tabs.List class="tabs__list">
+          <Tabs.Trigger class="tabs__trigger" value="profile">
+            Profile
+          </Tabs.Trigger>
+          <Tabs.Trigger class="tabs__trigger" value="dashboard">
+            Dashboard
+          </Tabs.Trigger>
+          <Tabs.Trigger class="tabs__trigger" value="settings">
+            Settings
+          </Tabs.Trigger>
+          <Tabs.Trigger class="tabs__trigger" value="contact">
+            Contact
+          </Tabs.Trigger>
+          <Tabs.Indicator class="tabs__indicator" />
+        </Tabs.List>
+        <Tabs.Content class="tabs__content" value="profile">
+          Profile details
+        </Tabs.Content>
+        <Tabs.Content class="tabs__content" value="dashboard">
+          Dashboard details
+        </Tabs.Content>
+        <Tabs.Content class="tabs__content" value="settings">
+          Settings details
+        </Tabs.Content>
+        <Tabs.Content class="tabs__content" value="contact">
+          Contact details
+        </Tabs.Content>
+      </Tabs>
+    </>
+  )
+}