basic tab functionality

services/mankkoo-ui/app/streams/page.tsx

@@ -1,7 +1,33 @@
+"use client"
+
+import TabContent from "@/components/elements/TabContent";
+import TabList from "@/components/elements/TabList";
+
 export default function Home() {
   return (
-    <div>
-      Streams page
-    </div>
+    <main className="mainContainer">
+      <div className="gridItem span4Columns">
+        <h1>Streams</h1>
+        <p>A record of all bank accounts and investments, including detailed transactions for each.</p>
+      </div>
+
+      <TabList>
+        <TabContent label="Accounts">
+          <p>accounts here</p>
+        </TabContent>
+        <TabContent label="Investments">
+          <p>investments here</p>
+        </TabContent>
+        <TabContent label="Stocks">
+          <p>stocks here</p>
+        </TabContent>
+        <TabContent label="Real Estate">
+          <p>real estate here</p>
+        </TabContent>
+        <TabContent label="Inactive Streams">
+          <p>inactive streams here</p>
+        </TabContent>
+      </TabList>
+    </main>
   );
 }

services/mankkoo-ui/components/elements/TabContent.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from "react"
+
+const sanitizeForId = (label: string) => {
+    return label
+      .toLowerCase()
+      .replace(/[^\w\s]|(\s+)/g, (_match: string, group1: string) =>
+        group1 ? "-" : ""
+      );
+}
+
+export default function TabContent({children, label}: {children: ReactNode, label: string}) {
+
+    return (
+        <div
+            className="tab-panel"
+            role="tabpanel"
+            aria-labelledby={`tab-${sanitizeForId(label)}`}
+            id={`panel-${sanitizeForId(label)}`}
+        >
+            {children}
+        </div> 
+    );
+}

services/mankkoo-ui/components/elements/TabList.tsx

@@ -0,0 +1,45 @@
+
+
+import { ReactElement, useState } from "react"
+import TabContent from "./TabContent";
+
+const sanitizeForId = (label: string) => {
+    return label
+      .toLowerCase()
+      .replace(/[^\w\s]|(\s+)/g, (_match: string, group1: string) =>
+        group1 ? "-" : ""
+      );
+}
+
+export default function TabList({children, activeTabIndex = 0}: {children: ReactElement<typeof TabContent>[], activeTabIndex?: number}) {
+
+    const [activeTab, setActiveTab] = useState(activeTabIndex);
+    const handleTabClick = (index: number) => {
+        setActiveTab(index);
+    };
+
+    return (
+        <div className="tabs">
+            <nav className="tab-list-wrapper">
+                <ul className="tab-list" role="tablist" aria-orientation="horizontal">
+                {children.map((tab, index) => (
+                    <li key={`tab-${index}`}>
+                    <button
+                        key={`tab-btn-${index}`}
+                        role="tab"
+                        id={`tab-${sanitizeForId(tab.props.label)}`}
+                        aria-controls={`panel-${sanitizeForId(tab.props.label)}`}
+                        aria-selected={activeTab === index}
+                        onClick={() => handleTabClick(index)}
+                        className={`tab-btn ${
+                            activeTab === index && "tab-btn--active"
+                        }`}
+                    >{tab.props.label}</button>
+                    </li>
+                ))}
+                </ul>
+            </nav>
+            {children[activeTab]}
+        </div>
+    )
+}