74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
"use client";
|
|
import { Link } from "@/components/navigation";
|
|
import Image from "next/image";
|
|
import React, { useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const ChangeProfile: React.FC = () => {
|
|
const [selectedImage, setSelectedImage] = useState<File | null>(null);
|
|
const t = useTranslations("LandingPage");
|
|
|
|
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">{t("changePhoto", { defaultValue: "Change 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">{t("userProfile", { defaultValue: "User Profile" })}</button>
|
|
</Link>
|
|
<Link href={"/profile/change-profile"}>
|
|
<button className="bg-red-700 text-white px-4 py-2 rounded">{t("changePhoto", { defaultValue: "Change Photo" })}</button>
|
|
</Link>
|
|
<Link href={"/profile/change-password"}>
|
|
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">{t("changePass", { defaultValue: "Change Pass" })}</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 ? <Image width={1920} height={1080} src={URL.createObjectURL(selectedImage)} alt="Preview" className="w-full h-full rounded-full object-cover" /> : <span className="text-gray-500">{t("noImage", { defaultValue: "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">
|
|
{t("changePhoto", { defaultValue: "Change Photo" })}
|
|
</label>
|
|
<button onClick={handleDelete} className="border border-red-700 text-red-700 px-4 py-2 rounded">
|
|
{t("deletePhoto", { defaultValue: "Delete Photo" })}{" "}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChangeProfile;
|