anagram-finder/web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract form to separate component
Some checks are pending
tests / ci (push) Waiting to run
Details

Browse source
This commit is contained in:
myrmidex 2026-08-23 16:17:10 +02:00
parent faf8051f6c
commit d25b951a58
2 changed files with 71 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
resources/views/components/anagram-form.blade.php Normal file
View file

@ -0,0 +1,70 @@
@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">
&gt; 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

65
resources/views/index.blade.php
View file

@ -19,53 +19,7 @@
&gt; Anagram Finder
</h1>
<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">
&gt; 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' => isset($matches),
'w-full' => ! isset($matches),
])
>
[FIND WORDS]
</button>
@isset($matches)
<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>
@endisset
</div>
</form>
<x-anagram-form :anagram="$anagram ?? null" :has-results="isset($matches)" />
@isset($matches)
<hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-8">
@ -105,22 +59,5 @@ class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-bordeaux
</a>
</footer>
@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
</body>
</html>