feat: add disabled state

remvze · Jan 4, 2024 · ff26597 · ff26597
1 parent c8e5122
commit ff26597
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git 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
@@ -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 (
-    <button className={styles.item} onClick={onClick}>
+    <button className={styles.item} disabled={disabled} onClick={onClick}>
       <span className={styles.icon}>{icon}</span> {label}
     </button>
   );

diff --git 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 (
-    <Item icon={<IoShareSocialSharp />} label="Share Sounds" onClick={open} />
+    <Item
+      disabled={noSelected}
+      icon={<IoShareSocialSharp />}
+      label="Share Sounds"
+      onClick={open}
+    />
   );
 }