1  'use client'
  2  
  3  import { useState } from 'react'
  4  import { Button } from "@/components/ui/button"
  5  import { Input } from "@/components/ui/input"
  6  import { Textarea } from "@/components/ui/textarea"
  7  import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
  8  import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
  9  
 10  interface UserProfile {
 11    name: string
 12    bio: string
 13    location: string
 14    website: string
 15  }
 16  
 17  export function UserProfileEdit() {
 18    const [isOpen, setIsOpen] = useState(false)
 19    const [profile, setProfile] = useState<UserProfile>({
 20      name: 'John Doe',
 21      bio: 'Just a guy living in the digital world',
 22      location: 'Internet',
 23      website: 'https://johndoe.com'
 24    })
 25  
 26    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
 27      const { name, value } = e.target
 28      setProfile(prev => ({ ...prev, [name]: value }))
 29    }
 30  
 31    const handleSubmit = (e: React.FormEvent) => {
 32      e.preventDefault()
 33      // Here you would typically send this data to your backend
 34      console.log('Updating profile:', profile)
 35      setIsOpen(false)
 36    }
 37  
 38    return (
 39      <Dialog open={isOpen} onOpenChange={setIsOpen}>
 40        <DialogTrigger asChild>
 41          <Button variant="outline">Edit Profile</Button>
 42        </DialogTrigger>
 43        <DialogContent className="sm:max-w-[425px]">
 44          <DialogHeader>
 45            <DialogTitle>Edit Profile</DialogTitle>
 46          </DialogHeader>
 47          <form onSubmit={handleSubmit} className="space-y-4">
 48            <div className="flex items-center space-x-4">
 49              <Avatar className="w-16 h-16">
 50                <AvatarImage src={`https://api.dicebear.com/6.x/avataaars/svg?seed=${profile.name}`} alt={profile.name} />
 51                <AvatarFallback>{profile.name.slice(0, 2).toUpperCase()}</AvatarFallback>
 52              </Avatar>
 53              <Button variant="outline" size="sm">Change Photo</Button>
 54            </div>
 55            <div>
 56              <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
 57              <Input
 58                id="name"
 59                name="name"
 60                value={profile.name}
 61                onChange={handleChange}
 62                required
 63                className="mt-1"
 64              />
 65            </div>
 66            <div>
 67              <label htmlFor="bio" className="block text-sm font-medium text-gray-700">Bio</label>
 68              <Textarea
 69                id="bio"
 70                name="bio"
 71                value={profile.bio}
 72                onChange={handleChange}
 73                className="mt-1"
 74              />
 75            </div>
 76            <div>
 77              <label htmlFor="location" className="block text-sm font-medium text-gray-700">Location</label>
 78              <Input
 79                id="location"
 80                name="location"
 81                value={profile.location}
 82                onChange={handleChange}
 83                className="mt-1"
 84              />
 85            </div>
 86            <div>
 87              <label htmlFor="website" className="block text-sm font-medium text-gray-700">Website</label>
 88              <Input
 89                id="website"
 90                name="website"
 91                value={profile.website}
 92                onChange={handleChange}
 93                className="mt-1"
 94              />
 95            </div>
 96            <Button type="submit" className="w-full">Save Profile</Button>
 97          </form>
 98        </DialogContent>
 99      </Dialog>
100    )
101  }
102