Dialog with Avatar Upload

1'use client';
2 
3import { Plus, UserRoundIcon, X } from 'lucide-react';
4import { useRef, useState } from 'react';
5 
6import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
7import { Button } from '@/components/ui/button';
8import {
9  Dialog,
10  DialogContent,
11  DialogHeader,
12  DialogTitle,
13  DialogTrigger,
14} from '@/components/ui/dialog';
15import { Input } from '@/components/ui/input';
16import { Label } from '@/components/ui/label';
17 
18export default function Dialog12() {
19  const [open, setOpen] = useState(true);
20  const [authorName, setAuthorName] = useState('Ephraim Duncan');
21  const [title, setTitle] = useState('Design Engineer');
22  const [image, setImage] = useState<string | null>(null);
23  const fileInputRef = useRef<HTMLInputElement>(null);
24 
25  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
26    const file = e.target.files?.[0];
27    if (file) {
28      if (file.size > 1_048_576) {
29        alert('File size exceeds 1MB limit');
30        return;
31      }
32 
33      const reader = new FileReader();
34      reader.onload = (event) => {
35        setImage(event.target?.result as string);
36      };
37      reader.readAsDataURL(file);
38    }
39  };
40 
41  const triggerFileInput = () => {
42    fileInputRef.current?.click();
43  };
44 
45  return (
46    <Dialog onOpenChange={setOpen} open={open}>
47      <DialogTrigger render={<Button />}>Open Dialog</DialogTrigger>
48      <DialogContent className="gap-0 rounded-3xl p-0 sm:max-w-lg">
49        <DialogHeader className="border-b px-6 py-4">
50          <DialogTitle className="text-balance font-medium">
51            Add a writer
52          </DialogTitle>
53        </DialogHeader>
54 
55        <div className="grid grid-cols-1 px-6 pt-4 pb-6 md:grid-cols-5">
56          <div className="flex flex-col items-center justify-center md:col-span-2">
57            <div className="relative mb-2">
58              <Avatar className="h-24 w-24 border-2 border-muted">
59                <AvatarImage alt="Profile" src={image || undefined} />
60                <AvatarFallback>
61                  <UserRoundIcon
62                    aria-hidden="true"
63                    className="text-muted-foreground"
64                    size={52}
65                  />
66                </AvatarFallback>
67              </Avatar>
68              <Button
69                className="-top-0.5 -right-0.5 absolute rounded-full border-[3px] border-background bg-accent hover:bg-accent"
70                onClick={() => {
71                  if (image) {
72                    setImage(null);
73// … truncated