mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-04-16 04:27:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve images

Browse Source
This commit is contained in:
MartinBraquet
2025-08-03 23:28:14 +02:00
parent f56bf5e5cb
commit f564e9629f
2 changed files with 35 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/complete-profile/page.tsx
View File

@@ -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"

21
lib/client/profile.tsx
View File

@@ -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>