"use client"; import { FormEvent, useState, } from "react"; export default function CreateAboutPage() { const [loading, setLoading] = useState(false); const [form, setForm] = useState({ badge: "", title: "", highlight: "", description: "", photo: "", github: "", facebook: "", instagram: "", twitter: "", tiktok: "", email: "", active: true, }); const [photoFile, setPhotoFile] = useState(null); const [photoPreview, setPhotoPreview] = useState(""); // ===================================================== // HANDLE CHANGE // ===================================================== const handleChange = ( e: React.ChangeEvent< HTMLInputElement | HTMLTextAreaElement > ) => { const { name, value, type } = e.target; setForm((prev) => ({ ...prev, [name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value, })); }; // ===================================================== // HANDLE PHOTO // ===================================================== const handlePhotoChange = ( e: React.ChangeEvent ) => { const file = e.target.files?.[0]; if (!file) { return; } if (!file.type.startsWith("image/")) { alert("File yang dipilih harus berupa gambar."); return; } setPhotoFile(file); const preview = URL.createObjectURL(file); setPhotoPreview(preview); // Agar file yang sama dapat dipilih kembali e.target.value = ""; }; // ===================================================== // UPLOAD PHOTO // ===================================================== const uploadPhoto = async () => { if (!photoFile) { return null; } const formData = new FormData(); formData.append("file", photoFile); const response = await fetch( "/api/about/upload", { method: "POST", body: formData, } ); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal upload foto" ); } return result.data as string; }; // ===================================================== // SUBMIT // ===================================================== const handleSubmit = async (e: FormEvent) => { e.preventDefault(); if (!form.title.trim()) { alert("Title wajib diisi."); return; } setLoading(true); try { // Upload foto terlebih dahulu const photoUrl = await uploadPhoto(); // Simpan About const response = await fetch( "/api/about", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...form, photo: photoUrl, }), } ); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal menambahkan About" ); } alert("About berhasil ditambahkan"); window.location.href = "/secure-panel/about"; } catch (error) { console.error( "CREATE ABOUT ERROR:", error ); alert( error instanceof Error ? error.message : "Terjadi kesalahan saat menambahkan About" ); } finally { setLoading(false); } }; return ( <> {/* ================================================= STYLE ================================================= */}
{/* ================================================= SIDEBAR OVERLAY ================================================= */} {false && (
)} {/* ================================================= SIDEBAR ================================================= */} {/* ================================================= MAIN ================================================= */}
{/* ================================================= TOPBAR ================================================= */}
ADMIN PANEL
About Management
{/* ================================================= PAGE CONTENT ================================================= */}
{/* ================================================= HEADER ================================================= */}
Kembali ke About
WEBSITE CONTENT

Tambah About

Tambahkan informasi About Me, deskripsi singkat, foto profil, sosial media, dan informasi kontak yang akan ditampilkan pada website portfolio GloVaTech.

{/* ================================================= FORM CARD ================================================= */}
{/* HEADER */}

About Information

Lengkapi informasi di bawah ini dengan data yang ingin ditampilkan pada halaman About website.

{/* BODY */}
{/* ================================================= BASIC INFORMATION ================================================= */}

Basic Information

Masukkan informasi utama yang akan digunakan untuk memperkenalkan diri pada bagian About Me.

{/* BADGE */}
{/* TITLE */}
{/* HIGHLIGHT */}
Teks yang ingin ditampilkan menggunakan warna utama pada bagian About.
{/* DESCRIPTION */}
Gunakan deskripsi singkat, profesional, dan mudah dibaca untuk menjelaskan profil, keahlian, atau fokus utama.
{/* ================================================= PHOTO ================================================= */}

Profile Photo

Upload foto yang akan digunakan pada bagian About Me. Gunakan gambar dengan kualitas baik dan rasio yang sesuai.

Format gambar seperti JPG, JPEG, PNG, atau WebP.
{photoPreview && (
Preview Foto Preview About
)}
{/* ================================================= SOCIAL MEDIA ================================================= */}

Social Media & Contact

Isi hanya sosial media dan kontak yang ingin ditampilkan pada website. Field yang dikosongkan dapat digunakan sebagai informasi yang tidak ingin ditampilkan.

{/* GITHUB */}
{/* FACEBOOK */}
{/* INSTAGRAM */}
{/* TWITTER */}
{/* TIKTOK */}
{/* EMAIL */}
{/* ================================================= STATUS ================================================= */}

Publication Status

Tentukan apakah konten About ini langsung diaktifkan dan ditampilkan pada website.

{/* ================================================= ACTIONS ================================================= */}
Batal
{/* ================================================= FOOTER ================================================= */}
); }