🎉 init

app/components/NameForm.vue

@@ -0,0 +1,36 @@
+<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>