dev: initial attempt

components/cards/providers/Domains.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { MdDomain } from 'react-icons/md';
+import { normalize } from '../../../util/text';
+import { zones } from '../../../util/zones';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+export interface DomainrResponse {
+  results: {
+    domain: string;
+    host: string;
+    subdomain: string;
+    zone: string;
+    path: string;
+    registerURL: string;
+  }[];
+}
+
+// function fetcher(url: string) {
+//   return fetch(url, {}).then((res) => res.json());
+// }
+
+const DomainCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    alphanumeric: false,
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const domainHackSuggestions = zones
+    .map((zone) => new RegExp(`${zone}$`).exec(lowerCase.slice(1)))
+    .filter((s): s is RegExpExecArray => s !== null)
+    .map(
+      (m) =>
+        lowerCase.substring(0, m.index + 1) +
+        '.' +
+        lowerCase.substring(m.index + 1)
+    );
+
+  // const { data } = useSWR<DomainrResponse>(
+  //   `/api/list/domain/${encodeURIComponent(query)}`,
+  //   fetcher
+  // );
+
+  // const cctldSuggestions =
+  //   data?.results
+  //     ?.filter((res) => res.subdomain !== '' && res.path === '')
+  //     ?.map((res) => res.domain) ?? [];
+
+  const names =
+    // use Set() to eliminate dupes
+    new Set([
+      ...['com', 'org', 'app', 'io'].map((tld) => lowerCase + '.' + tld),
+      ...domainHackSuggestions,
+    ]);
+
+  const moreNames = new Set([
+    `${lowerCase}app.com`,
+    `get${lowerCase}.com`,
+    `join${lowerCase}.com`,
+    ...[
+      'dev',
+      'co',
+      'ai',
+      'sh',
+      'rs',
+      'cloud',
+      'tools',
+      'build',
+      'run',
+      'design',
+      'directory',
+      'guru',
+      'ninja',
+      'info',
+      'biz',
+      'eu',
+    ].map((tld) => lowerCase + '.' + tld),
+  ]);
+
+  for (const name of moreNames) {
+    if (names.has(name)) {
+      moreNames.delete(name);
+    }
+  }
+
+  return (
+    <Card title={t('providers.domains')}>
+      <Repeater items={Array.from(names)} moreItems={Array.from(moreNames)}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            message={`Go to ${name}`}
+            service="domain"
+            link={'http://' + name}
+            icon={<MdDomain />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default DomainCard;