diff --git a/src/components/menu/item/item.module.css b/src/components/menu/item/item.module.css index 7a1fb50..46d0fd3 100644 --- a/src/components/menu/item/item.module.css +++ b/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); + } } diff --git a/src/components/menu/item/item.tsx b/src/components/menu/item/item.tsx index 3c8c3f6..4652c3d 100644 --- a/src/components/menu/item/item.tsx +++ b/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 ( ); } diff --git a/src/components/menu/items/share.tsx b/src/components/menu/items/share.tsx index da5ab95..5cb062e 100644 --- a/src/components/menu/items/share.tsx +++ b/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 Share Sounds; + return ( + } label="Share Sounds" onClick={open} /> + ); } diff --git a/src/components/menu/items/shuffle.tsx b/src/components/menu/items/shuffle.tsx index dffd888..c676586 100644 --- a/src/components/menu/items/shuffle.tsx +++ b/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 Shuffle Sounds; + return } label="Shuffle Sounds" onClick={shuffle} />; }