review(ui-components): some nits

Author: araujogui

packages/ui-components/src/Common/TableOfContents/index.tsx

@@ -3,13 +3,17 @@ import classNames from 'classnames';
 import { LinkLike } from '#ui/types';
 
 import type { Heading } from '@vcarl/remark-headings';
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 
 import styles from './index.module.css';
 
-type TableOfContentsProps = {
+const depthClasses: Record<number, string> = {
+  3: styles.depthThree,
+  4: styles.depthFour,
+};
+
+type TableOfContentsProps = ComponentProps<'details'> & {
   headings: Array<Heading>;
-  ariaLabel: string;
   summaryTitle: string;
   minDepth?: number;
   maxDepth?: number;
@@ -18,29 +22,26 @@ type TableOfContentsProps = {
 
 const TableOfContents: FC<TableOfContentsProps> = ({
   headings,
-  ariaLabel,
   summaryTitle,
   minDepth = 2,
+  className,
   maxDepth = 4,
   as: Component = 'a',
+  ...props
 }) => {
   const filteredHeadings = headings.filter(
     ({ depth }) => depth >= minDepth && depth <= maxDepth
   );
 
   return (
-    <details className={styles.details} aria-label={ariaLabel}>
+    <details className={classNames(styles.details, className)} {...props}>
       <summary className={styles.summary}>{summaryTitle}</summary>
       <ul className={styles.list}>
         {filteredHeadings.map((head, index) => (
           <li key={head.data?.id ?? index}>
             <Component
               href={head.data?.id && `#${head.data.id}`}
-              className={classNames(
-                styles.link,
-                head.depth === 3 && styles.depthThree,
-                head.depth === 4 && styles.depthFour
-              )}
+              className={classNames(styles.link, depthClasses[head.depth])}
             >
               {head.value}
             </Component>