make <Tab /> accept ComponentProps<'div'> (#764)

shuding · Sep 2, 2022 · 9064112 · 9064112
1 parent c4a9782
commit 9064112
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/few-emus-pull.md b/.changeset/few-emus-pull.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+make `<Tab />` accept `ComponentProps<'div'>`
diff --git a/packages/nextra-theme-docs/src/components/tabs.tsx b/packages/nextra-theme-docs/src/components/tabs.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react'
+import React, { ComponentProps, ReactElement, ReactNode } from 'react'
 import cn from 'clsx'
 import { Tab as HeadlessTab } from '@headlessui/react'
 
@@ -75,9 +75,16 @@ export function Tabs({
   )
 }
 
-export function Tab({ children }: { children: ReactNode }): ReactElement {
+export function Tab({
+  children,
+  className,
+  ...props
+}: ComponentProps<'div'>): ReactElement {
   return (
-    <HeadlessTab.Panel className="focus:outline-none focus-visible:ring">
+    <HeadlessTab.Panel
+      className={cn('focus:outline-none focus-visible:ring', className)}
+      {...props}
+    >
       {children}
     </HeadlessTab.Panel>
   )