Add initialActiveTab to Tabs

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}</>;

routes/(footer)/getting-started.tsx

@@ -46,7 +46,7 @@ export default () => {
         </p>
         <CodeBlock
           language="ts"
-          code={`"rfui": "https://deno.land/x/[email protected].24/mod.ts"`}
+          code={`"rfui": "https://deno.land/x/[email protected].25/mod.ts"`}
         />
       </Text>
 

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,