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