import clsx from "clsx"; import { animate, motion, useMotionValue, useTransform } from "framer-motion"; import React from "react"; import { Airtable, Antd, Appwrite, Chakra, Graphql, Hasura, Mantine, Mui, Nest, Rest, Strapi, Supabase, } from "../assets/integration-icons"; const dataItems = [ { icon: Appwrite, label: "Appwrite", packageName: "appwrite", }, { icon: Nest, label: "NestJS", packageName: "nestjsx-crud", }, { icon: Strapi, label: "Strapi", packageName: "strapi-v4", }, { icon: Airtable, label: "Airtable", packageName: "airtable", }, { icon: Supabase, label: "Supabase", packageName: "supabase", }, { icon: Hasura, label: "Hasura", packageName: "hasura", }, { icon: (props) => ( ), label: "REST API", packageName: "simple-rest", }, { icon: Graphql, label: "GraphQL", packageName: "graphql", }, { icon: Appwrite, label: "Appwrite", packageName: "appwrite", }, ]; const uiItems = [ { icon: Mui, label: "Material UI", packageName: "mui", dependencyLine: 'import { DataGrid } from "@mui/material";', }, { icon: Antd, label: "Ant Design", packageName: "antd", dependencyLine: 'import { Table } from "antd";', }, { icon: Mantine, label: "Mantine", packageName: "mantine", dependencyLine: 'import { Table } from "@mantine/core";', }, { icon: Chakra, label: "Chakra UI", packageName: "chakra-ui", dependencyLine: 'import { Table } from "@chakra-ui/react";', }, { icon: Mui, label: "Material UI", packageName: "mui", dependencyLine: 'import { DataGrid } from "@mui/material";', }, ]; export const LandingMagic = () => { const dataSequence = useMotionValue(0); const uiSequence = useMotionValue(0); const dataY = useTransform( dataSequence, [0, dataItems.length - 1], ["0%", `-${100 - 100 / dataItems.length}%`], ); const uiY = useTransform( uiSequence, [0, uiItems.length - 1], ["0%", `-${100 - 100 / uiItems.length}%`], ); React.useEffect(() => { const interval = setInterval(async () => { const next = uiSequence.get() + 1; const nextValue = next > uiItems.length - 1 ? 0 : next; const isGoingToLast = nextValue === uiItems.length - 1; await animate(uiSequence, nextValue, { duration: 0.25, type: "spring", bounce: 0.35, stiffness: 50, onComplete: () => { if (isGoingToLast) { uiSequence.stop(); uiSequence.set(0); } }, }); }, 12000 / uiItems.length); return () => { clearInterval(interval); }; }, [uiY]); React.useEffect(() => { const interval = setInterval(async () => { const next = dataSequence.get() + 1; const nextValue = next > dataItems.length - 1 ? 0 : next; const isGoingToLast = nextValue === dataItems.length - 1; await animate(dataSequence, nextValue, { duration: 0.25, type: "spring", bounce: 0.35, stiffness: 50, onComplete: () => { if (isGoingToLast) { dataSequence.stop(); dataSequence.set(0); } }, }); }, 12000 / dataItems.length); return () => { clearInterval(interval); }; }, [dataY]); return (
Flexibility without starting from scratch
{dataItems.map( ({ icon: DataIcon }, index) => (
), )}
{uiItems.map( ({ icon: UIIcon }, index) => (
), )} 
                                        
                                            
                                                import
                                            {" "}
                                            dataProvider{" "}
                                            
                                                from
                                            {" "}
                                            
                                                "@refinedev/supabase"
                                            
                                            {";\n"}
                                            
                                                import
                                            
                                            {" { "}
                                            
                                                Table
                                            
                                            {", "}
                                            
                                                Layout
                                            
                                            {" } "}
                                            
                                                from
                                            {" "}
                                            
                                                "antd"
                                            
                                            {";\n"}
                                            
                                                import
                                            
                                            {" { "}
                                            useTable
                                            {" } "}
                                            
                                                from
                                            {" "}
                                            
                                                "@refinedev/antd"
                                            
                                            {";\n"}
); };