feat: add donate item

src/components/menu/item/item.module.css

@@ -10,6 +10,7 @@
   line-height: 1;
   color: var(--color-foreground-subtle);
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
   background-color: transparent;
   border: 1px solid var(--color-neutral-200);

src/components/menu/item/item.tsx

@@ -1,16 +1,30 @@
 import styles from './item.module.css';
 
 interface ItemProps {
-  disabled: boolean;
+  disabled?: boolean;
+  href?: string;
   icon: React.ReactElement;
   label: string;
-  onClick: () => void;
+  onClick?: () => void;
 }
 
-export function Item({ disabled = false, icon, label, onClick }: ItemProps) {
+export function Item({
+  disabled = false,
+  href,
+  icon,
+  label,
+  onClick = () => {},
+}: ItemProps) {
+  const Comp = href ? 'a' : 'button';
+
   return (
-    <button className={styles.item} disabled={disabled} onClick={onClick}>
+    <Comp
+      className={styles.item}
+      disabled={disabled}
+      onClick={onClick}
+      {...(href ? { href, target: '_blank' } : {})}
+    >
       <span className={styles.icon}>{icon}</span> {label}
-    </button>
+    </Comp>
   );
 }

src/components/menu/items/donate.tsx

@@ -0,0 +1,13 @@
+import { SiBuymeacoffee } from 'react-icons/si/index';
+
+import { Item } from '../item';
+
+export function Donate() {
+  return (
+    <Item
+      href="https://buymeacoffee.com"
+      icon={<SiBuymeacoffee />}
+      label="Buy Me a Coffe"
+    />
+  );
+}

src/components/menu/items/index.ts

@@ -1,2 +1,3 @@
 export { Shuffle as ShuffleItem } from './shuffle';
 export { Share as ShareItem } from './share';
+export { Donate as DonateItem } from './donate';

src/components/menu/menu.tsx

@@ -14,7 +14,7 @@ import {
   FloatingFocusManager,
 } from '@floating-ui/react';
 
-import { ShuffleItem, ShareItem } from './items';
+import { ShuffleItem, ShareItem, DonateItem } from './items';
 import { ShareLinkModal } from '@/components/modals/share-link';
 
 import { slideY, fade, mix } from '@/lib/motion';
@@ -76,6 +76,7 @@ export function Menu() {
                 >
                   <ShareItem open={() => setShowShareLink(true)} />
                   <ShuffleItem />
+                  <DonateItem />
                 </motion.div>
               </div>
             </FloatingFocusManager>