import { Head, usePage } from '@inertiajs/react'; import type { FormEvent } from 'react'; import ProfileController from '@/actions/App/Domains/Shared/Http/Controllers/Settings/ProfileController'; import DeleteUser from '@/components/DeleteUser'; import Heading from '@/components/Heading'; import InputError from '@/components/InputError'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useYupForm } from '@/hooks/use-yup-form'; import { avatarUrl, cn, getInitials } from '@/lib/utils'; import { profileSettingsSchema } from '@/lib/validation/auth'; import { edit } from '@/routes/profile'; interface ProfileProps { /** Kunci avatar yang boleh dipilih, dikirim dari User::AVATAR_PRESETS. */ avatarPresets: string[]; } export default function Profile({ avatarPresets }: ProfileProps) { const { auth } = usePage().props; const { data, setData, processing, errors, validateField, submit } = useYupForm(profileSettingsSchema, { name: auth.user.name, email: auth.user.email, avatar: auth.user.avatar ?? null, }); /** Cincin penanda pilihan; dipakai tombol inisial maupun tombol preset. */ const ringClass = (isSelected: boolean) => cn( 'rounded-full ring-2 ring-offset-2 ring-offset-background transition', isSelected ? 'ring-primary' : 'ring-transparent hover:ring-border focus-visible:ring-border', ); const handleSubmit = (e: FormEvent) => { e.preventDefault(); submit((form) => form.patch(ProfileController.update.url(), { preserveScroll: true, }), ); }; return ( <>

Profile settings

{/* Pratinjau besar dari pilihan yang sedang aktif. Petak pilihan di bawah terlalu kecil untuk menilai detail wajahnya, jadi yang terpilih ditampilkan sekali lagi dalam ukuran penuh. */}
{data.avatar ? ( ) : (
{getInitials(auth.user.name)}
)}

{data.avatar ?? 'Initials'}

Currently selected

{/* Pilihan pertama mengosongkan avatar, yaitu kembali ke inisial seperti sebelum ada preset. */} {avatarPresets.map((preset) => ( ))}
setData('name', e.target.value)} onBlur={() => validateField('name')} required autoComplete="name" placeholder="Full name" />
setData('email', e.target.value)} onBlur={() => validateField('email')} required autoComplete="username" placeholder="Email address" />
); } Profile.layout = { breadcrumbs: [ { title: 'Profile settings', href: edit(), }, ], };