chore: even more alternatives

src/App.js

@@ -43,13 +43,13 @@ export default function App() {
           <CardHolder>
             <GithubCard name={query} />
             <DomainCard name={query} />
-            <HomebrewCard name={query} />
             <TwitterCard name={query} />
-            <SlackCard name={query} />
+            <HomebrewCard name={query} />
             <NpmCard name={query} />
-            <JsOrgCard name={query} />
             <PypiCard name={query} />
             <CratesioCard name={query} />
+            <JsOrgCard name={query} />
+            <SlackCard name={query} />
             <S3Card name={query} />
           </CardHolder>
         </Result>

src/components/Card.js

@@ -115,7 +115,14 @@ export function Alternatives({ nameList, children }) {
       {show ? (
         nameList.map((name) => (
           <ErrorBoundary>
-            <Suspense fallback={<BarLoader />}>{children(name)}</Suspense>
+            <Suspense
+              fallback={
+                <ItemContainer>
+                  <BarLoader />
+                </ItemContainer>
+              }>
+              {children(name)}
+            </Suspense>
           </ErrorBoundary>
         ))
       ) : (

src/components/CratesioCard.js

@@ -3,13 +3,15 @@ import { DiRust } from 'react-icons/di'
 import { Card, CardTitle, DedicatedAvailability } from './Card'
 
 export default function CratesioCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
   return (
-    <Card key={name}>
+    <Card key={lowerCase}>
       <CardTitle>crates.io (Rust)</CardTitle>
       <DedicatedAvailability
-        name={name}
+        name={lowerCase}
         provider="cratesio"
-        url={`https://crates.io/crates/${name}`}
+        url={`https://crates.io/crates/${lowerCase}`}
         icon={<DiRust />}
       />
     </Card>

src/components/DomainCard.js

@@ -1,29 +1,46 @@
 import React from 'react'
-import { Card, CardTitle, DedicatedAvailability } from './Card'
+import { Card, CardTitle, DedicatedAvailability, Alternatives } from './Card'
 import { FaMapSigns } from 'react-icons/fa'
 
 export default function DomainCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
   return (
-    <Card key={name}>
+    <Card key={lowerCase}>
       <CardTitle>Domain</CardTitle>
       <DedicatedAvailability
-        name={`${name}.app`}
+        name={`${lowerCase}.app`}
         provider="domain"
-        url={`https://domainr.com/?q=${name}.app`}
+        url={`https://domainr.com/?q=${lowerCase}.app`}
         icon={<FaMapSigns />}
       />
       <DedicatedAvailability
-        name={`${name}.dev`}
+        name={`${lowerCase}.dev`}
         provider="domain"
-        url={`https://domainr.com/?q=${name}.dev`}
+        url={`https://domainr.com/?q=${lowerCase}.dev`}
         icon={<FaMapSigns />}
       />
       <DedicatedAvailability
-        name={`${name}.org`}
+        name={`${lowerCase}.org`}
         provider="domain"
-        url={`https://domainr.com/?q=${name}.org`}
+        url={`https://domainr.com/?q=${lowerCase}.org`}
         icon={<FaMapSigns />}
       />
+      <Alternatives
+        nameList={[
+          `${lowerCase}app.com`,
+          `${lowerCase}.build`,
+          `${lowerCase}.ai`,
+        ]}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            provider="domain"
+            url={`https://domainr.com/?q=${name}.org`}
+            icon={<FaMapSigns />}
+          />
+        )}
+      </Alternatives>
     </Card>
   )
 }

src/components/GithubCard.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { FaGithub } from 'react-icons/fa'
 import { Card, CardTitle, DedicatedAvailability, Alternatives } from './Card'
+import { capitalize } from '../util/text'
 
 export default function GithubCard({ name }) {
   return (
@@ -14,7 +15,12 @@ export default function GithubCard({ name }) {
         icon={<FaGithub />}
       />
       <Alternatives
-        nameList={[`${name.toLowerCase()}hq`, `${name.toLowerCase()}-team`]}>
+        nameList={[
+          `${name.toLowerCase()}hq`,
+          `${name.toLowerCase()}-team`,
+          `${capitalize(name)}Team`,
+          `${name.toLowerCase()}-org`,
+        ]}>
         {(name) => (
           <DedicatedAvailability
             name={name}

src/components/HomebrewCard.js

@@ -3,19 +3,21 @@ import { Card, CardTitle, ExistenceAvailability } from './Card'
 import { IoIosBeer } from 'react-icons/io'
 
 export default function HomebrewCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
   return (
-    <Card key={name}>
+    <Card key={lowerCase}>
       <CardTitle>Homebrew</CardTitle>
       <ExistenceAvailability
-        name={name}
+        name={lowerCase}
-        target={`https://formulae.brew.sh/api/formula/${name}.json`}
+        target={`https://formulae.brew.sh/api/formula/${lowerCase}.json`}
-        url={`https://formulae.brew.sh/formula/${name}`}
+        url={`https://formulae.brew.sh/formula/${lowerCase}`}
         icon={<IoIosBeer />}
       />
       <ExistenceAvailability
-        name={name}
+        name={lowerCase}
-        target={`https://formulae.brew.sh/api/cask/${name}.json`}
+        target={`https://formulae.brew.sh/api/cask/${lowerCase}.json`}
-        url={`https://formulae.brew.sh/cask/${name}`}
+        url={`https://formulae.brew.sh/cask/${lowerCase}`}
         suffix=" (Cask)"
         icon={<IoIosBeer />}
       />

src/components/JsOrgCard.js

@@ -3,13 +3,15 @@ import { FaJsSquare } from 'react-icons/fa'
 import { Card, CardTitle, DedicatedAvailability } from './Card'
 
 export default function JsOrgCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
   return (
-    <Card key={name}>
+    <Card key={lowerCase}>
       <CardTitle>js.org</CardTitle>
       <DedicatedAvailability
-        name={`${name}.js.org`}
+        name={`${lowerCase}.js.org`}
         provider="dns"
-        url={`https://${name}.js.org`}
+        url={`https://${lowerCase}.js.org`}
         icon={<FaJsSquare />}
       />
     </Card>

src/components/S3Card.js

@@ -3,13 +3,15 @@ import { Card, CardTitle, DedicatedAvailability } from './Card'
 import { FaAws } from 'react-icons/fa'
 
 export default function S3Card({ name }) {
+  const lowerCase = name.toLowerCase()
+
   return (
-    <Card key={name}>
+    <Card key={lowerCase}>
       <CardTitle>AWS S3</CardTitle>
       <DedicatedAvailability
-        name={name}
+        name={lowerCase}
         provider="s3"
-        url={`https://${name}.s3.amazonaws.com`}
+        url={`https://${lowerCase}.s3.amazonaws.com`}
         suffix=".s3.amazonaws.com"
         icon={<FaAws />}
       />

src/components/SlackCard.js

@@ -3,13 +3,15 @@ import { Card, CardTitle, DedicatedAvailability } from './Card'
 import { FaSlack } from 'react-icons/fa'
 
 export default function SlackCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
   return (
-    <Card key={name}>
+    <Card key={lowerCase}>
       <CardTitle>Slack</CardTitle>
       <DedicatedAvailability
-        name={name}
+        name={lowerCase}
         provider="slack"
-        url={`https://${name}.slack.com`}
+        url={`https://${lowerCase}.slack.com`}
         suffix=".slack.com"
         icon={<FaSlack />}
       />