From f564e9629f77654a7f1c74f87103feafea242bdb Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sun, 3 Aug 2025 23:28:14 +0200
Subject: [PATCH] Improve images

---
 app/complete-profile/page.tsx | 45 +++++++++++++++++------------------
 lib/client/profile.tsx        | 21 +++++++++-------
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/app/complete-profile/page.tsx b/app/complete-profile/page.tsx
index 78c60fd4..df5def99 100644
--- a/app/complete-profile/page.tsx
+++ b/app/complete-profile/page.tsx
@@ -210,14 +210,9 @@ function RegisterComponent() {
       return;
     }
 
-    if (file.size > 10 * 1024 * 1024) {
-      setError('Image size must be less than 10MB');
-      return;
-    }
-
     // Compression options
     const options = {
-      maxSizeMB: 10,              // Target max size in MB
+      maxSizeMB: 1,              // Target max size in MB
       maxWidthOrHeight: 1024,    // Resize to fit within this dimension
       useWebWorker: true,
     };
@@ -610,6 +605,24 @@ function RegisterComponent() {
     </>
   }
 
+  function errorBlock() {
+    return <div className="bg-red-50 border-l-4 border-red-400 p-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <svg className="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+               fill="currentColor">
+            <path fillRule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                  clipRule="evenodd"/>
+          </svg>
+        </div>
+        <div className="ml-3">
+          <p className="text-sm text-red-700">{error}</p>
+        </div>
+      </div>
+    </div>
+  }
+
   return (
     <div className="min-h-screen flex items-center justify-center  py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-3xl w-full space-y-8">
@@ -619,23 +632,7 @@ function RegisterComponent() {
           </h2>
         </div>
 
-        {error && (
-          <div className="bg-red-50 border-l-4 border-red-400 p-4">
-            <div className="flex">
-              <div className="flex-shrink-0">
-                <svg className="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                     fill="currentColor">
-                  <path fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                        clipRule="evenodd"/>
-                </svg>
-              </div>
-              <div className="ml-3">
-                <p className="text-sm text-red-700">{error}</p>
-              </div>
-            </div>
-          </div>
-        )}
+        {error && errorBlock()}
 
         <div className="flex justify-center mb-6">
           <div className="relative">
@@ -966,6 +963,8 @@ function RegisterComponent() {
             )}
           </div>
 
+          {error && errorBlock()}
+
           <div>
             <button
               type="submit"
diff --git a/lib/client/profile.tsx b/lib/client/profile.tsx
index 357e1719..046fa1ee 100644
--- a/lib/client/profile.tsx
+++ b/lib/client/profile.tsx
@@ -160,6 +160,7 @@ export function getProfile(url: string, header: any = null) {
               image ? (
                   <div className="flex-1">
                     <div className="h-32 w-32 rounded-full border-4 border-white overflow-hidden ">
+                      <a href={image} target="_blank" rel="noopener noreferrer">
                       <Image
                         src={image}
                         alt={userData.name || 'Profile picture'}
@@ -172,6 +173,7 @@ export function getProfile(url: string, header: any = null) {
                         //   target.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(profile.name || 'U')}&background=random`;
                         // }}
                       />
+                      </a>
                     </div>
                   </div>
                 ) :
@@ -232,7 +234,8 @@ export function getProfile(url: string, header: any = null) {
             {
               userData?.profile?.introversion && (
                 <div>
-                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Introversion - Extroversion </h2>
+                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Introversion -
+                    Extroversion </h2>
                   < p
                     className="mt-1 capitalize"> {100 - userData.profile.introversion}% </p>
                 </div>
@@ -311,13 +314,15 @@ export function getProfile(url: string, header: any = null) {
                       {Array.from(new Set(images)).map((img, index) => ( // Set is a hack to avoid a bug where duplicates fill in images when we navigate different pages
                         <div key={index}
                              className="relative group aspect-square rounded-lg overflow-hidden border border-gray-200 ">
-                          <Image
-                            src={img}
-                            alt={`Uploaded image ${index + 1}`}
-                            width={150}
-                            height={150}
-                            className="h-full w-full object-cover"
-                          />
+                          <a href={img} target="_blank" rel="noopener noreferrer">
+                            <Image
+                              src={img}
+                              alt={`Uploaded image ${index + 1}`}
+                              width={150}
+                              height={150}
+                              className="h-full w-full object-cover"
+                            />
+                          </a>
                         </div>
                       ))}
                     </div>