From 1fd57416eb3a3c46da894dc293187d148ce6abce Mon Sep 17 00:00:00 2001
From: Dhravya <dhravyashah@gmail.com>
Date: Mon, 15 Apr 2024 10:21:37 -0700
Subject: [PATCH] get chrome extension button

---
 apps/web/src/app/MessagePoster.tsx        |  1 +
 apps/web/src/components/Sidebar/index.tsx |  7 +++++
 apps/web/src/lib/icons.tsx                | 34 +++++++++++++++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 apps/web/src/lib/icons.tsx

diff --git a/apps/web/src/app/MessagePoster.tsx b/apps/web/src/app/MessagePoster.tsx
index 9b7011a8..1abad1be 100644
--- a/apps/web/src/app/MessagePoster.tsx
+++ b/apps/web/src/app/MessagePoster.tsx
@@ -10,6 +10,7 @@ function MessagePoster({ jwt }: { jwt: string }) {
 
   return (
     <button
+      className="p-2"
       onClick={() => {
         if (typeof window === "undefined") return;
         window.postMessage({ jwt }, "*");
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index 17dd4cd7..af5fd222 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -8,6 +8,7 @@ import { Bin } from "@/assets/Bin";
 import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 import { signOut, useSession } from "next-auth/react";
 import MessagePoster from "@/app/MessagePoster";
+import Chrome from "@/lib/icons";
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
@@ -125,6 +126,12 @@ export default function Sidebar({
             selectedItem={selectedItem}
             setSelectedItem={setSelectedItem}
           />
+          <a
+            className="mb-4 flex items-center justify-center p-2 text-center text-sm text-sky-500"
+            href="https://chromewebstore.google.com/detail/supermemory/afpgkkipfdpeaflnpoaffkcankadgjfc?hl=en-GB&authuser=0"
+          >
+            <Chrome className="h-6 w-6" />
+          </a>
           <MessagePoster jwt={jwt} />
         </div>
         <AnimatePresence>
diff --git a/apps/web/src/lib/icons.tsx b/apps/web/src/lib/icons.tsx
new file mode 100644
index 00000000..51a4714e
--- /dev/null
+++ b/apps/web/src/lib/icons.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const Chrome = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid"
+    viewBox="0 0 190.5 190.5"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="M95.252 142.873c26.304 0 47.627-21.324 47.627-47.628s-21.323-47.628-47.627-47.628-47.627 21.324-47.627 47.628 21.323 47.628 47.627 47.628z"
+    />
+    <path
+      fill="#229342"
+      d="m54.005 119.07-41.24-71.43a95.227 95.227 0 0 0-.003 95.25 95.234 95.234 0 0 0 82.496 47.61l41.24-71.43v-.011a47.613 47.613 0 0 1-17.428 17.443 47.62 47.62 0 0 1-47.632.007 47.62 47.62 0 0 1-17.433-17.437z"
+    />
+    <path
+      fill="#fbc116"
+      d="m136.495 119.067-41.239 71.43a95.229 95.229 0 0 0 82.489-47.622A95.24 95.24 0 0 0 190.5 95.248a95.237 95.237 0 0 0-12.772-47.623H95.249l-.01.007a47.62 47.62 0 0 1 23.819 6.372 47.618 47.618 0 0 1 17.439 17.431 47.62 47.62 0 0 1-.001 47.633z"
+    />
+    <path
+      fill="#1a73e8"
+      d="M95.252 132.961c20.824 0 37.705-16.881 37.705-37.706S116.076 57.55 95.252 57.55 57.547 74.431 57.547 95.255s16.881 37.706 37.705 37.706z"
+    />
+    <path
+      fill="#e33b2e"
+      d="M95.252 47.628h82.479A95.237 95.237 0 0 0 142.87 12.76 95.23 95.23 0 0 0 95.245 0a95.222 95.222 0 0 0-47.623 12.767 95.23 95.23 0 0 0-34.856 34.872l41.24 71.43.011.006a47.62 47.62 0 0 1-.015-47.633 47.61 47.61 0 0 1 41.252-23.815z"
+    />
+  </svg>
+);
+export default Chrome;