feat: input and history pages

src/components/PageInput.vue

@@ -2,15 +2,19 @@
 import { ref } from "vue";
 import type { DomainFactory } from "@/lib/factory";
 import CoolDomain from "./CoolDomain.vue";
+import type { Domain } from "@/types";
+import { isDomainAvailable } from "@/lib/whois";
 
-const props = defineProps<{ lang: string; factory: DomainFactory }>();
+const props = defineProps<{ factory: DomainFactory }>();
 
 const input = ref<string>("");
-const domains = ref<string[]>([]);
+const domains = ref<Domain[]>([]);
+const noDomain = ref<boolean>(false);
 
 function start() {
+  noDomain.value = false;
+  domains.value.splice(0, domains.value.length);
   if (input.value.length) {
-    domains.value.splice(0, domains.value.length);
     newDomain();
   }
 }
@@ -18,15 +22,17 @@ function start() {
 function newDomain() {
   const startInput = input.value;
   props.factory
-    .nextFromWord(input.value)
-    .then((domain) => {
+    .allFromWord(input.value)
+    .then((newDomains: Domain[]) => {
       if (input.value === startInput) {
-        domains.value.push(domain);
-        newDomain();
+        domains.value.push(...newDomains);
+        domains.value.forEach((domain) => void isDomainAvailable(domain));
       }
     })
     .catch(() => {
-      // TODO handle 0 domains
+      if (input.value === startInput && !domains.value.length) {
+        noDomain.value = true;
+      }
     });
 }
 </script>
@@ -37,25 +43,34 @@ function newDomain() {
       <input
         v-model.trim="input"
         type="text"
-        :placeholder="
-          lang === 'french'
-            ? 'Écrit un mot ou une phrase'
-            : 'Type a word or a phrase'
-        "
+        :placeholder="$t('page_input.placeholder')"
         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>
+      {{ $t("button.generate") }}
     </button>
-    <p v-for="(domain, i) in domains" :key="`domain-${i}`" class="pt-6">
+    <p v-for="(domain, i) in domains" :key="`domain-${i}`" class="pt-3">
       <CoolDomain
+        :id="domain.name + domain.searching + domain.available"
         :domain="domain"
-        :available="false"
-        :searching="false"
         size="md"
       ></CoolDomain>
+      <span v-if="domain.searching"
+        >&nbsp;<span class="loading loading-dots loading-xs"></span
+      ></span>
+      <span v-else-if="domain.available"
+        >&nbsp;{{ $t("seems") }}
+        <a
+          :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.name?.split('.')[1]}`"
+          target="_blank"
+          class="underline"
+          >{{ $t("available") }}</a
+        ></span
+      ><span v-else>&nbsp;{{ $t("is_unavailable") }}</span>
+    </p>
+    <p v-if="noDomain" class="pt-6">
+      {{ $t("page_input.not_found") }}
     </p>
   </div>
 </template>