feat: add linux card

web/src/App.js

@@ -14,6 +14,7 @@ import PypiCard from './components/cards/PypiCard'
 import S3Card from './components/cards/S3Card'
 import CratesioCard from './components/cards/CratesioCard'
 import RubyGemsCard from './components/cards/RubyGemsCard'
+import LinuxCard from './components/cards/LinuxCard'
 
 import { EventReporter } from './components/Analytics'
 import Welcome from './components/Welcome'
@@ -100,6 +101,7 @@ export default function App() {
               <TwitterCard name={query} />
               <SlackCard name={query} />
               <S3Card name={query} />
+              <LinuxCard name={query} />
             </Cards>
             <EventReporter query={query} />
           </SearchResult>

web/src/components/cards/LinuxCard.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { DiUbuntu } from 'react-icons/di'
+import { DiDebian } from 'react-icons/di'
+import { Card } from '../Cards'
+import { DedicatedAvailability } from '../Cards'
+
+export default function LinuxCard({ name }) {
+  const { t } = useTranslation()
+  const lowerCase = name.toLowerCase()
+
+  return (
+    <Card title={t('providers.linux')} nameList={[lowerCase]}>
+      {(name) => (
+        <>
+          <DedicatedAvailability
+            name={name}
+            service="launchpad"
+            link={`https://launchpad.net/ubuntu/+source/${name}`}
+            prefix="launchpad:"
+            icon={<DiUbuntu />}
+          />
+          <DedicatedAvailability
+            name={name}
+            service="debian"
+            link={`https://packages.debian.org/buster/${name}`}
+            prefix="debian:"
+            icon={<DiDebian />}
+          />
+        </>
+      )}
+    </Card>
+  )
+}