Typing Effect

use leptos::prelude::*;

use crate::components::extensions::typing_effect::TypingText;

#[component]
pub fn DemoTypingEffect() -> impl IntoView {
    view! {
        <style>
            "@keyframes typing_effect {
                0% {
                    width: 0%;
                    visibility: hidden;
                }
                100% {
                    width: 100%;
                }
            }
            @keyframes blink_typing {
                50% {
                    border-color: transparent;
                }
                100% {
                    border-color: white;
                }
            }
            .animate-typing_effect {
                animation: typing_effect 2s steps(20) infinite alternate, blink_typing .7s infinite;
            }"
        </style>

        <div class="w-max">
            <TypingText>"Hello World"</TypingText>
        </div>
    }
}