23 lines
788 B
TypeScript
23 lines
788 B
TypeScript
import { Tabs, TabsProps } from "@mui/material";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { ReactElement, cloneElement } from "react";
|
|
|
|
interface AnimatedTabsProps extends TabsProps {}
|
|
|
|
export default function AnimatedTabs({ children, ...props }: AnimatedTabsProps) {
|
|
return (
|
|
<Tabs {...props}>
|
|
<AnimatePresence>
|
|
{(Array.isArray(children) ? children : [children]).map((child, index) => (
|
|
<motion.div
|
|
key={(child as ReactElement).key || index}
|
|
layout // Enables smooth movement when order changes
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
|
>
|
|
{cloneElement(child as ReactElement)}
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</Tabs>
|
|
);
|
|
}
|