import { Form, Head, usePage } from '@inertiajs/react'; import { Link } from '@inertiajs/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 { Spinner } from '@/components/ui/spinner'; import { useAvatarUpload } from '@/hooks/use-avatar-upload'; import { useInitials } from '@/hooks/use-initials'; import { edit } from '@/routes/profile'; import type { Auth } from '@/types'; import { send } from '@/routes/verification'; type PageProps = { auth: Auth; }; export default function Profile({ mustVerifyEmail, status, }: { mustVerifyEmail: boolean; status?: string; }) { const { auth } = usePage().props; const getInitials = useInitials(); const { uploading, error: avatarError, open, remove, inputProps, } = useAvatarUpload(); return ( <>

Profile settings

{uploading ? ( ) : ( getInitials(auth.user.name) )}
{auth.user.avatar && ( )}

JPG, PNG or WebP, up to 2 MB.

{({ processing, errors }) => ( <>
{mustVerifyEmail && auth.user.email_verified_at === null && (

Your email address is unverified.{' '} Click here to re-send the verification email.

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