From 42f82ab95d684163826e76231fb1dd554f773d68 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Tue, 23 Apr 2024 17:51:51 +0330
Subject: [PATCH] feat: add shortcuts to items

---
 src/components/menu/item/item.module.css | 13 ++++++++++++-
 src/components/menu/item/item.tsx        | 10 ++++++++--
 src/components/menu/items/notepad.tsx    |  1 +
 src/components/menu/items/pomodoro.tsx   |  1 +
 src/components/menu/items/presets.tsx    |  9 ++++++++-
 src/components/menu/items/share.tsx      |  1 +
 src/components/menu/menu.module.css      |  2 +-
 7 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/menu/item/item.module.css b/src/components/menu/item/item.module.css
index 4e43666..c4abdc9 100644
--- a/src/components/menu/item/item.module.css
+++ b/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);
+  }
 }
diff --git a/src/components/menu/item/item.tsx b/src/components/menu/item/item.tsx
index 7dfb446..c36c941 100644
--- a/src/components/menu/item/item.tsx
+++ b/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}
-        {active && <div className={styles.active} />}
+        <span className={styles.label}>
+          <span className={styles.icon}>{icon}</span> {label}
+          {active && <div className={styles.active} />}
+        </span>
+
+        {shortcut && <span className={styles.shortcut}>{shortcut}</span>}
       </Comp>
     </DropdownItem>
   );
diff --git a/src/components/menu/items/notepad.tsx b/src/components/menu/items/notepad.tsx
index 0a4dcff..67e8d37 100644
--- a/src/components/menu/items/notepad.tsx
+++ b/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}
     />
   );
diff --git a/src/components/menu/items/pomodoro.tsx b/src/components/menu/items/pomodoro.tsx
index 5a8e094..8dafd70 100644
--- a/src/components/menu/items/pomodoro.tsx
+++ b/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}
     />
   );
diff --git a/src/components/menu/items/presets.tsx b/src/components/menu/items/presets.tsx
index 65d3f50..a78b17d 100644
--- a/src/components/menu/items/presets.tsx
+++ b/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}
+    />
+  );
 }
diff --git a/src/components/menu/items/share.tsx b/src/components/menu/items/share.tsx
index bd10615..cbbf9b4 100644
--- a/src/components/menu/items/share.tsx
+++ b/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}
     />
   );
diff --git a/src/components/menu/menu.module.css b/src/components/menu/menu.module.css
index 6285af3..adbe58f 100644
--- a/src/components/menu/menu.module.css
+++ b/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;