43 lines
950 B
TypeScript
43 lines
950 B
TypeScript
import {createLazyFileRoute} from "@tanstack/react-router";
|
|
import {Flex, Tabs} from '@mantine/core';
|
|
import {motion} from 'framer-motion';
|
|
|
|
export const Route = createLazyFileRoute('/test')({
|
|
component: TestPage
|
|
})
|
|
|
|
const tabs = [
|
|
['tab111', 'content111'],
|
|
['tab222', 'content222'],
|
|
['tab333', 'content333'],
|
|
];
|
|
|
|
function Demo() {
|
|
return (
|
|
<Tabs>
|
|
{tabs.map((el, i) => (
|
|
<Tabs.Tab key={i} value={el[0]}>
|
|
<motion.div
|
|
initial={{opacity: 0}}
|
|
animate={{opacity: 1}}
|
|
transition={{duration: 0.5}}
|
|
>
|
|
<div>{el[1]}</div>
|
|
</motion.div>
|
|
</Tabs.Tab>
|
|
))}
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
function TestPage() {
|
|
return (
|
|
<>
|
|
<Flex w={"80vw"}>
|
|
|
|
<Demo/>
|
|
</Flex>
|
|
|
|
</>
|
|
);
|
|
} |