Layout Animation

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

export function FilterableGrid({ items }) {
  const [filter, setFilter] = useState('all')

  const filtered = items.filter(
    (item) => filter === 'all' || item.category === filter
  )

  return (
    <>
      <div className="flex gap-2">
        {['all', 'design', 'dev'].map((f) => (
          <button key={f} onClick={() => setFilter(f)}>
            {f}
          </button>
        ))}
      </div>

      <motion.div layout className="grid grid-cols-3 gap-4">
        <AnimatePresence>
          {filtered.map((item) => (
            <motion.div
              key={item.id}
              layout
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              transition={{ duration: 0.3 }}
            >
              {item.content}
            </motion.div>
          ))}
        </AnimatePresence>
      </motion.div>
    </>
  )
}