Add links to ratemyopenapi

www/components/BinHeader.tsx

@@ -6,6 +6,7 @@ import RefreshIcon from "@/components/RefreshIcon";
 import ArrowIcon from "@/components/ArrowIcon";
 import cn from "classnames";
 import Button from "@/components/Button";
+import RMOLink from "@/components/RMOLink";
 
 const BinHeader = ({
   binUrl,
@@ -35,6 +36,7 @@ const BinHeader = ({
     </div>
     <div className="flex gap-4 px-4 items-center">
       <Button as="a" tabIndex={0} href="/">
+      <RMOLink />
         Create Bin
       </Button>
       <button

www/components/Header.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import HeaderImage from "../public/mockbin-header.png";
+import RMOLink from "@/components/RMOLink";
 
 const Header = () => {
   return (
@@ -9,6 +10,7 @@ const Header = () => {
         <Image width={360} height={132} alt="mockbin logo" src={HeaderImage} />
       </Link>
       <div className="flex gap-x-2 items-center">
+        <RMOLink />
         <a
           target="_blank"
           className="hidden sm:flex items-center gap-x-1 bg-[#5865F2] h-[31px] border border-[#464ec7] hover:bg-[#464ec7] p-2 py-[4px] rounded-[4px]"

www/components/RMOLink.tsx

@@ -0,0 +1,19 @@
+import ZuploLogo from "@/components/ZuploLogo";
+
+const RMOLink = () => {
+  return (
+    <a
+      href="https://ratemyopenapi.com"
+      target="_blank"
+      className="bg-gray-100 hover:bg-gray-200 text-[#333] h-[29px] p-2 py-[4px] rounded-[4px] font-bold flex gap-1 items-center duration-200"
+      title="ratemyopenapi - Upload your OpenAPI. We rate it."
+    >
+      <ZuploLogo width={16} height={16} />
+      <span>
+        rate<span className="text-gray-500">my</span>openapi
+      </span>
+    </a>
+  );
+};
+
+export default RMOLink;

www/components/ZuploLogo.tsx

@@ -0,0 +1,25 @@
+import { type SVGProps } from "react";
+
+const ZuploLogo = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="33"
+      height="33"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M17.4996 14.8807H10.7145L17.9438 7.6388C18.012 7.57049 18.0584 7.48346 18.0772 7.38874C18.096 7.29402 18.0863 7.19583 18.0495 7.10661C18.0126 7.01738 17.9501 6.94113 17.8699 6.88745C17.7898 6.83378 17.6956 6.80514 17.5992 6.8051H6.11754V2.00036H18.7113C19.6358 1.98909 20.5445 2.24064 21.3321 2.72586C22.1196 3.21108 22.7537 3.91006 23.1607 4.7417C23.5809 5.63114 23.7159 6.6291 23.5473 7.59851C23.3786 8.56792 22.9145 9.46124 22.2186 10.1558L17.4996 14.8807Z"
+        fill="black"
+      ></path>
+      <path
+        d="M6.11759 9.11932H12.903L5.6882 16.3466C5.61889 16.4161 5.57171 16.5047 5.5526 16.601C5.5335 16.6974 5.54335 16.7972 5.58087 16.888C5.61839 16.9788 5.68187 17.0564 5.76338 17.111C5.8449 17.1656 5.94078 17.1948 6.03885 17.1949H17.4881V21.9996H4.90654C3.98203 22.0108 3.07337 21.7592 2.28584 21.274C1.4983 20.7888 0.864192 20.0899 0.457142 19.2583C0.0369623 18.3688 -0.0980297 17.3708 0.070712 16.4014C0.239454 15.432 0.703693 14.5387 1.39959 13.8442L6.11759 9.11932Z"
+        fill="#6C727F"
+      ></path>
+    </svg>
+  );
+};
+
+export default ZuploLogo;

www/pages/index.tsx

@@ -237,6 +237,16 @@ const Index = () => {
           )}
         </div>
       </div>
+      <div className="mt-2 text-end duration-200 opacity-50 hover:opacity-100">
+        &raquo;{" "}
+        <a href="https://ratemyopenapi.com" target="_blank">
+          <span className="font-bold">
+            rate<span className="text-gray-500">my</span>openapi
+          </span>{" "}
+          – Upload your OpenAPI. We rate it.{" "}
+          <span className="text-sm italic">(shameless plug)</span>
+        </a>
+      </div>
     </Frame>
   );
 };