// npm i motion

import * as motion from "motion/react-client";

export default function Page() {

    const container = {
        hidden: {
            opacity: 0,
        },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.3,
            }
        }
    }

    const item = {
        hidden: {
            opacity: 0,
            y: 100
        },
        visible: {
            opacity: [ 0, 0.3, 1 ],
            y: 0,
        }
    }

    const images = [
        "https://cdn.pixabay.com/photo/2017/11/13/16/39/ginkgo-2946131_1280.jpg",
        "https://cdn.pixabay.com/photo/2017/04/06/15/02/girls-2208489_1280.jpg",
        "https://cdn.pixabay.com/photo/2020/02/27/08/48/sunset-4883887_1280.jpg",
        "https://cdn.pixabay.com/photo/2016/01/08/16/04/woman-1128523_1280.jpg",
        "https://cdn.pixabay.com/photo/2016/06/21/23/06/woman-1472191_1280.jpg",
        "https://cdn.pixabay.com/photo/2020/07/30/10/29/woman-5450043_1280.jpg",
    ]

    return (
        <motion.div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
                    variants={ container }
                    initial="hidden"
                    animate="visible">
            {
                images.map((url, i) => (
                    <motion.img className="w-full aspect-video"
                                src={ url }
                                alt=""
                                key={ i }
                                variants={ item }/>
                ))
            }
        </motion.div>
    )
}