feat: second pass at sdk cards

breaking change: renaming GithubBanner to GithubCard

src/components/sdks/GitHubCard.module.css

@@ -0,0 +1,28 @@
+.version {
+  background: rgba(0, 164, 186, 0.15);
+  border-radius: 4px;
+  padding: 3px 8px;
+  gap: 4px;
+  font-weight: 500;
+  letter-spacing: 0.1px;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 140%;
+  color: #00a4ba;
+  margin-right: 8px;
+}
+
+.metadata {
+  display: inline-flex;
+  align-items: center;
+}
+.metadata p {
+  margin-right: 18px;
+  font-size: 12px;
+  line-height: 146%;
+  font-weight: 500;
+}
+
+.container {
+  display: flex !important;
+}

src/components/sdks/GitHubBanner.tsx → src/components/sdks/GitHubCard.tsx

@@ -1,30 +1,25 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 
-import styles from "./GitHubBanner.module.css";
-import { Card } from "../shared/Card";
+import styles from "./GithubCard.module.css";
 import { Button } from "../shared/Button";
 
-import GithubRepo from "@site/static/img/github-banner/repository.svg";
-import Star from "@site/static/img/github-banner/star.svg";
-import Contributor from "@site/static/img/github-banner/contributor.svg";
-import Github from "@site/static/img/github-banner/github.svg";
+import Star from "@site/static/img/github-card/star.svg";
+import Contributor from "@site/static/img/github-card/contributor.svg";
+import Github from "@site/static/img/github-card/github.svg";
+import { SdkCard } from "../shared/SdkCard";
 
-interface GitHubBanner {
+interface GithubCard {
   title: string;
   icon: string;
   organization: string;
   repository: string;
 }
 
-const placeholder = "loading";
+const placeholder = "Loading";
+const placeholderUrl = "https://www.basistheory.com/";
 
-export const GitHubBanner = ({
-  title,
-  icon,
-  organization,
-  repository,
-}: GitHubBanner) => {
+export const GithubCard = ({ title, organization, repository }: GithubCard) => {
   const [githubUrl, setGithubUrl] = useState<string>("");
   const [stargazersCount, setStargazersCount] = useState<number>(null);
   const [releaseName, setReleaseName] = useState<string>(null);
@@ -64,35 +59,28 @@ export const GitHubBanner = ({
   }, [organization, repository]);
 
   return (
-    <Card>
-      <div className={styles.icon}>
-        <p>{icon}</p>
-      </div>
-      <div className={styles.content}>
-        <h3>{title}</h3>
-
-        <div className={styles.repository}>
-          <p>
-            <GithubRepo /> {repository}
-          </p>
-        </div>
+    <SdkCard
+      className={styles.container}
+      title={title}
+      repository={repository}
+      metadata={
         <div className={styles.metadata}>
           <p className={styles.version}>{releaseName ?? placeholder}</p>
           <p>
-            <Star /> {stargazersCount ?? placeholder} Stars{" "}
+            <Star /> {stargazersCount ?? placeholder} Stars
           </p>
           <p>
             <Contributor /> {contributors ?? placeholder} Contributors
           </p>
         </div>
-      </div>
-      <div>
-        <a href={githubUrl ?? placeholder} target="_blank">
+      }
+      cta={
+        <a href={githubUrl ?? placeholderUrl} target="_blank">
           <Button>
             <Github /> See it in GitHub
           </Button>
         </a>
-      </div>
-    </Card>
+      }
+    />
   );
 };

src/components/shared/Button.module.css

@@ -12,6 +12,10 @@
   line-height: 24px;
 }
 
+.button:hover {
+  cursor: pointer;
+}
+
 .button svg {
   margin-right: 9px;
 }

src/components/shared/Card.module.css

@@ -1,10 +1,5 @@
 .container {
   background: var(--bt-card-background-color);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  align-content: space-between;
-  flex-wrap: wrap;
   padding: 24px;
   gap: 16px;
   box-shadow: var(--ifm-global-shadow-lw);

src/components/shared/Card.tsx

@@ -1,7 +1,20 @@
-import React, { PropsWithChildren } from "react";
+import clsx from "clsx";
+import React, {
+  DetailedHTMLProps,
+  HtmlHTMLAttributes,
+  PropsWithChildren,
+} from "react";
 
 import styles from "./Card.module.css";
 
-export const Card = ({ children }: PropsWithChildren) => (
-  <div className={styles.container}>{children}</div>
+export const Card = ({
+  children,
+  className,
+  ...otherProps
+}: PropsWithChildren<
+  DetailedHTMLProps<HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement>
+>) => (
+  <div {...otherProps} className={clsx([className, styles.container])}>
+    {children}
+  </div>
 );

src/components/sdks/GitHubBanner.module.css → src/components/shared/SdkCard.module.css

@@ -1,8 +1,17 @@
+.container {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 .icon {
-  border: 1px solid rgba(51, 71, 204, 0.12);
-  border-radius: 100%;
   margin-right: 24px;
-  padding: 56px;
+}
+
+.icon svg {
+  width: 100px;
+  height: 100px;
 }
 
 .icon p {
@@ -35,28 +44,3 @@
 .repository p svg {
   margin-right: 6px;
 }
-
-.metadata {
-  display: inline-flex;
-  align-items: center;
-}
-.metadata p {
-  margin-right: 18px;
-  font-size: 12px;
-  line-height: 146%;
-  font-weight: 500;
-}
-
-.version {
-  background: rgba(0, 164, 186, 0.15);
-  border-radius: 4px;
-  padding: 3px 8px;
-  gap: 4px;
-  font-weight: 500;
-  letter-spacing: 0.1px;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 140%;
-  color: #00a4ba;
-  margin-right: 8px;
-}

src/components/shared/SdkCard.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+
+import styles from "./SdkCard.module.css";
+import { Card } from "../shared/Card";
+
+import Package from "@site/static/img/sdk-card/package.svg";
+import Android from "@site/static/img/sdk-card/android.svg";
+import DotNet from "@site/static/img/sdk-card/dotNet.svg";
+import Go from "@site/static/img/sdk-card/go.svg";
+import Ios from "@site/static/img/sdk-card/ios.svg";
+import Node from "@site/static/img/sdk-card/node.svg";
+import Python from "@site/static/img/sdk-card/python.svg";
+import ReactSvg from "@site/static/img/sdk-card/react.svg";
+import Terraform from "@site/static/img/sdk-card/terraform.svg";
+import clsx from "clsx";
+
+interface SdkCard {
+  title: string;
+  repository: string;
+  metadata?: ReactNode;
+  cta?: ReactNode;
+  className: string;
+}
+
+export const SdkCard = ({
+  title,
+  repository,
+  metadata,
+  cta,
+  className,
+}: SdkCard) => {
+  const Icon = {
+    ".NET SDK": DotNet,
+    "Go SDK": Go,
+    "Python SDK": Python,
+    "Terraform SDK": Terraform,
+    "Node.js SDK": Node,
+    "React SDK": ReactSvg,
+    "Android SDK": Android,
+    "iOS SDK": Ios,
+  }[title];
+
+  return (
+    <Card className={clsx([className, styles.container])}>
+      <div className={styles.icon}>
+        <Icon />
+      </div>
+      <div className={styles.content}>
+        <h3>{title}</h3>
+        <div className={styles.repository}>
+          <p>
+            <Package /> {repository}
+          </p>
+        </div>
+        {metadata && <div className={styles.metadata}>{metadata}</div>}
+      </div>
+      {cta && <div>{cta}</div>}
+    </Card>
+  );
+};