Merge branch 'main' into eslint-updates

Author: LadyBluenotes

src/components/Markdown.tsx

@@ -329,7 +329,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"