feat: add shortcuts to items

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

@@ -2,7 +2,7 @@
   display: flex;
   column-gap: 8px;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   width: 100%;
   height: 40px;
   min-height: 40px;
@@ -31,6 +31,13 @@
     border: 1px solid var(--color-neutral-300);
   }
 
+  & .label {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
   & .icon {
     color: var(--color-foreground);
   }
@@ -41,4 +48,8 @@
     background: var(--color-neutral-950);
     border-radius: 50%;
   }
+
+  & .shortcut {
+    font-size: var(--font-2xsm);
+  }
 }

src/components/menu/item/item.tsx

@@ -9,6 +9,7 @@ interface ItemProps {
   icon: React.ReactElement;
   label: string;
   onClick?: () => void;
+  shortcut?: string;
 }
 
 export function Item({
@@ -18,6 +19,7 @@ export function Item({
   icon,
   label,
   onClick = () => {},
+  shortcut,
 }: ItemProps) {
   const Comp = href ? 'a' : 'button';
 
@@ -28,8 +30,12 @@ export function Item({
         disabled={disabled}
         {...(href ? { href, target: '_blank' } : {})}
       >
-        <span className={styles.icon}>{icon}</span> {label}
+        <span className={styles.label}>
-        {active && <div className={styles.active} />}
+          <span className={styles.icon}>{icon}</span> {label}
+          {active && <div className={styles.active} />}
+        </span>
+
+        {shortcut && <span className={styles.shortcut}>{shortcut}</span>}
       </Comp>
     </DropdownItem>
   );

src/components/menu/items/notepad.tsx

@@ -16,6 +16,7 @@ export function Notepad({ open }: NotepadProps) {
       active={!!note.length}
       icon={<MdNotes />}
       label="Notepad"
+      shortcut="Alt + N"
       onClick={open}
     />
   );

src/components/menu/items/pomodoro.tsx

@@ -16,6 +16,7 @@ export function Pomodoro({ open }: PomodoroProps) {
       active={running}
       icon={<MdOutlineAvTimer />}
       label="Pomodoro"
+      shortcut="Alt + P"
       onClick={open}
     />
   );

src/components/menu/items/presets.tsx

@@ -7,5 +7,12 @@ interface PresetsProps {
 }
 
 export function Presets({ open }: PresetsProps) {
-  return <Item icon={<RiPlayListFill />} label="Your Presets" onClick={open} />;
+  return (
+    <Item
+      icon={<RiPlayListFill />}
+      label="Your Presets"
+      shortcut="Shift + Alt + P"
+      onClick={open}
+    />
+  );
 }

src/components/menu/items/share.tsx

@@ -16,6 +16,7 @@ export function Share({ open }: ShareProps) {
       disabled={noSelected}
       icon={<IoShareSocialSharp />}
       label="Share Sounds"
+      shortcut="Alt + S"
       onClick={open}
     />
   );

src/components/menu/menu.module.css

@@ -30,7 +30,7 @@
   display: flex;
   flex-direction: column;
   row-gap: 4px;
-  width: 240px;
+  width: 250px;
   height: max-content;
   max-height: var(--radix-dropdown-menu-content-available-height);
   padding: 4px;