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>

        </>
    );
}