Layout animation

import { useState } from 'react';
import { AnimatePresence, motion, MotionConfig } from 'motion/react';

const tasks = [
  { id: 1, title: 'Write launch email', done: false },
  { id: 2, title: 'Review pricing page', done: true },
  { id: 3, title: 'Fix signup redirect', done: false },
  { id: 4, title: 'Book venue for offsite', done: true },
  { id: 5, title: 'Draft Q3 roadmap', done: false }
];
const byTitle = [...tasks].sort((a, b) => a.title.localeCompare(b.title));

export function TaskList() {
  const [sorted, setSorted] = useState(false);
  const [hideDone, setHideDone] = useState(false);
  const ordered = sorted ? byTitle : tasks;
  const visible = hideDone ? ordered.filter((task) => !task.done) : ordered;

  return (
    // reducedMotion='user' turns the movement off for people who prefer less motion.
    <MotionConfig reducedMotion='user'>
      <div className='w-80'>
        <div className='mb-3 flex gap-2 text-sm font-medium *:rounded-full *:border *:px-3 *:py-1.5 *:aria-pressed:bg-muted'>
          <button
            type='button'
            aria-pressed={sorted}
            onClick={() => setSorted(!sorted)}
          >
            Sort A–Z
          </button>
          <button
            type='button'
            aria-pressed={hideDone}
            onClick={() => setHideDone(!hideDone)}
          >
            Hide done
          </button>
        </div>
        {/* popLayout pulls leaving rows out of the flow, so the rest close the gap right away. */}
        <ul className='relative flex flex-col gap-2'>
          <AnimatePresence mode='popLayout' initial={false}>
            {visible.map((task) => (
              <motion.li
                key={task.id}
                layout
                exit={{ opacity: 0, scale: 0.95 }}
                transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
                className='rounded-xl border bg-background px-4 py-3 text-sm'
              >
                {task.title}
              </motion.li>
            ))}
          </AnimatePresence>
        </ul>
      </div>
    </MotionConfig>
  );
}