diff --git a/src/components/menu/item/item.module.css b/src/components/menu/item/item.module.css index 46d0fd3..4e7ab13 100644 --- a/src/components/menu/item/item.module.css +++ b/src/components/menu/item/item.module.css @@ -17,7 +17,12 @@ outline: none; transition: 0.2s; - &:hover { + &:disabled { + cursor: not-allowed; + opacity: 0.4; + } + + &:not(:disabled):hover { color: var(--color-foreground); background-color: var(--color-neutral-200); } diff --git a/src/components/menu/item/item.tsx b/src/components/menu/item/item.tsx index 4652c3d..32b2a94 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 { + disabled: boolean; icon: React.ReactElement; label: string; onClick: () => void; } -export function Item({ icon, label, onClick }: ItemProps) { +export function Item({ disabled = false, icon, label, onClick }: ItemProps) { return ( - ); diff --git a/src/components/menu/items/share.tsx b/src/components/menu/items/share.tsx index 5cb062e..bd10615 100644 --- a/src/components/menu/items/share.tsx +++ b/src/components/menu/items/share.tsx @@ -2,12 +2,21 @@ import { IoShareSocialSharp } from 'react-icons/io5/index'; import { Item } from '../item'; +import { useSoundStore } from '@/store'; + interface ShareProps { open: () => void; } export function Share({ open }: ShareProps) { + const noSelected = useSoundStore(state => state.noSelected()); + return ( - } label="Share Sounds" onClick={open} /> + } + label="Share Sounds" + onClick={open} + /> ); }