Meteor Effect

use leptos::prelude::*;

use crate::components::extensions::gradient::{Gradient, GradientVariant};
use crate::components::extensions::meteor_effect::{MeteorEffect, Meteors};
use crate::components::ui::button::Button;
use crate::components::ui::card::Card;

#[component]
pub fn DemoMeteorEffect() -> impl IntoView {
    view! {
        <MeteorEffect>
            <Gradient variant=GradientVariant::OrangeYellow />

            <Card class="relative flex flex-col overflow-hidden">
                <DemoContent />
                <Meteors number=20 />
            </Card>
        </MeteorEffect>
    }
}

/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/*                     ✨ FUNCTIONS ✨                        */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/

#[component]
pub fn DemoContent() -> impl IntoView {
    view! {
        <div>
            <p class="relative z-20 mb-4 text-xl font-bold text-white">Meteor effect</p>
            <p class="relative z-20 mb-4 text-base font-normal text-slate-500">
                {"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore esse eu aliqua elit aliqua dolor consectetur officia labore pariatur in eiusmod cupidatat nulla et. Reprehenderit ex aliqua nisi est mollit minim ut."}
            </p>
            <Button>Explore</Button>
        </div>
    }
}