justinandClaude Opus 4.6
416b25fca9
Full CRUD for vets, sponsors, mentors, volunteer applications, and users. Includes approve/deny flows for pending users, role management, and password reset. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
66 lines
3.2 KiB
Svelte
66 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
let { form } = $props();
|
|
let submitting = $state(false);
|
|
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
|
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
|
</script>
|
|
|
|
<svelte:head><title>Add Sponsor — Admin</title></svelte:head>
|
|
|
|
<div class="max-w-2xl">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<a href="/admin/sponsors" class="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
|
|
</a>
|
|
<h1 class="text-2xl font-bold text-gray-900">Add Sponsor</h1>
|
|
</div>
|
|
|
|
{#if form?.error}
|
|
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
|
|
{/if}
|
|
|
|
<form method="POST" use:enhance={() => { submitting = true; return async ({ update }) => { submitting = false; await update(); }; }} class="space-y-6">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 space-y-4">
|
|
<div>
|
|
<label for="name" class={labelClass}>Name <span class="text-red-500">*</span></label>
|
|
<input type="text" id="name" name="name" required class={inputClass} />
|
|
</div>
|
|
<div>
|
|
<label for="tier" class={labelClass}>Tier <span class="text-red-500">*</span></label>
|
|
<select id="tier" name="tier" required class={inputClass}>
|
|
<option value="top_dog">Top Dog</option>
|
|
<option value="wagging_tails">Wagging Tails</option>
|
|
<option value="wet_noses">Wet Noses</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="logoUrl" class={labelClass}>Logo URL</label>
|
|
<input type="url" id="logoUrl" name="logoUrl" class={inputClass} placeholder="https://..." />
|
|
</div>
|
|
<div>
|
|
<label for="websiteUrl" class={labelClass}>Website URL</label>
|
|
<input type="url" id="websiteUrl" name="websiteUrl" class={inputClass} placeholder="https://..." />
|
|
</div>
|
|
<div>
|
|
<label for="description" class={labelClass}>Description</label>
|
|
<textarea id="description" name="description" rows="3" class="{inputClass} resize-y"></textarea>
|
|
</div>
|
|
<div>
|
|
<label for="sortOrder" class={labelClass}>Sort Order</label>
|
|
<input type="number" id="sortOrder" name="sortOrder" value="0" min="0" class={inputClass} />
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" id="active" name="active" checked class="w-5 h-5 rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
|
<label for="active" class="text-sm font-medium text-gray-700">Active (visible on website)</label>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end gap-3">
|
|
<a href="/admin/sponsors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
|
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
|
{submitting ? 'Adding...' : 'Add Sponsor'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|