import { type ComponentProps, type ReactNode, useMemo } from "react"; import { AnimatePresence, motion } from "motion/react"; const effectPresets = { slideUp: { initial: { y: "100%" }, animate: { y: 0 }, exit: { y: "-100%" } }, slideDown: { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "100%" } }, opacity: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, blur: { initial: { filter: "blur(12px)" }, animate: { filter: "blur(0px)" }, exit: { filter: "blur(12px)" } }, grayscale: { initial: { filter: "grayscale(100%)" }, animate: { filter: "grayscale(0%)" }, exit: { filter: "grayscale(100%)" }, }, width: { initial: { width: 0 }, animate: { width: "auto" }, exit: { width: 0 } }, } as const; export type SwapProps = Omit, "children"> & { state: T; children: (state: T) => ReactNode; effects?: (keyof typeof effectPresets)[]; duration?: number; }; const combineEffects = (effects: (keyof typeof effectPresets)[]) => { const result = { initial: {} as any, animate: {} as any, exit: {} as any }; for (const effect of effects) { const preset = effectPresets[effect]; for (const phase of ["initial", "animate", "exit"] as const) { for (const [key, value] of Object.entries(preset[phase])) { if (key === "filter" && result[phase].filter) { result[phase].filter += ` ${value}`; } else { result[phase][key] = value; } } } } return result; }; export const Swap = ({ state, children, duration = 0.4, effects = [], ...props }: SwapProps) => { const effectsKey = effects.join(","); const variants = useMemo(() => combineEffects(effects), [effectsKey]); return ( {children(state)} ); };