refactor: better item structure for menu

src/components/menu/buttons/button.tsx

@@ -1,14 +0,0 @@
-import styles from '../menu.module.css';
-
-interface ButtonProps {
-  children: React.ReactNode;
-  onClick: () => void;
-}
-
-export function Button({ children, onClick }: ButtonProps) {
-  return (
-    <button className={styles.menuItem} onClick={onClick}>
-      {children}
-    </button>
-  );
-}

src/components/menu/buttons/index.ts

@@ -1,2 +0,0 @@
-export { ShuffleButton } from './shuffle';
-export { ShareButton } from './share';

src/components/menu/buttons/shuffle.tsx

@@ -1,9 +0,0 @@
-import { useSoundStore } from '@/store';
-
-import { Button } from './button';
-
-export function ShuffleButton() {
-  const shuffle = useSoundStore(state => state.shuffle);
-
-  return <Button onClick={shuffle}>Shuffle Sounds</Button>;
-}

src/components/menu/item/index.ts

@@ -0,0 +1 @@
+export { Item } from './item';

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

@@ -0,0 +1,20 @@
+.item {
+  position: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px 8px;
+  font-size: var(--font-sm);
+  font-weight: 500;
+  color: var(--color-foreground-subtle);
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+  outline: none;
+  transition: 0.2s;
+
+  &:hover {
+    color: var(--color-foreground);
+    background-color: var(--color-neutral-200);
+  }
+}

src/components/menu/item/item.tsx

@@ -0,0 +1,14 @@
+import styles from './item.module.css';
+
+interface ItemProps {
+  children: React.ReactNode;
+  onClick: () => void;
+}
+
+export function Item({ children, onClick }: ItemProps) {
+  return (
+    <button className={styles.item} onClick={onClick}>
+      {children}
+    </button>
+  );
+}

src/components/menu/items/index.ts

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

src/components/menu/items/share/index.ts

@@ -0,0 +1 @@
+export { Share } from './share';

src/components/menu/items/share/share.module.css

@@ -0,0 +1,4 @@
+.heading {
+  font-family: var(--font-heading);
+  font-weight: 700;
+}

src/components/menu/items/share/share.tsx

@@ -3,18 +3,20 @@ import { createPortal } from 'react-dom';
 
 import { Modal } from '@/components/modal';
 
-import { Button } from './button';
+import { Item } from '../../item';
 
-export function ShareButton() {
+import styles from './share.module.css';
+
+export function Share() {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
-      <Button onClick={() => setIsModalOpen(true)}>Share Sounds</Button>
+      <Item onClick={() => setIsModalOpen(true)}>Share Sounds</Item>
 
       {createPortal(
         <Modal show={isModalOpen} onClose={() => setIsModalOpen(false)}>
-          <h1>Share Sounds!</h1>
+          <h1 className={styles.heading}>Share Sounds!</h1>
         </Modal>,
         document.body,
       )}

src/components/menu/items/shuffle.tsx

@@ -0,0 +1,9 @@
+import { useSoundStore } from '@/store';
+
+import { Item } from '../item';
+
+export function Shuffle() {
+  const shuffle = useSoundStore(state => state.shuffle);
+
+  return <Item onClick={shuffle}>Shuffle Sounds</Item>;
+}

src/components/menu/menu.tsx

@@ -14,7 +14,7 @@ import {
   FloatingFocusManager,
 } from '@floating-ui/react';
 
-import { ShuffleButton, ShareButton } from './buttons';
+import { ShuffleItem, ShareItem } from './items';
 
 import { slideY, fade, mix } from '@/lib/motion';
 
@@ -70,8 +70,8 @@ export function Menu() {
                 initial="hidden"
                 variants={variants}
               >
-                <ShareButton />
+                <ShareItem />
-                <ShuffleButton />
+                <ShuffleItem />
               </motion.div>
             </div>
           </FloatingFocusManager>