From 4838df315931bb883f704ec3e1abe2685f296cdf Mon Sep 17 00:00:00 2001 From: HsiangNianian Date: Sat, 22 Apr 2023 19:52:26 +0800 Subject: 😀 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/Tabs.tsx | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 docs/components/Tabs.tsx (limited to 'docs/components/Tabs.tsx') diff --git a/docs/components/Tabs.tsx b/docs/components/Tabs.tsx new file mode 100644 index 0000000..f75019a --- /dev/null +++ b/docs/components/Tabs.tsx @@ -0,0 +1,37 @@ +import type { FC, ReactElement } from "react"; + +import { Tabs as NextraTabs, Tab } from "nextra-theme-docs"; +import useSWR from "swr"; + +export { Tab }; + +export const Tabs: FC<{ + storageKey?: string; + items: string[]; + children: ReactElement; +}> = function ({ storageKey = "tab-index", items, children = null, ...props }) { + // Use SWR so all tabs with the same key can sync their states. + const { data, mutate } = useSWR(storageKey, (key) => { + try { + return JSON.parse(localStorage.getItem(key)); + } catch (e) { + return null; + } + }); + + const selectedIndex = items.indexOf(data); + + return ( + { + localStorage.setItem(storageKey, JSON.stringify(items[index])); + mutate(items[index], false); + }} + selectedIndex={selectedIndex === -1 ? undefined : selectedIndex} + items={items} + {...props} + > + {children} + + ); +}; -- cgit v1.2.3-70-g09d2