Files
ladill-link/resources/views/links/create.blade.php
T
isaacclad 86cac606e0
Deploy Ladill Link / deploy (push) Successful in 1m40s
Surface destination edits as the core dynamic short-link feature.
Move destination editing to the top of the link page, clarify that the short URL never changes, prevent caches from pinning old redirects, and test that later destination updates take effect immediately.
2026-07-16 20:12:14 +00:00

60 lines
3.5 KiB
PHP

<x-user-layout>
<x-slot name="title">Create Link</x-slot>
<div class="mx-auto max-w-xl space-y-6" x-data="{ slug: @js(old('custom_slug', '')) }">
<div>
<h1 class="text-2xl font-semibold text-slate-900">Create short link</h1>
<p class="mt-1 text-sm text-slate-500">
Your link will be published on <span class="font-medium text-emerald-700">{{ $publicHost }}</span>.
GHS {{ number_format($pricePerLink, 2) }} will be debited from your wallet.
</p>
</div>
@if($errors->has('balance'))
<div class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
{{ $errors->first('balance') }}
</div>
@endif
<form method="POST" action="{{ route('user.links.store') }}" class="space-y-5 rounded-xl border border-slate-200 bg-white p-6">
@csrf
<div>
<label for="destination_url" class="block text-sm font-medium text-slate-700">Destination URL</label>
<input type="url" name="destination_url" id="destination_url" value="{{ old('destination_url') }}" required
placeholder="https://example.com/page"
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500">
<p class="mt-1.5 text-xs text-slate-500">You can change this later. Your short link stays the same only where it points updates.</p>
@error('destination_url')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
</div>
<div>
<label for="label" class="block text-sm font-medium text-slate-700">Label (optional)</label>
<input type="text" name="label" id="label" value="{{ old('label') }}"
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500">
</div>
<div>
<label for="custom_slug" class="block text-sm font-medium text-slate-700">Custom slug (optional)</label>
<div class="mt-1 flex rounded-lg shadow-sm">
<span class="inline-flex items-center rounded-l-lg border border-r-0 border-slate-300 bg-slate-50 px-3 text-sm text-slate-500">{{ $publicHost }}/</span>
<input type="text" name="custom_slug" id="custom_slug" value="{{ old('custom_slug') }}"
pattern="[a-z0-9][a-z0-9-]{1,18}[a-z0-9]"
x-model="slug"
class="block w-full rounded-r-lg border-slate-300 focus:border-emerald-500 focus:ring-emerald-500">
</div>
<p class="mt-1.5 text-xs text-slate-400" x-show="slug" x-cloak>
Preview: <span class="font-medium text-emerald-700" x-text="'{{ $publicBaseUrl }}/' + slug"></span>
</p>
@error('custom_slug')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
</div>
<div class="flex justify-end gap-3">
<a href="{{ route('user.links.index') }}" class="rounded-lg px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50">Cancel</a>
<button type="submit" class="btn-primary">
Create link GHS {{ number_format($pricePerLink, 2) }}
</button>
</div>
</form>
</div>
</x-user-layout>