45 lines
1.1 KiB
Svelte
45 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
let { eventData = $bindable(), errors = $bindable() } = $props<{
|
|
eventData: {
|
|
name: string;
|
|
date: string;
|
|
};
|
|
errors: Record<string, string>;
|
|
}>();
|
|
</script>
|
|
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Event details</h3>
|
|
|
|
<label for="eventName" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Event Name *
|
|
</label>
|
|
<input
|
|
id="eventName"
|
|
type="text"
|
|
bind:value={eventData.name}
|
|
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="Enter event name"
|
|
/>
|
|
{#if errors.name}
|
|
<p class="mt-1 text-sm text-red-600">{errors.name}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="eventDate" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Event Date *
|
|
</label>
|
|
<input
|
|
id="eventDate"
|
|
type="date"
|
|
bind:value={eventData.date}
|
|
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
{#if errors.date}
|
|
<p class="mt-1 text-sm text-red-600">{errors.date}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|