70 lines
2.5 KiB
PHP
70 lines
2.5 KiB
PHP
@props([
|
|
'anagram' => null,
|
|
'hasResults' => false,
|
|
])
|
|
|
|
<form method="POST" action="{{ route('find') }}" class="space-y-4 mb-8">
|
|
@csrf
|
|
|
|
<label for="anagram" class="block text-primary font-mono text-xs uppercase tracking-wider">
|
|
> Letters
|
|
</label>
|
|
<input
|
|
id="anagram"
|
|
name="anagram"
|
|
type="text"
|
|
value="{{ old('anagram', $anagram ?? '') }}"
|
|
placeholder="eamstoxil"
|
|
autocomplete="off"
|
|
autocapitalize="off"
|
|
autocorrect="off"
|
|
spellcheck="false"
|
|
autofocus
|
|
required
|
|
class="w-full bg-black border-bordeaux text-primary focus:border-primary font-mono text-3xl tracking-wider uppercase rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-primary/30 placeholder:normal-case transition-all glow-bordeaux px-4 py-3"
|
|
>
|
|
@error('anagram')
|
|
<p class="text-primary font-mono text-xs">{{ $message }}</p>
|
|
@enderror
|
|
|
|
<div class="flex gap-3">
|
|
<button
|
|
type="submit"
|
|
id="submit-btn"
|
|
@class([
|
|
'bg-black hover:bg-primary text-primary hover:text-black font-mono text-sm font-bold border-primary rounded-none border-2 uppercase tracking-wider transition-all glow-bordeaux cursor-pointer px-4 py-2 disabled:cursor-not-allowed disabled:bg-black disabled:text-primary/30 disabled:border-primary/30 disabled:shadow-none',
|
|
'w-2/3' => $hasResults,
|
|
'w-full' => ! $hasResults,
|
|
])
|
|
>
|
|
[FIND WORDS]
|
|
</button>
|
|
|
|
@if ($hasResults)
|
|
<a
|
|
href="{{ route('home') }}"
|
|
class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-bordeaux text-primary/60 hover:text-primary font-mono text-sm font-bold border-bordeaux hover:border-primary rounded-none border-2 glow-bordeaux uppercase tracking-wider transition-all px-4 py-2"
|
|
>
|
|
[CLEAR]
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
|
|
@isset($anagram)
|
|
<script>
|
|
(() => {
|
|
const input = document.getElementById('anagram');
|
|
const button = document.getElementById('submit-btn');
|
|
const original = @json($anagram);
|
|
|
|
const sync = () => {
|
|
const value = input.value.trim().toLowerCase();
|
|
button.disabled = value === original.trim().toLowerCase() || value === '';
|
|
};
|
|
|
|
input.addEventListener('input', sync);
|
|
sync();
|
|
})();
|
|
</script>
|
|
@endisset
|