hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-18 09:24:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: add animation to presets

Browse source
This commit is contained in:
MAZE 2024-06-16 22:14:44 +04:30
parent 73a5c21be9
commit 787a9b60b5
1 changed files with 31 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/components/modals/presets/list/list.tsx
View file

@ -1,4 +1,5 @@
import { FaPlay, FaRegTrashAlt } from 'react-icons/fa/index';
import { motion, AnimatePresence } from 'framer-motion';
import styles from './list.module.css';
@ -26,29 +27,37 @@ export function List({ close }: ListProps) {
<p className={styles.empty}>You don&apos;t have any presets yet.</p>
)}
{presets.map(preset => (
<div className={styles.preset} key={preset.id}>
<input
placeholder="Untitled"
type="text"
value={preset.label}
onChange={e => changeName(preset.id, e.target.value)}
/>
<button onClick={() => deletePreset(preset.id)}>
<FaRegTrashAlt />
</button>
<button
className={styles.primary}
onClick={() => {
override(preset.sounds);
play();
close();
}}
<AnimatePresence>
{presets.map(preset => (
<motion.div
animate={{ opacity: 1 }}
className={styles.preset}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key={preset.id}
>
<FaPlay />
</button>
</div>
))}
<input
placeholder="Untitled"
type="text"
value={preset.label}
onChange={e => changeName(preset.id, e.target.value)}
/>
<button onClick={() => deletePreset(preset.id)}>
<FaRegTrashAlt />
</button>
<button
className={styles.primary}
onClick={() => {
override(preset.sounds);
play();
close();
}}
>
<FaPlay />
</button>
</motion.div>
))}
</AnimatePresence>
</div>
);
}