swr events refactor

web/src/components/Menu.jsx

@@ -16,18 +16,22 @@ export default function Menu({ className, children, onDismiss, relativeTo, width
   ) : null;
 }
 
-export function MenuItem({ focus, icon: Icon, label, onSelect, value }) {
+export function MenuItem({ focus, icon: Icon, label, href, onSelect, value, ...attrs }) {
   const handleClick = useCallback(() => {
     onSelect && onSelect(value, label);
   }, [onSelect, value, label]);
 
+  const Element = href ? 'a' : 'div';
+
   return (
-    <div
+    <Element
       className={`flex space-x-2 p-2 px-5 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer ${
         focus ? 'bg-gray-200 dark:bg-gray-800 dark:text-white' : ''
       }`}
+      href={href}
       onClick={handleClick}
       role="option"
+      {...attrs}
     >
       {Icon ? (
         <div className="w-6 h-6 self-center mr-4 text-gray-500 flex-shrink-0">
@@ -35,7 +39,7 @@ export function MenuItem({ focus, icon: Icon, label, onSelect, value }) {
         </div>
       ) : null}
       <div className="whitespace-nowrap">{label}</div>
-    </div>
+    </Element>
   );
 }