owlboard-svelte/src/lib/islands/input-island.svelte

<script>
    import Island from "$lib/islands/island.svelte";
    export let variables = {
        title: "Uninitialised",
        action: "/",
        placeholder: "Uninitialised",
        queryName: "uninitiailsed"
    };
</script>

<Island {variables}>
<form action={variables.action}>
    <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
    <br>
    <button class="form-button" type="submit">Submit</button>
</form>
</Island>

<style>
    .form-input {
        width: 75%;
        height: 32px;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius: 50px;
        border: none;
        text-align: center;
        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        text-transform: uppercase;
        font-size: 15px;
    }
    .form-button {
        width: 50%;
        margin-bottom: 5px;
        margin-top: 5px;
        border: none;
        border-radius: 20px;
        padding: 5px;
        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 16px;
        font-weight: 400;
        background-color: var(--main-bg-color);
        color: var(--link-color);
    }
</style>