OTP

use leptos::prelude::*;

#[component]
pub fn DemoOtp() -> impl IntoView {
    view! {
        <script src="/components/otp.js" />

        <div class="flex flex-col justify-center items-center space-y-5 w-full h-[300px] bg-neutral-500">
            <h3 class="text-3xl font-bold">Submit OTP</h3>
            <div class="flex gap-2.5 justify-center items-center" id="otp-container">
                <input
                    type="text"
                    maxlength="1"
                    class="w-16 h-16 text-xl font-semibold text-center text-gray-700 bg-gray-100 rounded-md border border-gray-300 transition-all focus:border-blue-500 outline-hidden"
                />
                <input
                    type="text"
                    maxlength="1"
                    class="w-16 h-16 text-xl font-semibold text-center text-gray-700 bg-gray-100 rounded-md border border-gray-300 transition-all focus:border-blue-500 outline-hidden"
                />
                <input
                    type="text"
                    maxlength="1"
                    class="w-16 h-16 text-xl font-semibold text-center text-gray-700 bg-gray-100 rounded-md border border-gray-300 transition-all focus:border-blue-500 outline-hidden"
                />
                <input
                    type="text"
                    maxlength="1"
                    class="w-16 h-16 text-xl font-semibold text-center text-gray-700 bg-gray-100 rounded-md border border-gray-300 transition-all focus:border-blue-500 outline-hidden"
                />
                <input
                    type="text"
                    maxlength="1"
                    class="w-16 h-16 text-xl font-semibold text-center text-gray-700 bg-gray-100 rounded-md border border-gray-300 transition-all focus:border-blue-500 outline-hidden"
                />
                <input
                    type="text"
                    maxlength="1"
                    class="w-16 h-16 text-xl font-semibold text-center text-gray-700 bg-gray-100 rounded-md border border-gray-300 transition-all focus:border-blue-500 outline-hidden"
                />
            </div>
        </div>
    }
}