1 files changed, 67 insertions, 0 deletions
diff --git a/docs/components/clients/Logo.tsx b/docs/components/clients/Logo.tsx
new file mode 100644
index 0000000..79ab9c2
--- /dev/null
+++ b/docs/components/clients/Logo.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import cn from "classnames";
+import Image from "next/image";
+import { TurboUser } from "./users";
+
+const DEFAULT_SIZE = {
+  width: 100,
+  height: 75,
+};
+
+export function Logo({
+  user,
+  theme,
+  isLink,
+}: {
+  user: TurboUser;
+  theme: "dark" | "light";
+  isLink: boolean;
+}) {
+  const styles = {
+    ...DEFAULT_SIZE,
+    ...user.style,
+  };
+  let numericWidth: number;
+  let numericHeight: number;
+  if (typeof styles.width === "number") {
+    numericWidth = styles.width;
+  }
+  if (typeof styles.height === "number") {
+    numericHeight = styles.height;
+  }
+  const logo = (
+    <Image
+      src={user.image.replace(
+        "/logos",
+        theme === "light" ? "/logos/white" : "/logos/color"
+      )}
+      alt={`${user.caption}'s Logo`}
+      width={numericWidth}
+      height={numericHeight}
+      priority={true}
+      style={styles}
+      className={cn("mx-8", {
+        "hidden dark:inline": theme !== "dark",
+        "dark:hidden inline": theme === "dark",
+      })}
+    />
+  );
+
+  if (isLink) {
+    return (
+      <a
+        href={user.infoLink}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn("flex justify-center item-center", {
+          "hidden dark:flex": theme !== "dark",
+          "dark:hidden flex": theme === "dark",
+        })}
+      >
+        {logo}
+      </a>
+    );
+  }
+
+  return logo;
+}