UI Update

This commit is contained in:
2025-04-13 00:40:25 -04:00
parent bd51b6a486
commit e00776d20b
8 changed files with 33 additions and 98 deletions

View File

@@ -3,30 +3,24 @@
import React, { useState } from "react";
export default function ProfilePage() {
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const [uploadMessage, setUploadMessage] = useState<string>("");
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const [uploadMessage, setUploadMessage] = useState<string>("");
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files[0]) {
const file = event.target.files[0];
setSelectedFile(file);
setPreviewUrl(URL.createObjectURL(file)); // Generate a preview URL for the image
}
};
return (
<main className="flex flex-col items-center mt-10">
<h1 className="text-3xl font-bold mb-6">Profile Picture</h1>
<div className="flex flex-col items-center gap-4">
{(
<img
alt="Profile Preview"
className="w-32 h-32 rounded-full object-cover border border-gray-300"
/>
)}
{uploadMessage && <p className="text-sm text-gray-600">{uploadMessage}</p>}
</div>
</main>
);
return (
<main className="flex flex-col items-center mt-10">
<h1 className="text-3xl font-bold mb-6">Profile Picture</h1>
<div className="flex flex-col items-center gap-4">
{
<img
alt="Profile Preview"
className="w-32 h-32 rounded-full object-cover border border-gray-300"
/>
}
{uploadMessage && (
<p className="text-sm text-gray-600">{uploadMessage}</p>
)}
</div>
</main>
);
}