hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 08:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add help text

Browse source
This commit is contained in:
MAZE 2023-10-11 21:28:45 +03:30
parent 4266557366
commit c3521a7986
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/categories/categories.module.css Normal file
View file

@ -0,0 +1,6 @@
.help {
margin-top: 20px;
color: var(--color-foreground-subtle);
font-size: var(--font-sm);
text-align: center;
}

10
src/components/categories/categories.tsx
View file

@ -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