recipes-leemorgan-dev/src/routes/+page.svelte

<script>
    let searchInput;

    $effect(()=>{
        searchInput?.focus();
    });
</script>

<form>
    <input type="text" placeholder="Search Recipes" bind:this={searchInput} required>

    <button type="submit" aria-label="Search recipes">
        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true">
            <path d="M17 17L21 21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </button>
</form>

<style>
    form{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: min(480px, 90vw);
        margin: 40vh auto 0;
        padding: 0.5rem 0.5rem 0.5rem 1.25rem;
        background: #ffffff;
        border-radius: 999px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    }

    input[type="text"]{
        flex: 1;
        border: none;
        outline: none;
        background: none;
        font-size: 1rem;
        color: #000000;
    }

    button{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        background: #000000;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s ease, transform 0.1s ease;
    }

    button:hover{
        background: #333333;
    }

    button:active{
        background: #555555;
        transform: scale(0.92);
    }
</style>