Refactor <IconButton />

src/components/IconButton.tsx

@@ -4,14 +4,14 @@ import { cc } from '@/utility/css';
 import Spinner, { SpinnerColor } from './Spinner';
 
 export default function IconButton({
-  children,
+  icon,
   onClick,
   isLoading,
   className,
   spinnerColor,
   spinnerSize,
 }: {
-  children: React.ReactNode
+  icon: JSX.Element
   onClick?: () => void
   isLoading?: boolean
   className?: string
@@ -32,7 +32,7 @@ export default function IconButton({
             'active:opacity-50',
           )}
         >
-          {children}
+          {icon}
         </span>
         : <span className={cc(
           'inline-block translate-y-[1.5px]',

src/components/IconPathButton.tsx

@@ -6,15 +6,15 @@ import { useEffect, useState, useTransition } from 'react';
 import { cc } from '@/utility/css';
 
 export default function IconPathButton({
+  icon,
   path,
   prefetch,
   loaderDelay = 250,
-  children,
 }: {
+  icon: JSX.Element
   path: string
   prefetch?: boolean
   loaderDelay?: number
-  children: React.ReactNode
 }) {
   const router = useRouter();
 
@@ -41,6 +41,7 @@ export default function IconPathButton({
 
   return (
     <IconButton
+      icon={icon}
       onClick={() => startTransition(() =>
         router.push(path))}
       isLoading={shouldShowLoader}
@@ -51,8 +52,6 @@ export default function IconPathButton({
         'dark:text-gray-400 dark:active:text-gray-300',
       )}
       spinnerColor="text"
-    >
-      {children}
-    </IconButton>
+    />
   );
 }

src/photo/SharePhotoButton.tsx

@@ -12,10 +12,9 @@ export default function SharePhotoButton({
 }) {
   return (
     <IconPathButton
+      icon={<TbPhotoShare size={17} />}
       path={pathForPhoto(photo, true)}
       prefetch={prefetch}
-    >
-      <TbPhotoShare size={17} />
-    </IconPathButton>
+    />
   );
 }

src/site/SiteChecklistClient.tsx

@@ -138,6 +138,7 @@ export default function SiteChecklistClient({
               <span>{secret}</span>
               <div className="flex items-center gap-0.5">
                 <IconButton
+                  icon={<BiCopy size={16} />}
                   onClick={() => {
                     navigator.clipboard.writeText(secret);
                     toast(
@@ -147,16 +148,13 @@ export default function SiteChecklistClient({
                       },
                     );
                   }}
-                >
-                  <BiCopy size={16} />
-                </IconButton>
+                />
                 <IconButton
+                  icon={<BiRefresh size={18} />}
                   onClick={refreshSecret}
                   isLoading={isPendingSecret}
                   spinnerColor="text"
-                >
-                  <BiRefresh size={18} />
-                </IconButton>
+                />
               </div>
             </div>
           </InfoBlock>