Create custom checkbox

src/admin/AdminBatchEditPanel.tsx

@@ -4,7 +4,7 @@ import Note from '@/components/Note';
 import LoaderButton from '@/components/primitives/LoaderButton';
 import SiteGrid from '@/components/SiteGrid';
 import { useAppState } from '@/state/AppState';
-import clsx from 'clsx';
+import { clsx } from 'clsx/lite';
 
 export default function AdminBatchEditPanel() {
   const {

src/components/primitives/Checkbox.tsx

@@ -0,0 +1,46 @@
+import { clsx } from 'clsx/lite';
+import { InputHTMLAttributes, ReactNode, useRef } from 'react';
+import { ImCheckboxUnchecked, ImCheckboxChecked } from 'react-icons/im';
+
+const ICON_CLASS_NAME = 'text-[1rem]';
+
+export default function Checkbox(props: {
+  children?: ReactNode
+} & InputHTMLAttributes<HTMLInputElement>) {
+  const {
+    children,
+    className,
+    type: _type,
+    ...rest
+  } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
+  return (
+    <label
+      className={clsx(
+        'inline-flex items-center gap-2 text-main',
+        'cursor-pointer active:opacity-50',
+        className,
+      )}
+      onClick={() => {
+        if (inputRef.current) {
+          inputRef.current.checked = !inputRef.current.checked;
+        }
+      }}
+    >
+      <input
+        {...rest}
+        ref={inputRef}
+        type="checkbox"
+        className="hidden"
+      />
+      <span>
+        {rest.checked 
+          ? <ImCheckboxChecked className={ICON_CLASS_NAME} />
+          : <ImCheckboxUnchecked className={ICON_CLASS_NAME} />}
+      </span>
+      {children && <span>
+        {children}
+      </span>}
+    </label>
+  );
+}

src/photo/PhotoGrid.tsx

@@ -8,6 +8,7 @@ import { Camera } from '@/camera';
 import { FilmSimulation } from '@/simulation';
 import { GRID_ASPECT_RATIO, HIGH_DENSITY_GRID } from '@/site/config';
 import { useAppState } from '@/state/AppState';
+import Checkbox from '@/components/primitives/Checkbox';
 
 export default function PhotoGrid({
   photos,
@@ -86,7 +87,11 @@ export default function PhotoGrid({
           }}
         >
           <PhotoMedium
-            className="flex w-full h-full"
+            className={clsx(
+              'flex w-full h-full',
+              // Prevent accidental navigation when selecting
+              selectedPhotoIds.length > 0 && 'pointer-events-none',
+            )}
             {...{
               photo,
               tag,
@@ -108,17 +113,20 @@ export default function PhotoGrid({
               )}>
                 <div
                   className={clsx(
-                    'w-full h-full border-black dark:border-white',
+                    'w-full h-full transition-opacity',
+                    'border-black dark:border-white',
+                    'group-hover:opacity-100',
+                    !isSelected && 'opacity-0',
+                    // eslint-disable-next-line max-len
+                    'bg-[radial-gradient(169.40%_89.55%_at_94.76%_6.29%,rgba(1,0,0,0.40)_0%,rgba(255,255,255,0.00)_75%)]',
                     isSelected && 'border-4',
                   )}
                 />
               </div>
               {/* Admin Select Action */}
-              <div className="absolute top-0 right-0">
-                <input
-                  type="checkbox"
+              <div className="absolute top-0 right-0 p-2">
+                <Checkbox
                   className={clsx(
-                    'absolute top-2 right-2',
                     !isSelected && 'hidden group-hover:block',
                   )}
                   checked={isSelected}