From c3521a798611aa0ad7297493aa5a790a27bbc991 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Wed, 11 Oct 2023 21:28:45 +0330
Subject: [PATCH] feat: add help text

---
 src/components/categories/categories.module.css |  6 ++++++
 src/components/categories/categories.tsx        | 10 +++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 src/components/categories/categories.module.css

diff --git a/src/components/categories/categories.module.css b/src/components/categories/categories.module.css
new file mode 100644
index 0000000..c1fc48a
--- /dev/null
+++ b/src/components/categories/categories.module.css
@@ -0,0 +1,6 @@
+.help {
+  margin-top: 20px;
+  color: var(--color-foreground-subtle);
+  font-size: var(--font-sm);
+  text-align: center;
+}
diff --git a/src/components/categories/categories.tsx b/src/components/categories/categories.tsx
index 879a03d..0b63f6d 100644
--- a/src/components/categories/categories.tsx
+++ b/src/components/categories/categories.tsx
@@ -1,8 +1,9 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { BiSolidHeart } from 'react-icons/bi/index';
 
 import { useFavoriteStore } from '@/store/favorite';
+import { useSoundStore } from '@/store/sound';
 
 import { Container } from '@/components/container';
 import { StoreConsumer } from '../store-consumer';
@@ -12,10 +13,13 @@ import { PlayProvider } from '@/contexts/play';
 
 import { sounds } from '@/data/sounds';
 
+import styles from './categories.module.css';
+
 export function Categories() {
   const categories = useMemo(() => sounds.categories, []);
 
   const favorites = useFavoriteStore(useShallow(state => state.favorites));
+  const noSelected = useSoundStore(state => state.noSelected());
 
   const favoriteSounds = useMemo(() => {
     const favoriteSounds = categories
@@ -31,14 +35,14 @@ export function Categories() {
     );
   }, [favorites, categories]);
 
-  useEffect(() => console.log({ favoriteSounds }), [favoriteSounds]);
-
   return (
     <StoreConsumer>
       <PlayProvider>
         <Container>
           <Buttons />
 
+          {noSelected && <p className={styles.help}>Select a sound to play!</p>}
+
           <div>
             {!!favoriteSounds.length && (
               <Category