Refactor SectionIcon

Author: BrettJephson

packages/gitbook/src/components/SiteSectionTabs/SectionIcon.tsx

@@ -6,10 +6,16 @@ import { type ClassValue, tcls } from '@/lib/tailwind';
 /**
  * Icon shown beside a section in the site section tabs.
  */
-export function SectionIcon(props: { section: SiteSection; className?: ClassValue }) {
-    const { section, className } = props;
+export function SectionIcon(props: { icon: IconName; isActive: boolean }) {
+    const { icon, isActive } = props;
 
-    return section.icon ? (
-        <Icon icon={section.icon as IconName} className={tcls('size-[1em]', className)} />
-    ) : null;
+    return (
+        <Icon
+            icon={icon}
+            className={tcls(
+                'size-[1em] text-inherit opacity-8',
+                isActive && 'text-inherit opacity-10',
+            )}
+        />
+    );
 }

packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { SiteSection } from '@gitbook/api';
+import type { IconName } from '@gitbook/icons';
 import React from 'react';
 
 import { tcls } from '@/lib/tailwind';
@@ -94,13 +95,7 @@ export function SiteSectionTabs(props: {
                                 ref={isActive ? currentTabRef : null}
                                 icon={
                                     icon ? (
-                                        <SectionIcon
-                                            className={tcls(
-                                                'text-inherit opacity-8',
-                                                isActive && 'text-inherit opacity-10',
-                                            )}
-                                            section={section}
-                                        />
+                                        <SectionIcon isActive={isActive} icon={icon as IconName} />
                                     ) : null
                                 }
                             />