40 lines
1.3 KiB
Vue
40 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{ title?: string; buttonLabel?: string }>();
|
|
const emit = defineEmits<{ submit: [name: string] }>();
|
|
|
|
const name = ref('');
|
|
|
|
function onSubmit() {
|
|
if (!name.value.trim()) return;
|
|
emit('submit', name.value.trim());
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form class="space-y-3" @submit.prevent="onSubmit">
|
|
<div>
|
|
<label
|
|
for="name"
|
|
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
|
|
>
|
|
{{ props.title ?? "What's your name?" }}
|
|
</label>
|
|
<input
|
|
id="name"
|
|
v-model="name"
|
|
type="text"
|
|
autocomplete="name"
|
|
required
|
|
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
|
|
placeholder="Your name"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600"
|
|
>
|
|
{{ props.buttonLabel ?? 'Continue' }}
|
|
</button>
|
|
</form>
|
|
</template>
|