Animated Background

use leptos::prelude::*;

use crate::components::ui::background_retro::{BackgroundRetro, BackgroundRetroGrid};

#[component]
pub fn DemoBackgroundRetro() -> impl IntoView {
    view! {
        <style>
            "@keyframes background_retro_grid {
                0% { transform: translateY(-50%); }
                100% { transform: translateY(0); }
            }
            .animate-background_retro_grid {
                animation: background_retro_grid 15s linear infinite;
            }"
        </style>
        <div class="flex overflow-hidden relative justify-center items-center p-20 w-full h-full rounded-lg border md:shadow-xl min-h-[300px] bg-background">
            <p class="z-10 text-5xl font-medium tracking-tighter text-center whitespace-pre-wrap">
                Retro
            </p>
            <BackgroundRetro>
                <BackgroundRetroGrid />
                <div class="absolute inset-0 bg-gradient-to-t from-white to-transparent dark:from-black to-90%" />
            </BackgroundRetro>
        </div>
    }
}