k

src/routes/test.lazy.tsx

@@ -1,14 +1,43 @@
 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 (
         <>
-            {/*<ShippingWarehouseAutocomplete/>*/}
+            <Flex w={"80vw"}>
+
+                <Demo/>
+            </Flex>
+
         </>
     );
 }