Input

use leptos::prelude::*;

use crate::components::ui::input::Input;

// TODO Fix 🐛 Input type="number" can take "e" as a valid input

#[component]
pub fn DemoInput() -> impl IntoView {
    view! {
        <div class="space-y-4 w-full max-w-lg">
            <h2 class="text-2xl font-bold">Input Demo</h2>

            <Input attr:placeholder="Default input" />
            <Input attr:r#type="email" attr:placeholder="Email input" />
            <Input attr:r#type="password" attr:placeholder="Password input" />
            <Input class="border-2 border-purple-500 focus:border-purple-700" attr:placeholder="Custom styled input" />
            <Input attr:r#type="number" attr:placeholder="Number input" />
        </div>
    }
}

use icons::{Check, Copy};
use leptos::prelude::*;

use crate::components::hooks::use_copy_clipboard::use_copy_clipboard;
use crate::components::ui::button::{Button, ButtonVariant};
use crate::components::ui::input::Input;

#[component]
pub fn DemoInputCopy() -> impl IntoView {
    let url = RwSignal::new("https://rust-ui.com/docs/components/input");
    let (copy_to_clipboard, copied) = use_copy_clipboard(None);

    let handle_copy = move |_| {
        copy_to_clipboard(url.get());
    };

    view! {
        <div class="flex gap-2">
            <Input prop:value=move || url().to_string() attr:readonly=true class="flex-1" />

            <Button variant=ButtonVariant::Outline on:click=handle_copy>
                {move || { if copied.get() { view! { <Check /> }.into_any() } else { view! { <Copy /> }.into_any() } }}
            </Button>
        </div>
    }
}