Refine admin photo edit button

src/admin/AdminPhotoMenuClient.tsx

@@ -1,15 +1,12 @@
 'use client';
 
+import { ComponentProps } from 'react';
 import { pathForAdminPhotoEdit } from '@/site/paths';
-import { Menu } from '@headlessui/react';
-import clsx from 'clsx/lite';
-import Link from 'next/link';
-import { FiMoreHorizontal } from 'react-icons/fi';
+import MoreMenu from '../components/MoreMenu';
 
-export interface AdminPhotoMenuClientProps {
+export interface AdminPhotoMenuClientProps
+  extends ComponentProps<typeof MoreMenu> {
   photoId: string
-  className?: string
-  buttonClassName?: string
 }
 
 export default function AdminPhotoMenuClient({
@@ -18,35 +15,10 @@ export default function AdminPhotoMenuClient({
   buttonClassName,
 }: AdminPhotoMenuClientProps) {
   return (
-    <div className={clsx(
+    <MoreMenu {...{
+      items: [{ href: pathForAdminPhotoEdit(photoId), label: 'Edit Photo' }],
       className,
-      'relative',
-    )}>
-      <Menu>
-        <Menu.Button className={clsx(
-          buttonClassName,
-          'p-1 py-1 min-h-0 border-none shadow-none',
-          'text-dim',
-        )}
-        >
-          <FiMoreHorizontal size={16} />
-        </Menu.Button>
-        <Menu.Items className={clsx(
-          'absolute top-6 right-1',
-          'text-sm',
-          'px-3 py-1.5 rounded-md border',
-          'bg-content',
-        )}>
-          <Menu.Item>
-            <Link
-              className="whitespace-nowrap"
-              href={pathForAdminPhotoEdit(photoId)}
-            >
-              Edit Photo
-            </Link>
-          </Menu.Item>
-        </Menu.Items>
-      </Menu>
-    </div>
+      buttonClassName,
+    }}/>
   );
 }

src/components/MoreMenu.tsx

@@ -0,0 +1,58 @@
+import clsx from 'clsx/lite';
+import Link from 'next/link';
+import { Menu } from '@headlessui/react';
+import { FiMoreHorizontal } from 'react-icons/fi';
+import { ReactNode } from 'react';
+
+export default function MoreMenu({
+  className,
+  buttonClassName,
+  items,
+}: {
+  className?: string
+  buttonClassName?: string
+  items: { href: string, label: ReactNode }[],
+}) {
+  return (
+    <div className={clsx(
+      className,
+      'relative',
+    )}>
+      <Menu>
+        <Menu.Button className={clsx(
+          buttonClassName,
+          'p-1 py-1 min-h-0 border-none shadow-none outline-none',
+          'text-dim',
+        )}
+        >
+          <FiMoreHorizontal size={16} />
+        </Menu.Button>
+        <Menu.Items className={clsx(
+          'block',
+          'absolute top-6 right-1 outline-none h-auto',
+          'text-sm',
+          'p-0.5 rounded-md border',
+          'bg-content',
+        )}>
+          {items.map(({ href, label }) =>
+            <Menu.Item key={href}>
+              <Link
+                href={href}
+                className={clsx(
+                  'block',
+                  'px-3 py-1.5 rounded-[4px]',
+                  'hover:text-main',
+                  'hover:bg-gray-50 active:bg-gray-100',
+                  'hover:dark:bg-gray-900/75 active:dark:bg-gray-900',
+                  'whitespace-nowrap',
+                )}
+              >
+                {label}
+              </Link>
+            </Menu.Item>
+          )}
+        </Menu.Items>
+      </Menu>
+    </div>
+  );
+}