97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
"use client";
|
|
import { Link } from "@/components/navigation";
|
|
import React, { useState } from "react";
|
|
|
|
const ChangeProfile: React.FC = () => {
|
|
const [selectedImage, setSelectedImage] = useState<File | null>(null);
|
|
|
|
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (e.target.files && e.target.files[0]) {
|
|
setSelectedImage(e.target.files[0]);
|
|
}
|
|
};
|
|
|
|
const handleSave = () => {
|
|
if (selectedImage) {
|
|
console.log("Foto berhasil diganti:", selectedImage.name);
|
|
alert("Foto berhasil diganti.");
|
|
} else {
|
|
alert("Silakan pilih foto terlebih dahulu.");
|
|
}
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
setSelectedImage(null);
|
|
alert("Foto berhasil dihapus.");
|
|
};
|
|
|
|
return (
|
|
<div className="px-4 lg:px-14 py-8">
|
|
<div className="text-center mb-8">
|
|
<div className="w-20 h-20 mx-auto rounded-full bg-red-700 flex items-center justify-center">
|
|
<span className="text-white text-3xl font-bold">👤</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold mt-4">Ubah Photo</h1>
|
|
</div>
|
|
|
|
<div className="flex justify-center gap-4 mb-8">
|
|
<Link href={"/profile"}>
|
|
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">
|
|
User Profile
|
|
</button>
|
|
</Link>
|
|
<Link href={"/profile/change-profile"}>
|
|
<button className="bg-red-700 text-white px-4 py-2 rounded">
|
|
Ubah Foto
|
|
</button>
|
|
</Link>
|
|
<Link href={"/profile/change-password"}>
|
|
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">
|
|
Ubah Password
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="w-80 mx-auto bg-gray-900 text-white shadow-md p-8 rounded">
|
|
<div className="flex justify-center mb-6">
|
|
<div className="w-40 h-40 rounded-full border border-gray-300 flex items-center justify-center">
|
|
{selectedImage ? (
|
|
<img
|
|
src={URL.createObjectURL(selectedImage)}
|
|
alt="Preview"
|
|
className="w-full h-full rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<span className="text-gray-500">No Image</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center gap-4">
|
|
<input
|
|
type="file"
|
|
id="upload"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={handleImageChange}
|
|
/>
|
|
<label
|
|
htmlFor="upload"
|
|
className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer"
|
|
>
|
|
Ganti Foto
|
|
</label>
|
|
<button
|
|
onClick={handleDelete}
|
|
className="border border-red-700 text-red-700 px-4 py-2 rounded"
|
|
>
|
|
Hapus Foto
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChangeProfile;
|