add id to tab key (#557)

Author: LadyBluenotes

src/components/Markdown.tsx

@@ -30,7 +30,10 @@ const CustomHeading = ({
   // Convert children to array and strip any inner anchor (native 'a' or MarkdownLink)
   const childrenArray = React.Children.toArray(children)
   const sanitizedChildren = childrenArray.map((child) => {
-    if (React.isValidElement(child) && (child.type === 'a' || child.type === MarkdownLink)) {
+    if (
+      React.isValidElement(child) &&
+      (child.type === 'a' || child.type === MarkdownLink)
+    ) {
       // replace anchor child with its own children so outer anchor remains the only link
       return child.props.children ?? null
     }
@@ -45,7 +48,10 @@ const CustomHeading = ({
 
   if (id) {
     return (
-      <a href={`#${id}`} className={`anchor-heading *:scroll-my-20 *:lg:scroll-my-4`}>
+      <a
+        href={`#${id}`}
+        className={`anchor-heading *:scroll-my-20 *:lg:scroll-my-4`}
+      >
         {heading}
       </a>
     )
@@ -55,8 +61,7 @@ const CustomHeading = ({
 }
 
 const makeHeading =
-  (type: HeadingLevel) =>
-  (props: HTMLProps<HTMLHeadingElement>) =>
+  (type: HeadingLevel) => (props: HTMLProps<HTMLHeadingElement>) =>
     (
       <CustomHeading
         Comp={type}
@@ -327,7 +332,9 @@ const options: HTMLReactParserOptions = {
               domToReact(panel.children as any, options)
             )
 
-            return <Tabs tabs={tabs} children={children as any} />
+            return (
+              <Tabs id={attributes.id} tabs={tabs} children={children as any} />
+            )
           }
           default:
             return <div>{domToReact(domNode.children as any, options)}</div>

src/components/Tabs.tsx

@@ -11,9 +11,10 @@ export type TabDefinition = {
 export type TabsProps = {
   tabs: Array<TabDefinition>
   children: Array<React.ReactNode>
+  id: string
 }
 
-export function Tabs({ tabs, children }: TabsProps) {
+export function Tabs({ tabs, id, children }: TabsProps) {
   const Route = getRouteApi()
   const { framework } = Route.useParams()
 
@@ -27,6 +28,7 @@ export function Tabs({ tabs, children }: TabsProps) {
         {tabs.map((tab) => {
           return (
             <Tab
+              id={id}
               tab={tab}
               activeSlug={activeSlug}
               setActiveSlug={setActiveSlug}
@@ -40,7 +42,7 @@ export function Tabs({ tabs, children }: TabsProps) {
           if (!tab) return null
           return (
             <div
-              key={tab.slug}
+              key={`${id}-${tab.slug}`}
               data-tab={tab.slug}
               hidden={tab.slug !== activeSlug}
               className="prose dark:prose-invert max-w-none flex flex-col gap-2 text-base"
@@ -55,18 +57,20 @@ export function Tabs({ tabs, children }: TabsProps) {
 }
 
 const Tab = ({
+  id,
   tab,
   activeSlug,
   setActiveSlug,
 }: {
+  id: string
   tab: TabDefinition
   activeSlug: string
   setActiveSlug: React.Dispatch<React.SetStateAction<string>>
 }) => {
   const options = React.useMemo(() => getFrameworkOptions(tab.slug), [tab.slug])
   return (
     <button
-      key={tab.slug}
+      key={`${id}-${tab.slug}`}
       aria-label={tab.name}
       title={tab.name}
       type="button"