From 86a8b719b6bee363c1ab376609334c2cdc72f41a Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Wed, 3 May 2023 19:59:56 +0200
Subject: [PATCH] use next/image for profile images

---
 src/assets/default profile icon.jpg | Bin 0 -> 4625 bytes
 src/components/ProfileMenu.tsx      |  11 ++++++++---
 src/pages/share/[videoId].tsx       |  14 +++++++-------
 3 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/default profile icon.jpg

diff --git a/src/assets/default profile icon.jpg b/src/assets/default profile icon.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fdd3963d01a446a359aad89610043d9fbaf67baf
GIT binary patch
literal 4625
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
Wi^}%7?wsAam2T2{G{kJ~4FBK05p;|I

literal 0
HcmV?d00001

diff --git a/src/components/ProfileMenu.tsx b/src/components/ProfileMenu.tsx
index 80248cd..8a38a0d 100644
--- a/src/components/ProfileMenu.tsx
+++ b/src/components/ProfileMenu.tsx
@@ -4,6 +4,8 @@ import { signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { api } from "~/utils/api";
 import { usePostHog } from "posthog-js/react";
+import defaultProfileIcon from "~/assets/default profile icon.jpg";
+import Image from "next/image";
 
 export default function ProfileMenu() {
   const { mutateAsync: createBillingPortalSession } =
@@ -28,10 +30,13 @@ export default function ProfileMenu() {
     <Menu as="div" className="relative inline-block text-left">
       <Menu.Button className="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
         <span className="sr-only">Open user menu</span>
-        <img
+        <Image
           className="h-8 w-8 rounded-full"
-          src={session?.user?.image ?? "https://i.stack.imgur.com/dr5qp.jpg"}
-          alt=""
+          src={session?.user?.image ?? defaultProfileIcon}
+          alt="profile icon"
+          width={32}
+          height={32}
+          unoptimized
         />
       </Menu.Button>
       <Transition
diff --git a/src/pages/share/[videoId].tsx b/src/pages/share/[videoId].tsx
index 3ea2b4a..fa30c28 100644
--- a/src/pages/share/[videoId].tsx
+++ b/src/pages/share/[videoId].tsx
@@ -15,6 +15,7 @@ import { usePostHog } from "posthog-js/react";
 import { useAtom } from "jotai";
 import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
 import VideoRecordModal from "~/components/VideoRecordModal";
+import defaultProfileIcon from "~/assets/default profile icon.jpg";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
@@ -175,13 +176,12 @@ const VideoList: NextPage = () => {
               {!isLoading ? (
                 <>
                   <div className="h-10 w-10 overflow-hidden rounded-full">
-                    <img
-                      className="h-[40px] w-[40px]"
-                      src={
-                        video.user.image ??
-                        "https://i.stack.imgur.com/dr5qp.jpg"
-                      }
-                      alt="profile photo"
+                    <Image
+                      src={video.user.image ?? defaultProfileIcon}
+                      alt="profile icon"
+                      width={40}
+                      height={40}
+                      unoptimized
                     />
                   </div>
                   <span className="ml-3 font-medium">{video.user.name}</span>