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

style: add animation to more/less button

Browse source
This commit is contained in:
MAZE 2023-10-18 12:46:27 +03:30
parent a53800c6b1
commit b849b3aecd
1 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/sounds/sounds.tsx
View file

@ -1,4 +1,5 @@
import { useState, useMemo, useCallback } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { Sound } from '@/components/sound';
import { useLocalStorage } from '@/hooks/use-local-storage';
@ -65,15 +66,22 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
</div>
{sounds.length > 6 && (
<button
className={cn(
styles.button,
hasHiddenSelection && !showAll && styles.active,
)}
onClick={() => setShowAll(prev => !prev)}
>
{showAll ? 'Show Less' : 'Show More'}
</button>
<AnimatePresence initial={false} mode="wait">
<motion.button
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.85 }}
initial={{ opacity: 0, scale: 0.85 }}
key={showAll ? `${id}-show-less` : `${id}-show-more`}
transition={{ duration: 0.2 }}
className={cn(
styles.button,
hasHiddenSelection && !showAll && styles.active,
)}
onClick={() => setShowAll(prev => !prev)}
>
{showAll ? 'Show Less' : 'Show More'}
</motion.button>
</AnimatePresence>
)}
</div>
);