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' } : {})} > - {icon} {label} - {active &&
} + + {icon} {label} + {active && } + + + {shortcut && {shortcut}} ); 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={