feat: input page (wip)

src/components/PageInput.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { DomainFactory } from "@/lib/factory";
+import CoolDomain from "./CoolDomain.vue";
+
+const props = defineProps<{ lang: string; factory: DomainFactory }>();
+
+const input = ref<string>("");
+const domains = ref<string[]>([]);
+
+function start() {
+  if (input.value.length) {
+    domains.value.splice(0, domains.value.length);
+    newDomain();
+  }
+}
+
+function newDomain() {
+  const startInput = input.value;
+  props.factory
+    .nextFromWord(input.value)
+    .then((domain) => {
+      if (input.value === startInput) {
+        domains.value.push(domain);
+        newDomain();
+      }
+    })
+    .catch(() => {
+      // TODO handle 0 domains
+    });
+}
+</script>
+
+<template>
+  <div>
+    <div class="pb-6">
+      <input
+        v-model.trim="input"
+        type="text"
+        :placeholder="
+          lang === 'french'
+            ? 'Écrit un mot ou une phrase'
+            : 'Type a word or a phrase'
+        "
+        class="input input-xl w-full"
+      />
+    </div>
+    <button class="btn btn-primary" :disabled="!input" @click="start">
+      <span v-if="lang === 'french'">Génerer</span>
+      <span v-else>Generate</span>
+    </button>
+    <p v-for="(domain, i) in domains" :key="`domain-${i}`" class="pt-6">
+      <CoolDomain
+        :domain="domain"
+        :available="false"
+        :searching="false"
+        size="md"
+      ></CoolDomain>
+    </p>
+  </div>
+</template>