fix: make unavailable sites clickable

src/components/CoolDomain.vue

@@ -3,27 +3,38 @@ import type { Domain } from "@/types";
 
 defineProps<{
   domain: Domain;
-  size: string;
+  xl?: boolean;
 }>();
 </script>
 
 <template>
-  <div class="inline-block align-text-top">
-    <div v-if="domain.searching" class="status" :class="`status-${size}`"></div>
+  <div class="inline-block align-text-top me-2">
+    <div
+      v-if="domain.searching"
+      class="status"
+      :class="xl ? 'status-xl' : ''"
+    ></div>
     <div v-else-if="domain.available" class="inline-grid *:[grid-area:1/1]">
       <div
         class="status status-success animate-ping"
-        :class="`status-${size}`"
+        :class="xl ? 'status-xl' : ''"
       ></div>
-      <div class="status status-success" :class="`status-${size}`"></div>
+      <div class="status status-success" :class="xl ? 'status-xl' : ''"></div>
     </div>
     <div v-else class="inline-grid *:[grid-area:1/1]">
       <div
         class="status status-error animate-ping"
-        :class="`status-${size}`"
+        :class="xl ? 'status-xl' : ''"
       ></div>
-      <div class="status status-error" :class="`status-${size}`"></div>
+      <div class="status status-error" :class="xl ? 'status-xl' : ''"></div>
     </div>
   </div>
-  {{ domain.name }}
+  <span v-if="domain.available">{{ domain.name }}</span>
+  <a
+    v-else
+    :href="`https://${domain.name}`"
+    target="_blank"
+    class="underline"
+    >{{ domain.name }}</a
+  >
 </template>

src/components/PageHistory.vue

@@ -11,7 +11,6 @@ defineProps<{ factory: DomainFactory }>();
       <CoolDomain
         :id="domain.name + domain.searching + domain.available"
         :domain="domain"
-        size="md"
       ></CoolDomain>
       <span v-if="domain.searching"
         >&nbsp;<span class="loading loading-dots loading-xs"></span

src/components/PageInput.vue

@@ -54,7 +54,6 @@ function newDomain() {
       <CoolDomain
         :id="domain.name + domain.searching + domain.available"
         :domain="domain"
-        size="md"
       ></CoolDomain>
       <span v-if="domain.searching"
         >&nbsp;<span class="loading loading-dots loading-xs"></span

src/components/PageRandom.vue

@@ -84,7 +84,7 @@ watch(i18n.locale, newDomain);
   <div>
     <h1 class="font-bold" :class="getTextClass()">
       <span v-if="!domain" class="loading loading-spinner loading-xl"></span>
-      <span v-else><CoolDomain :domain="domain" size="xl" /></span>
+      <span v-else><CoolDomain :domain="domain" xl /></span>
     </h1>
     <p v-if="state === State.Loading" class="py-6">
       {{ $t("page_random.state.loading") }}

src/lib/factory.ts

@@ -68,7 +68,7 @@ export class DomainFactory {
         const word = this.randomWord(lang);
         const domain = this.randomDomain(word);
         if (domain) {
-          const output = { name: domain, searching: false, available: false };
+          const output = { name: domain, searching: false, available: true };
           this.history.push(output);
           resolve(output);
           return;
@@ -91,7 +91,7 @@ export class DomainFactory {
         ) {
           const domain = `${escapedWord.substring(0, escapedWord.length - tldEscaped.length)}.${tld}`;
           if (!domain.includes("-.")) {
-            const output = { name: domain, searching: false, available: false };
+            const output = { name: domain, searching: false, available: true };
             this.history.push(output);
             domains.push(output);
           }