feat: add YouTube card

public/locales/en/translation.json

@@ -45,7 +45,8 @@
     "twitter": "Twitter",
     "cloudflare": "Cloudflare Pages",
     "chromeWebStore": "Chrome Web Store",
-    "firefoxAddons": "Firefox Add-ons"
+    "firefoxAddons": "Firefox Add-ons",
+    "youtube": "YouTube"
   },
   "showMore": "show more",
   "title": "Grab a slick name for your new app",

src/components/Welcome.tsx

@@ -14,6 +14,7 @@ import {
   FaTwitter,
   FaCloudflare,
   FaFirefoxBrowser,
+  FaYoutube,
 } from 'react-icons/fa';
 import { IoIosBeer, IoMdAppstore } from 'react-icons/io';
 import { MdDomain } from 'react-icons/md';
@@ -38,6 +39,7 @@ const supportedProviders: Record<string, React.ReactNode> = {
   github: <FaGithub />,
   gitlab: <FaGitlab />,
   twitter: <FaTwitter />,
+  youtube: <FaYoutube />,
   homebrew: <IoIosBeer />,
   npm: <RiNpmjsFill />,
   rust: <SiRust />,

src/components/cards/index.tsx

@@ -30,6 +30,7 @@ import SlackCard from './providers/Slack';
 import SubredditCard from './providers/Subreddit';
 import TwitterCard from './providers/Twitter';
 import VercelCard from './providers/Vercel';
+import YouTubeCard from './providers/YouTube';
 
 const Index: React.FC<{ query: string }> = ({ query }) => {
   const {
@@ -42,6 +43,7 @@ const Index: React.FC<{ query: string }> = ({ query }) => {
         <DomainCard query={query} />
         <GithubCard query={query} />
         <TwitterCard query={query} />
+        <YouTubeCard query={query} />
         <NpmCard query={query} />
         <HomebrewCard query={query} />
         <GitLabCard query={query} />

src/components/cards/providers/YouTube.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaYoutube } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const YouTubeCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    alphanumeric: false,
+    allowUnderscore: false,
+    allowHyphens: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [normalizedQuery];
+  const moreNames = [`${lowerCase}app`, `${lowerCase}team`, `${lowerCase}hq`];
+
+  return (
+    <Card title={t('providers.youtube')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`youtube.com/c/${name}`}
+            service="existence"
+            message={`Go to youtube.com/c/${name}`}
+            link={`https://www.youtube.com/c/${name}`}
+            icon={<FaYoutube />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default YouTubeCard;