saving tab in localstorage

pixeleye-io · Jun 10, 2024 · 6ca822f · 6ca822f
1 parent 974d198
commit 6ca822f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 19 deletions.
diff --git a/apps/marketing-astro/src/components/schema/tab.astro b/apps/marketing-astro/src/components/schema/tab.astro
@@ -5,15 +5,17 @@ interface Props {
   labeledByID: string;
   id: string;
   initial?: boolean;
+  label: string;
 }
 
-const { labeledByID, id, initial } = Astro.props;
+const { labeledByID, id, initial, label } = Astro.props;
 ---
 
 <div
   role="tabpanel"
   id={id}
   aria-labelledby={labeledByID}
+  data-label={label}
   hidden={!initial}
   class="mt-2 ring-offset-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 >

diff --git a/apps/marketing-astro/src/components/schema/tabs.astro b/apps/marketing-astro/src/components/schema/tabs.astro
@@ -8,9 +8,11 @@ interface Props extends HTMLAttributes<"div"> {
 }
 
 const { labels, idSuffix, ...props } = Astro.props;
+
+const group = labels.sort().toString();
 ---
 
-<div {...props} data-tabs>
+<div {...props} data-tabs data-tabs-id={group}>
   <div
     role="tablist"
     class="inline-flex relative h-10 items-center justify-center rounded-md bg-surface-container-highest dark:bg-surface-container p-1 text-on-surface-variant"
@@ -52,26 +54,41 @@ const { labels, idSuffix, ...props } = Astro.props;
         activeTrigger.getAttribute("aria-controls")!
       )!;
 
-      triggers.forEach((trigger) => {
-        trigger.addEventListener("click", () => {
-          activeTrigger.setAttribute("aria-selected", "false");
-          activeTrigger.setAttribute("tabindex", "-1");
+      const groupID = tab.getAttribute("data-tabs-id");
+
+      function setActiveTab(trigger: Element, index: number) {
+        if (trigger === activeTrigger) {
+          return;
+        }
+
+        activeTrigger.setAttribute("aria-selected", "false");
+        activeTrigger.setAttribute("tabindex", "-1");
+
+        trigger.setAttribute("aria-selected", "true");
+        trigger.setAttribute("tabindex", "0");
+
+        const tabId = trigger.getAttribute("aria-controls")!;
 
-          trigger.setAttribute("aria-selected", "true");
-          trigger.setAttribute("tabindex", "0");
+        if (activePanel) {
+          activePanel.setAttribute("hidden", "");
+        }
 
-          const tabId = trigger.getAttribute("aria-controls")!;
+        activePanel = document.getElementById(tabId)!;
+        activePanel.removeAttribute("hidden");
 
-          if (activePanel) {
-            activePanel.setAttribute("hidden", "");
-          }
+        localStorage.setItem(`tabs-${groupID}-active`, String(index));
 
-          activePanel = document.getElementById(tabId)!;
-          activePanel.removeAttribute("hidden");
+        activeTrigger = trigger;
+      }
 
-          activeTrigger = trigger;
-        });
+      triggers.forEach((trigger, i) => {
+        trigger.addEventListener("click", () => setActiveTab(trigger, i));
       });
+      const index = localStorage.getItem(`tabs-${groupID}-active`);
+      setActiveTab(
+        triggers.item(index ? parseInt(index) : 0),
+        parseInt(index || "0")
+      );
     });
   }
 

diff --git a/apps/marketing-astro/src/components/schema/tabs.markdoc.ts b/apps/marketing-astro/src/components/schema/tabs.markdoc.ts
@@ -1,6 +1,4 @@
 import Markdoc, { type Config, type Node } from "@markdoc/markdoc";
-import Tabs from "./tabs.astro";
-import Tab from "./tab.astro";
 
 export const tab = {
   attributes: {},
@@ -22,6 +20,9 @@ export const tabs = {
     const labels = node
       .transformChildren(config)
       .filter((child) => child && (child as any).name === "tab")
+      .sort((a: any, b: any) =>
+        a.attributes.label.localeCompare(b.attributes.label)
+      )
       .map((tab, i) => {
         (tab as any).attributes.id = `tab-${i}--${idSuffix}`;
         if (i === 0) {
@@ -34,7 +35,11 @@ export const tabs = {
     return new Markdoc.Tag(
       "tabs",
       { labels, idSuffix },
-      node.transformChildren(config)
+      node
+        .transformChildren(config)
+        .sort((a: any, b: any) =>
+          a.attributes.label.localeCompare(b.attributes.label)
+        )
     );
   },
 };