feat: rubygems

web/src/components/Availability.js

@@ -130,6 +130,30 @@ export function ExistentialAvailability({
   )
 }
 
+export function CustomAvailability({
+  name,
+  target,
+  link,
+  prefix = '',
+  suffix = '',
+  icon,
+  children,
+}) {
+  const response = useFetch(target, null, { metadata: true })
+  const availability = children(response)
+
+  return (
+    <Result
+      name={name}
+      availability={availability}
+      link={link}
+      prefix={prefix}
+      suffix={suffix}
+      icon={icon}
+    />
+  )
+}
+
 const Container = styled.div`
   min-height: 1em;
   display: flex;

web/src/components/Cards.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { AvailabilityContainer } from './Availability'
 import { mobile } from '../util/css'
 
-export function Card({ title, nameList, alternativeList = [], children }) {
+export function Card({ title, nameList = [], alternativeList = [], children }) {
   const [revealAlternatives, setRevealAlternatives] = useState(false)
 
   function onClick() {
@@ -77,11 +77,10 @@ const CardList = styled.div`
 
 const ShowAlternativesButton = styled.div`
   display: inline-block;
-  margin-top: 10px;
   padding: 5px 0;
   border: none;
   border-bottom: 1px dashed black;
   cursor: pointer;
   font-family: monospace;
-  font-size: 1rem;
+  font-size: 0.8em;
 `

web/src/components/cards/RubyGemsCard.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { FaGem } from 'react-icons/fa'
+import { Card } from '../Cards'
+import { DedicatedAvailability } from '../Availability'
+
+export default function RubyGemsCard({ name }) {
+  return (
+    <Card
+      title="RubyGems"
+      key={name}
+      nameList={[name]}
+      alternativeList={[`${name.toLowerCase()}-rb`]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          service="rubygems"
+          link={`https://rubygems.org/gems/${name}`}
+          icon={<FaGem />}
+        />
+      )}
+    </Card>
+  )
+}