Punishments
PUNISHMENTS
<section class="rise">
    <h1 class="text-3xl font-medium tracking-tight md:text-4xl">Punishments</h1>
</section>

<section class="rise rise-1 mt-6 max-w-2xl">
    <form onsubmit="event.preventDefault(); redirect();" class="flex flex-col gap-3 sm:flex-row">
        <label class="ring-card relative flex h-10 flex-1 items-center gap-2 rounded-full bg-card px-3 transition-colors focus-within:bg-background focus-within:ring-2 focus-within:ring-ring/30">
            <svg class="size-4 text-muted-foreground" aria-hidden="true"><use href="#i-search"/></svg>
            <input id="uuid"
                   type="text"
                   autocomplete="off"
                   autofocus
                   placeholder="UUID or username"
                   class="h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground">
        </label>
        <button type="submit"
                class="inline-flex h-10 items-center justify-center gap-1.5 rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/85">
            Search
            <svg class="size-3.5" aria-hidden="true"><use href="#i-arrow-right"/></svg>
        </button>
    </form>
</section>

<script>
    function redirect() {
        const value = document.getElementById('uuid').value.trim();
        if (!value) return;
        window.location = '/punishments/' + encodeURIComponent(value);
    }
</script>