[feature-136] init show local models

src/renderer/components/shared/bs-content-nav-bar.component.tsx

@@ -0,0 +1,31 @@
+import { DetailedHTMLProps, Fragment } from "react";
+
+type Props<T> = {
+    className?: string;
+    tabIndex: number;
+    tabs: BsContentNavBarTab<T>[];
+    renderTab: (props: DetailedHTMLProps<React.HTMLAttributes<any>, any>, tab?: BsContentNavBarTab<T>, activeTab?: BsContentNavBarTab<T>) => JSX.Element;
+    onTabChange?: (index: number, tab?: BsContentNavBarTab<T>) => void;
+}
+
+export type BsContentNavBarTab<T = unknown> = {
+    text: string;
+    extra?: T
+}
+
+export function BsContentNavBar<T>({className, tabIndex, tabs, renderTab, onTabChange}: Props<T>) {
+
+    const handleTabClick = (index: number) => {
+        onTabChange?.(index, tabs[index]);
+    }
+
+    return (
+        <nav className={`h-full grid grid-flow-row ${className ?? ""}`}>
+            {tabs.map((tab, i) => (
+                <Fragment key={i}>
+                    { renderTab({onClick: () => handleTabClick(i)}, tab, tabs[tabIndex]) }
+                </Fragment>
+            ))}
+        </nav>
+    )
+}