Simplify the PillButton component

Author: krispya

components/gallery/ArticleCTA.tsx

@@ -17,8 +17,7 @@ export function ArticleCTA({ article }: { article: Article }) {
             standalone
             onClick={() => setCollapsed(false)}
             aria-label="Show new article"
-            className="flex"
-            contentClassName="pointer-events-auto flex h-8 min-w-[5.5rem] items-center justify-center gap-2 px-3"
+            className="pointer-events-auto flex h-8 min-w-[5.5rem] items-center justify-center gap-2 px-3"
           >
             <span className="text-[0.6rem] leading-none tracking-[0.08em] uppercase">
               New Article

components/gallery/DemoSidebar.tsx

@@ -74,16 +74,15 @@ export function DemoSidebar({ demos, selected, collapsed, onSelect, onToggle }:
       <div
         className="absolute top-1/2 right-2 z-10"
         style={{
-          translate: collapsed ? (near ? '85% -50%' : '45% -50%') : '50% -50%',
+          translate: collapsed ? (near ? '95% -50%' : '45% -50%') : '50% -50%',
           transition: 'translate 0.25s ease',
         }}
       >
         <PillButton
           standalone
           onClick={onToggle}
           aria-label={collapsed ? 'Show demos' : 'Hide demos'}
-          className="grid h-[5.5rem] w-9 place-items-center hover:bg-[#f5f5f5] hover:text-[#222]"
-          contentClassName="flex h-full w-full items-center justify-center"
+          className="grid h-[5rem] w-8 place-items-center hover:bg-[#f5f5f5] hover:text-[#222]"
         >
           <span className="flex flex-col items-center gap-1.5">
             <svg

components/gallery/NavPill.tsx

@@ -57,16 +57,14 @@ export function NavPill() {
         <div className="hidden items-center gap-px sm:flex">
           <PillButton
             tooltip="Search"
-            className="grid h-[1.8rem] w-[1.8rem] place-items-center"
-            contentClassName="flex h-[0.95rem] w-[0.95rem] items-center justify-center [&_a]:flex [&_button]:!p-0 [&_svg]:h-[0.95rem] [&_svg]:w-[0.95rem]"
+            className="grid h-[1.8rem] w-[1.8rem] place-items-center [&_button]:!p-0 [&_svg]:h-[0.95rem] [&_svg]:w-[0.95rem]"
           >
             <SearchButton />
           </PillButton>
 
           <PillButton
             tooltip="Theme"
-            className="grid h-[1.8rem] w-[1.8rem] place-items-center"
-            contentClassName="flex h-[0.95rem] w-[0.95rem] items-center justify-center [&_a]:flex [&_button]:!p-0 [&_svg]:h-[0.95rem] [&_svg]:w-[0.95rem]"
+            className="grid h-[1.8rem] w-[1.8rem] place-items-center [&_button]:!p-0 [&_svg]:h-[0.95rem] [&_svg]:w-[0.95rem]"
           >
             <ThemeSwitch />
           </PillButton>
@@ -81,7 +79,6 @@ export function NavPill() {
                 rel="noopener noreferrer"
                 aria-label={label}
                 className="grid h-[1.8rem] w-[1.8rem] place-items-center"
-                contentClassName="flex h-[0.95rem] w-[0.95rem] items-center justify-center [&_svg]:h-[0.95rem] [&_svg]:w-[0.95rem]"
               >
                 <Icon className="h-[0.95rem] w-[0.95rem] fill-current" />
               </PillButton>

components/gallery/PillButton.tsx

@@ -3,7 +3,6 @@ import type { ReactNode, MouseEventHandler } from 'react'
 type PillButtonProps = {
   children: ReactNode
   className?: string
-  contentClassName?: string
   tooltip?: string
   standalone?: boolean
   href?: string
@@ -16,7 +15,6 @@ type PillButtonProps = {
 export function PillButton({
   children,
   className,
-  contentClassName,
   tooltip,
   standalone = false,
   href,
@@ -41,24 +39,16 @@ export function PillButton({
     .filter(Boolean)
     .join(' ')
 
-  const content = contentClassName ? (
-    <span className={contentClassName}>{children}</span>
-  ) : (
-    children
-  )
-
   const surface = href ? (
     <a className={surfaceClassName} href={href} target={target} rel={rel} aria-label={ariaLabel}>
-      {content}
+      {children}
     </a>
   ) : onClick ? (
     <button className={surfaceClassName} onClick={onClick} type="button" aria-label={ariaLabel}>
-      {content}
+      {children}
     </button>
   ) : (
-    <div className={surfaceClassName}>
-      <div className={contentClassName}>{children}</div>
-    </div>
+    <div className={surfaceClassName}>{children}</div>
   )
 
   return (