From ebcb357ba82da436f840b9ba92e717731250af45 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Wed, 18 Dec 2024 23:31:29 +0800
Subject: [PATCH 1/2] init

---
 frontend/app/element/tabs.scss        | 40 +++++++++++++++++++
 frontend/app/element/tabs.stories.tsx |  0
 frontend/app/element/tabs.tsx         | 55 +++++++++++++++++++++++++++
 3 files changed, 95 insertions(+)
 create mode 100644 frontend/app/element/tabs.scss
 create mode 100644 frontend/app/element/tabs.stories.tsx
 create mode 100644 frontend/app/element/tabs.tsx

diff --git a/frontend/app/element/tabs.scss b/frontend/app/element/tabs.scss
new file mode 100644
index 000000000..511ef6803
--- /dev/null
+++ b/frontend/app/element/tabs.scss
@@ -0,0 +1,40 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.tabs-container {
+	display: flex;
+	flex-direction: column;
+	font-family: Arial, sans-serif;
+
+	.tabs-list {
+		display: flex;
+		gap: 12px;
+		border: 1px solid #444;
+		border-radius: 6px;
+		padding: 4px;
+		background-color: #111;
+
+		.tab-item {
+			padding: 6px 12px;
+			cursor: pointer;
+			border-radius: 4px;
+			color: #aaa;
+			transition: all 0.2s ease-in-out;
+
+			&:hover {
+				background-color: #222;
+			}
+
+			&.active {
+				border: 1px solid #28a745;
+				background-color: #0a0a0a;
+				color: #fff;
+				font-weight: bold;
+			}
+
+			&:focus {
+				outline: 2px solid #28a745;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/frontend/app/element/tabs.stories.tsx b/frontend/app/element/tabs.stories.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/element/tabs.tsx b/frontend/app/element/tabs.tsx
new file mode 100644
index 000000000..607b88a3d
--- /dev/null
+++ b/frontend/app/element/tabs.tsx
@@ -0,0 +1,55 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from "react";
+import "./tabs.scss";
+
+type Tab = {
+    label: string;
+    onClick: () => void;
+};
+
+type TabsProps = {
+    tabs: Tab[];
+};
+
+const Tabs: React.FC<TabsProps> = ({ tabs }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, index: number) => {
+        if (event.key === "ArrowRight") {
+            setActiveIndex((prevIndex) => (prevIndex + 1) % tabs.length);
+        } else if (event.key === "ArrowLeft") {
+            setActiveIndex((prevIndex) => (prevIndex - 1 + tabs.length) % tabs.length);
+        } else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            tabs[index].onClick();
+            setActiveIndex(index);
+        }
+    };
+
+    return (
+        <div className="tabs-container">
+            <div className="tabs-list" role="tablist">
+                {tabs.map((tab, index) => (
+                    <div
+                        key={index}
+                        role="tab"
+                        tabIndex={activeIndex === index ? 0 : -1}
+                        aria-selected={activeIndex === index}
+                        className={`tab-item ${activeIndex === index ? "active" : ""}`}
+                        onClick={() => {
+                            tab.onClick();
+                            setActiveIndex(index);
+                        }}
+                        onKeyDown={(e) => handleKeyDown(e, index)}
+                    >
+                        {tab.label}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export { Tabs };

From e5e6e7f16312e5a5ad8542c94ccd50a3c673610b Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Wed, 18 Dec 2024 23:41:34 +0800
Subject: [PATCH 2/2] tabs

---
 frontend/app/element/tabs.scss        | 63 +++++++++++++--------------
 frontend/app/element/tabs.stories.tsx | 47 ++++++++++++++++++++
 2 files changed, 78 insertions(+), 32 deletions(-)

diff --git a/frontend/app/element/tabs.scss b/frontend/app/element/tabs.scss
index 511ef6803..342e2fe1c 100644
--- 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;
-			}
-		}
-	}
-}
\ No newline at end of file
+            &.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
index e69de29bb..c8a299525 100644
--- 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>
+        );
+    },
+};