Chrome extension banner (#74)

* Added chrome extension banner * Only show the chrome banner when in Chrome Co-authored-by: James Ritchie <james@jamesritchie.co.uk>
2022-06-06 14:11:20 +01:00
parent 1b42269739
commit fa7010da0b
6 changed files with 93 additions and 4 deletions
@@ -0,0 +1,20 @@
+import { ChromeExtensionBadge } from "../Icons/ChromeExtensionBadge";
+import { Body } from "../Primitives/Body";
+
+export function HomeChromeExtensionPrompt() {
+  return (
+    <div className="flex items-center justify-center w-full py-3 bg-indigo-600">
+      <div className="flex items-center">
+        <Body className="mr-3 text-xl text-white">
+          Try the new Chrome Extension 👉
+        </Body>
+        <a
+          href="https://chrome.google.com/webstore/detail/json-hero/dneionnnnjnofppmhcccbiaklandilch"
+          target="_blank"
+        >
+          <ChromeExtensionBadge />
+        </a>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+export function ChromeExtensionBadge() {
+  return (
+    <img src="../images/chrome-extension-badge.png" className="h-14"></img>
+  );
+}
@@ -7,13 +7,38 @@ import { HomeInfoBoxSection } from "~/components/Home/HomeInfoBoxSection";
 import { HomeSearchSection } from "~/components/Home/HomeSearchSection";
 import { HomeFooter } from "~/components/Home/HomeFooter";
 import { GithubBanner } from "~/components/Home/HomeGithubBanner";
+import { HomeChromeExtensionPrompt } from "~/components/Home/HomeChromeExtensionPrompt";
+import { LoaderFunction, useLoaderData } from "remix";
+import userAgentParser from "ua-parser-js";
+
+type LoaderData = {
+  userAgent: ReturnType<typeof userAgentParser>;
+};
+
+export const loader: LoaderFunction = async ({
+  request,
+}): Promise<LoaderData> => {
+  const rawUserAgent = request.headers.get("user-agent") || "";
+  const userAgent = userAgentParser(rawUserAgent);
+
+  return {
+    userAgent,
+  };
+};

 export default function Index() {
+  const { userAgent } = useLoaderData<LoaderData>();
+
  return (
    <div className="overflow-x-hidden">
      <HomeHeader fixed={true} />
      <HomeHeroSection />
-      <GithubBanner />
+      {userAgent.browser.name === "Chrome" ? (
+        <HomeChromeExtensionPrompt />
+      ) : (
+        <GithubBanner />
+      )}
+
      <HomeInfoBoxSection />
      <HomeEdgeCasesSection />
      <HomeSearchSection />