tabs

wavetermdev · Dec 18, 2024 · e5e6e7f · e5e6e7f
1 parent ebcb357
commit e5e6e7f
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 32 deletions.
diff --git a/frontend/app/element/tabs.scss b/frontend/app/element/tabs.scss
@@ -2,39 +2,38 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tabs-container {
-	display: flex;
-	flex-direction: column;
-	font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, sans-serif;
+    font-size: 12px;
 
-	.tabs-list {
-		display: flex;
-		gap: 12px;
-		border: 1px solid #444;
-		border-radius: 6px;
-		padding: 4px;
-		background-color: #111;
+    .tabs-list {
+        display: flex;
+        gap: 16px;
+        border: 1px solid rgb(from var(--main-text-color) r g b / 15%);
+        border-radius: 7px;
+        padding: 4px;
+        background: rgb(from var(--block-bg-color) r g b / 70%);
 
-		.tab-item {
-			padding: 6px 12px;
-			cursor: pointer;
-			border-radius: 4px;
-			color: #aaa;
-			transition: all 0.2s ease-in-out;
+        .tab-item {
+            display: flex;
+            height: 24px;
+            padding: 0px 8px;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border-radius: 4px;
+            color: var(--main-text-color);
+            border: 1px solid transparent;
 
-			&:hover {
-				background-color: #222;
-			}
+            &:hover {
+                background-color: rgb(from var(--main-bg-color) r g b / 60%);
+            }
 
-			&.active {
-				border: 1px solid #28a745;
-				background-color: #0a0a0a;
-				color: #fff;
-				font-weight: bold;
-			}
-
-			&:focus {
-				outline: 2px solid #28a745;
-			}
-		}
-	}
-}
+            &.active {
+                border: 1px solid var(--success-color);
+                background: rgb(from var(--success-color) r g b / 15%);
+            }
+        }
+    }
+}
diff --git a/frontend/app/element/tabs.stories.tsx b/frontend/app/element/tabs.stories.tsx
@@ -0,0 +1,47 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tabs } from "./tabs";
+
+const meta: Meta<typeof Tabs> = {
+    title: "Elements/Tabs",
+    component: Tabs,
+    argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const DefaultTabs: Story = {
+    render: () => {
+        const tabs = [
+            { label: "Node 1", onClick: () => console.log("Node 1 Clicked") },
+            { label: "Node 2", onClick: () => console.log("Node 2 Clicked") },
+            { label: "Node 3", onClick: () => console.log("Node 3 Clicked") },
+        ];
+
+        return (
+            <div style={{ padding: "20px", backgroundColor: "#000", color: "#fff" }}>
+                <Tabs tabs={tabs} />
+            </div>
+        );
+    },
+};
+
+export const TabsWithAlerts: Story = {
+    render: () => {
+        const tabs = [
+            { label: "Node 1", onClick: () => alert("Node 1 Clicked") },
+            { label: "Node 2", onClick: () => alert("Node 2 Clicked") },
+            { label: "Node 3", onClick: () => alert("Node 3 Clicked") },
+        ];
+
+        return (
+            <div style={{ padding: "20px", backgroundColor: "#000", color: "#fff" }}>
+                <Tabs tabs={tabs} />
+            </div>
+        );
+    },
+};