55 lines
2.9 KiB
PHP
55 lines
2.9 KiB
PHP
<div class="max-w-2xl mx-auto">
|
|
<div class="mb-6">
|
|
<h1 class="text-2xl font-bold text-t1">A/B Slug Generator</h1>
|
|
<p class="text-sm text-t3 mt-1">Generate memorable slug variants for A/B testing</p>
|
|
</div>
|
|
|
|
<div class="p-5 bg-s1 border border-white/[.06] rounded-xl space-y-4 mb-6">
|
|
<div>
|
|
<label class="block text-xs font-medium text-t2 mb-1.5">Target URL *</label>
|
|
<input wire:model="targetUrl" type="url" placeholder="https://example.com/landing-page"
|
|
class="block w-full px-3 py-2.5 bg-s2 border border-white/[.06] rounded-lg text-sm text-t1 placeholder-t3 focus:outline-none focus:ring-1 focus:ring-blue/50 focus:border-blue/50">
|
|
@error('targetUrl') <p class="mt-1 text-xs text-red">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-t2 mb-1.5">Number of variants</label>
|
|
<select wire:model="count"
|
|
class="px-3 py-2.5 bg-s2 border border-white/[.06] rounded-lg text-sm text-t1 focus:outline-none focus:ring-1 focus:ring-blue/50">
|
|
<option value="2">2</option>
|
|
<option value="3" selected>3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button wire:click="generate" wire:loading.attr="disabled" wire:target="generate"
|
|
class="w-full px-4 py-2.5 bg-accent-gradient text-white rounded-lg text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-60 flex items-center justify-center gap-2">
|
|
<span wire:loading.remove wire:target="generate">
|
|
<x-heroicon-o-sparkles class="w-4 h-4 inline mr-1" />
|
|
Generate Variants
|
|
</span>
|
|
<span wire:loading wire:target="generate" class="flex items-center gap-2">
|
|
<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
Generating…
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
@if($variants)
|
|
<div class="space-y-2">
|
|
<p class="text-xs text-t3 font-medium uppercase tracking-wide">Generated Variants</p>
|
|
@foreach($variants as $i => $variant)
|
|
<div class="flex items-center gap-3 p-3 bg-s1 border border-white/[.06] rounded-lg">
|
|
<span class="text-xs text-t3 w-5 font-mono">{{ chr(65 + $i) }}</span>
|
|
<span class="flex-1 font-mono text-sm text-t1">{{ $variant }}</span>
|
|
<span class="text-xs text-t3">nimu.li/<span class="text-blue">{{ $variant }}</span></span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|