import { Form, Head, Link, usePage } from '@inertiajs/react'; import { ImagePlus } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController'; import DeleteUser from '@/components/delete-user'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useInitials } from '@/hooks/use-initials'; import { useTranslation } from '@/lib/translations'; import { edit } from '@/routes/profile'; import { send } from '@/routes/verification'; export default function Profile({ mustVerifyEmail, status, }: { mustVerifyEmail: boolean; status?: string; }) { const { auth } = usePage().props; const { t } = useTranslation(); const user = auth.user; const getInitials = useInitials(); const avatarInputRef = useRef(null); const [avatarPreviewUrl, setAvatarPreviewUrl] = useState( null, ); useEffect(() => { return () => { if (avatarPreviewUrl) { URL.revokeObjectURL(avatarPreviewUrl); } }; }, [avatarPreviewUrl]); if (!user) { return null; } function previewAvatar(file: File | null) { setAvatarPreviewUrl((currentUrl) => { if (currentUrl) { URL.revokeObjectURL(currentUrl); } return file ? URL.createObjectURL(file) : null; }); } return ( <>

{t('Profile settings')}

{ setAvatarPreviewUrl(null); if (avatarInputRef.current) { avatarInputRef.current.value = ''; } }} encType="multipart/form-data" className="space-y-6" > {({ processing, progress, errors }) => ( <>
{getInitials(user.name)}
previewAvatar( event.target.files?.[0] ?? null, ) } />
{t('JPG, PNG, or WebP up to 2 MB.')}
{progress && ( )}
{mustVerifyEmail && user.email_verified_at === null && (

{t( 'Your email address is unverified.', )}{' '} {t( 'Click here to resend the verification email.', )}

{status === 'verification-link-sent' && (
{t( 'A new verification link has been sent to your email address.', )}
)}
)}
)}
); } Profile.layout = { breadcrumbs: [ { title: 'Profile settings', href: edit(), }, ], };