feat(app): tabbed sticky details panel

src/components/Tabs/Tabs.css

@@ -0,0 +1,32 @@
+.tabs {
+  display: flex;
+  flex-direction: column;
+  border-left: 2px solid rgba(163, 159, 171, 0.1);
+  border-right: 2px solid rgba(163, 159, 171, 0.1);
+}
+
+.tabs-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 2px solid rgba(163, 159, 171, 0.1);
+}
+
+button.tab {
+  all: unset;
+  padding: 4px;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+  flex: 1;
+}
+
+.tab.active {
+  background-color: rgba(194, 186, 196, 0.25);
+}
+
+.tab-content {
+  flex: 1;
+  display: grid;
+  place-items: center;
+}

src/components/Tabs/Tabs.tsx

@@ -0,0 +1,34 @@
+import { ReactNode, useState } from "react";
+
+import "./Tabs.css";
+
+export type Tab = {
+  header: ReactNode;
+  content: ReactNode;
+};
+
+type TabsProps = {
+  tabs: Tab[];
+};
+
+const Tabs = ({ tabs }: TabsProps) => {
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+
+  return (
+    <div className="tabs">
+      <div className="tabs-header">
+        {tabs.map((tab, i) => (
+          <button
+            className={`tab ${activeIndex === i ? "active" : ""}`}
+            onClick={() => setActiveIndex(i)}
+          >
+            {tab.header}
+          </button>
+        ))}
+      </div>
+      <div className="tab-content">{tabs[activeIndex]?.content}</div>
+    </div>
+  );
+};
+
+export default Tabs;

src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Tabs";
+export type { Tab } from "./Tabs";