feat: add instagram

web/public/locales/en/translation.json

@@ -12,6 +12,7 @@
     "rust": "Rust",
     "homebrew": "Homebrew",
     "linux": "Linux",
+    "instagram": "Instagram",
     "twitter": "Twitter",
     "slack": "Slack",
     "s3": "AWS S3",

web/public/locales/ja/translation.json

@@ -12,6 +12,7 @@
     "rust": "Rust",
     "homebrew": "Homebrew",
     "linux": "Linux",
+    "instagram": "Instagram",
     "twitter": "Twitter",
     "slack": "Slack",
     "s3": "AWS S3",

web/src/components/Welcome.tsx

@@ -12,6 +12,7 @@ import {
   FaGem,
   FaLinux,
   FaAppStore,
+  FaInstagram,
   FaTwitter,
   FaSlack,
   FaAws,
@@ -74,6 +75,9 @@ const Welcome: React.FC = () => {
         <ListItem>
           <FaLinux /> {t('providers.linux')}
         </ListItem>
+        <ListItem>
+          <FaInstagram /> {t('providers.instagram')}
+        </ListItem>
         <ListItem>
           <FaTwitter /> {t('providers.twitter')}
         </ListItem>

web/src/components/cards/index.tsx

@@ -12,6 +12,7 @@ import RubyGemsCard from './providers/RubyGems';
 import CratesioCard from './providers/Cratesio';
 import HomebrewCard from './providers/Homebrew';
 import LinuxCard from './providers/Linux';
+import InstagramCard from './providers/Instagram';
 import TwitterCard from './providers/Twitter';
 import SpectrumCard from './providers/Spectrum';
 import SlackCard from './providers/Slack';
@@ -43,6 +44,7 @@ const Index: React.FC<{query: string}> = ({query}) => {
         <OcamlCard query={query} />
         <HomebrewCard query={query} />
         <LinuxCard query={query} />
+        <InstagramCard query={query} />
         <TwitterCard query={query} />
         <SpectrumCard query={query} />
         <SlackCard query={query} />

web/src/components/cards/providers/Instagram.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {FaInstagram} from 'react-icons/fa';
+
+import {Card, Repeater, ExistentialAvailability} from '../core';
+
+const InstagramCard: React.FC<{query: string}> = ({query}) => {
+  const {t} = useTranslation();
+  const lowerCase = query.toLowerCase();
+
+  const names = [query];
+  const moreNames = [`${lowerCase}app`, `${lowerCase}_hq`, `get.${lowerCase}`];
+
+  return (
+    <Card title={t('providers.instagram')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <ExistentialAvailability
+            name={name}
+            target={`https://instagram.com/${name}`}
+            link={`https://instagram.com/${name}`}
+            message="Go to Instagram"
+            icon={<FaInstagram />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default InstagramCard;