From 526d740987ca1b2f30cec18772485453b1841504 Mon Sep 17 00:00:00 2001
From: Adam Zerner <adamzerner@protonmail.com>
Date: Mon, 16 Dec 2024 20:25:17 -0800
Subject: [PATCH] Add `initialActiveTab` to `Tabs`

---
 islands/molecules/tabs.tsx          |  8 +++++--
 routes/(footer)/getting-started.tsx |  2 +-
 routes/molecules/tabs.tsx           | 34 +++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/islands/molecules/tabs.tsx b/islands/molecules/tabs.tsx
index e1157a3..75e2e3d 100644
--- a/islands/molecules/tabs.tsx
+++ b/islands/molecules/tabs.tsx
@@ -6,6 +6,7 @@ import { getChildren } from "../../utilities/get-children.ts";
 
 export type TabsType = {
   fullWidth?: boolean;
+  initialActiveTab?: string;
   children: ComponentChild;
 } & ComponentProps<"div">;
 
@@ -22,10 +23,12 @@ export type TabsType = {
  * </Tabs>
  */
 export const Tabs = (
-  { fullWidth = false, children, ...rest }: TabsType,
+  { fullWidth = false, initialActiveTab, children, ...rest }: TabsType,
 ) => {
   const tabNames = getTabNames(children);
-  const [activeTab, setActiveTab] = useState<string>(tabNames[0]);
+  const [activeTab, setActiveTab] = useState<string>(
+    initialActiveTab ?? tabNames[0],
+  );
   const activeTabSection = getActiveTabSection(children, activeTab);
 
   return (
@@ -92,6 +95,7 @@ const Tab = (
 };
 
 export const TabSection = (
+  // deno-lint-ignore no-unused-vars
   { tabName, children }: { tabName: string; children: ComponentChild },
 ) => {
   return <>{children}</>;
diff --git a/routes/(footer)/getting-started.tsx b/routes/(footer)/getting-started.tsx
index b5d83a2..f8326bf 100644
--- a/routes/(footer)/getting-started.tsx
+++ b/routes/(footer)/getting-started.tsx
@@ -46,7 +46,7 @@ export default () => {
         </p>
         <CodeBlock
           language="ts"
-          code={`"rfui": "https://deno.land/x/rfui@v0.1.24/mod.ts"`}
+          code={`"rfui": "https://deno.land/x/rfui@v0.1.25/mod.ts"`}
         />
       </Text>
 
diff --git a/routes/molecules/tabs.tsx b/routes/molecules/tabs.tsx
index 0b5c7a1..e39db65 100644
--- a/routes/molecules/tabs.tsx
+++ b/routes/molecules/tabs.tsx
@@ -67,6 +67,34 @@ export default () => {
   <TabSection tabName="First">One</TabSection>
   <TabSection tabName="Second">Two</TabSection>
   <TabSection tabName="Third">Three</TabSection>
+</Tabs>`}
+      />
+    ),
+  }, {
+    title: "Initial active tab",
+    description: (
+      <div>
+        Set <InlineCode>initialActiveTab</InlineCode> to the{" "}
+        <InlineCode>tabName</InlineCode> of the{" "}
+        <InlineCode>TabSection</InlineCode>{" "}
+        that you want to display when the component loads.
+      </div>
+    ),
+    example: (
+      <Tabs initialActiveTab="Second">
+        <TabSection tabName="First">One</TabSection>
+        <TabSection tabName="Second">Two</TabSection>
+        <TabSection tabName="Third">Three</TabSection>
+      </Tabs>
+    ),
+    exampleCode: (
+      <CodeBlock
+        class="mt-4"
+        language="tsx"
+        code={`<Tabs initialActiveTab="Second">
+  <TabSection tabName="First">One</TabSection>
+  <TabSection tabName="Second">Two</TabSection>
+  <TabSection tabName="Third">Three</TabSection>
 </Tabs>`}
       />
     ),
@@ -77,6 +105,12 @@ export default () => {
     type: "boolean",
     default: "false",
     notes: null,
+  }, {
+    name: "initialActiveTab",
+    required: false,
+    type: "string",
+    default: null,
+    notes: null,
   }, {
     name: "children",
     required: true,