feat: subreddit card

src/components/cards/index.tsx

@@ -24,6 +24,7 @@ import RubyGemsCard from './providers/RubyGems';
 import S3Card from './providers/S3';
 import SlackCard from './providers/Slack';
 import SpectrumCard from './providers/Spectrum';
+import SubredditCard from './providers/Subreddit';
 import TwitterCard from './providers/Twitter';
 import VercelCard from './providers/Vercel';
 
@@ -53,6 +54,7 @@ const Index: React.FC<{ query: string }> = ({ query }) => {
         <SlackCard query={query} />
         {/* <InstagramCard query={query} /> */}
         <SpectrumCard query={query} />
+        <SubredditCard query={query} />
         <S3Card query={query} />
         <FirebaseCard query={query} />
       </Cards>

src/components/cards/providers/Subreddit.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaReddit } from 'react-icons/fa';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const SubredditCard: React.FC<{ query: string }> = ({ name }) => {
+  const { t } = useTranslation();
+  const lowerCase = name.toLowerCase();
+
+  const names = [name];
+  const moreNames = [
+    `get${lowerCase}`,
+    `${lowerCase}-team`,
+  ];
+
+  return (
+    <Card title={t('providers.reddit')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            service="reddit" // route to http://namae.dev/api/services/reddit/<query> which is /api/services/reddit/[query].ts on GitHub
+            link={`https://reddit.com/r/${name}`}
+            prefix="reddit.com/r/"
+            icon={<FaReddit />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};