From 7ceb23d4bc59aaf85303c1900dc02221fc5a7f13 Mon Sep 17 00:00:00 2001
From: Phoenix Isaac Pereira <phoenixpereira99@gmail.com>
Date: Mon, 15 Jan 2024 19:02:58 +1030
Subject: [PATCH] fix: Add remotePatterns to next.config.js and added width and
 height to profile image

---
 next.config.js                | 11 ++++++++++-
 src/components/UserButton.tsx |  4 +++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/next.config.js b/next.config.js
index 658404ac..61d778df 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'img.clerk.com',
+      },
+    ],
+  },
+};
 
 module.exports = nextConfig;
diff --git a/src/components/UserButton.tsx b/src/components/UserButton.tsx
index a91f703d..0b4288c1 100644
--- a/src/components/UserButton.tsx
+++ b/src/components/UserButton.tsx
@@ -23,7 +23,9 @@ export default function UserButton() {
             <div className="flex relative w-11 border-2 border-black gap-y-2">
                 <button onClick={handleButtonClick}>
                     {/* Display user's profile icon */}
-                    {user && user.imageUrl && <Image src={user.imageUrl} alt="Profile" />}
+                    {user && user.imageUrl && (
+                        <Image src={user.imageUrl} alt="Profile" width={100} height={100} />
+                    )}
                 </button>
 
                 {/* Popup menu */}