<script lang="ts">
    import Input from "$lib/components/input.svelte";
    import { DatabaseIcon } from "$lib/components/icons";
</script>

<section>
    <h2>Default</h2>
    <Input label="Input me" placeholder="Hello" />
</section>

<section>
    <h2>With icon</h2>
    <Input label="Input me" placeholder="Hello" icon={DatabaseIcon} />
</section>

<section>
    <h2>With corner hint</h2>
    <Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" />
</section>

<section>
    <h2>Disabled</h2>
    <Input label="No" placeholder="Sorry" disabled />
</section>

<section>
    <h2>Errored</h2>
    <Input
        label="No"
        placeholder="Sorry"
        errorText="That's not right"
        icon={DatabaseIcon}
    />
</section>

<section>
    <h2>Help</h2>
    <Input label="Go ahead" placeholder="Write here" helpText="Write above" />
</section>
<section>
    <h2>Addon</h2>
    <Input
        label="Go ahead"
        placeholder="Write here"
        helpText="Write above"
        addon="To the right"
    />
</section>
