Animated Background

use leptos::prelude::*;

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

#[component]
pub fn DemoBackgroundRetro() -> impl IntoView {
    view! {
        <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>
    }
}