feat: spectrum

web/src/components/Icons.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const SpectrumIcon = () => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    stroke="currentColor"
+    stroke-width="0"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 14.5C6 15.3284 6.67157 16 7.5 16H9C12.866 16 16 19.134 16 23V24.5C16 25.3284 16.6716 26 17.5 26H24.5C25.3284 26 26 25.3284 26 24.5V23C26 13.6111 18.3889 6 9 6H7.5C6.67157 6 6 6.67157 6 7.5V14.5Z" />
+  </svg>
+)

web/src/components/Welcome.js

@@ -17,6 +17,7 @@ import {
 } from 'react-icons/fa'
 import { IoIosBeer } from 'react-icons/io'
 import { DiRust } from 'react-icons/di'
+import { SpectrumIcon } from './Icons'
 
 import { mobile } from '../util/css'
 
@@ -57,6 +58,9 @@ export default function Welcome() {
         <ListItem>
           <FaTwitter /> {t('providers.twitter')}
         </ListItem>
+        <ListItem>
+          <SpectrumIcon /> {t('providers.spectrum')}
+        </ListItem>
         <ListItem>
           <FaSlack /> {t('providers.slack')}
         </ListItem>

web/src/components/cards/SpectrumCard.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Card, Repeater, DedicatedAvailability } from '../Cards'
+import { SpectrumIcon } from '../Icons'
+
+export default function SpectrumCard({ query }) {
+  const { t } = useTranslation()
+  const names = [query]
+
+  return (
+    <Card title={t('providers.spectrum')}>
+      <Repeater items={names}>
+        {(name) => (
+          <>
+            <DedicatedAvailability
+              name={name}
+              service="spectrum"
+              message="Create Community"
+              link="https://spectrum.chat/new/community"
+              messageIfTaken="See community in Spectrum"
+              linkIfTaken={`https://spectrum.chat/${name}`}
+              icon={<SpectrumIcon />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  )
+}