transition-panel

1'use client';
2import {
3  AnimatePresence,
4  Transition,
5  Variant,
6  motion,
7  MotionProps,
8} from 'motion/react';
9import { cn } from '@/lib/utils';
10
11export type TransitionPanelProps = {
12  children: React.ReactNode[];
13  className?: string;
14  transition?: Transition;
15  activeIndex: number;
16  variants?: { enter: Variant; center: Variant; exit: Variant };
17} & MotionProps;
18
19export function TransitionPanel({
20  children,
21  className,
22  transition,
23  variants,
24  activeIndex,
25  ...motionProps
26}: TransitionPanelProps) {
27  return (
28    <div className={cn('relative', className)}>
29      <AnimatePresence
30        initial={false}
31        mode='popLayout'
32        custom={motionProps.custom}
33      >
34        <motion.div
35          key={activeIndex}
36          variants={variants}
37          transition={transition}
38          initial='enter'
39          animate='center'
40          exit='exit'
41          {...motionProps}
42        >
43          {children[activeIndex]}
44        </motion.div>
45      </AnimatePresence>
46    </div>
47  );
48}
49