style: add icon to menu items

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

@@ -1,11 +1,15 @@
 .item {
-  position: flex;
+  display: flex;
+  column-gap: 8px;
   align-items: center;
+  justify-content: flex-start;
   width: 100%;
-  padding: 12px 8px;
+  padding: 16px 12px;
   font-size: var(--font-sm);
   font-weight: 500;
+  line-height: 1;
   color: var(--color-foreground-subtle);
+  text-align: left;
   cursor: pointer;
   background-color: transparent;
   border: 1px solid var(--color-neutral-200);
@@ -17,4 +21,8 @@
     color: var(--color-foreground);
     background-color: var(--color-neutral-200);
   }
+
+  & .icon {
+    color: var(--color-foreground);
+  }
 }

src/components/menu/item/item.tsx

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

src/components/menu/items/share.tsx

@@ -1,3 +1,5 @@
+import { IoShareSocialSharp } from 'react-icons/io5/index';
+
 import { Item } from '../item';
 
 interface ShareProps {
@@ -5,5 +7,7 @@ interface ShareProps {
 }
 
 export function Share({ open }: ShareProps) {
-  return <Item onClick={open}>Share Sounds</Item>;
+  return (
+    <Item icon={<IoShareSocialSharp />} label="Share Sounds" onClick={open} />
+  );
 }

src/components/menu/items/shuffle.tsx

@@ -1,3 +1,5 @@
+import { BiShuffle } from 'react-icons/bi/index';
+
 import { useSoundStore } from '@/store';
 
 import { Item } from '../item';
@@ -5,5 +7,5 @@ import { Item } from '../item';
 export function Shuffle() {
   const shuffle = useSoundStore(state => state.shuffle);
 
-  return <Item onClick={shuffle}>Shuffle Sounds</Item>;
+  return <Item icon={<BiShuffle />} label="Shuffle Sounds" onClick={shuffle} />;
 }