"use client"; import { Camera, Loader2, Save, X } from "lucide-react"; import Image from "next/image"; import { useCallback, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupInput } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; export interface SocialLink { platform: string; url: string; } export interface ProfileData { name: string; email: string; bio?: string; location?: string; website?: string; avatar?: string; socialLinks?: SocialLink[]; } export interface SettingsProfileProps { profile?: ProfileData; onSave?: (data: ProfileData) => Promise; onEmailChange?: (newEmail: string, currentPassword: string) => Promise; onAvatarUpload?: (file: File) => Promise; onAvatarRemove?: () => Promise; className?: string; showEmailVerification?: boolean; } const defaultSocialPlatforms = [ { id: "twitter", label: "Twitter/X", placeholder: "https://x.com/preetsuthar17", }, { id: "github", label: "GitHub", placeholder: "https://github.com/preetsuthar17", }, { id: "linkedin", label: "LinkedIn", placeholder: "https://linkedin.com/in/preetsuthar17", }, { id: "website", label: "Website", placeholder: "https://preetsuthar.me" }, ]; export default function SettingsProfile({ profile, onSave, onEmailChange, onAvatarUpload, onAvatarRemove, className, showEmailVerification = true, }: SettingsProfileProps) { const [isSaving, setIsSaving] = useState(false); const [isUploadingAvatar, setIsUploadingAvatar] = useState(false); const [isChangingEmail, setIsChangingEmail] = useState(false); const [showEmailChangeForm, setShowEmailChangeForm] = useState(false); const [avatarPreview, setAvatarPreview] = useState( profile?.avatar || null ); const [errors, setErrors] = useState>({}); const [formData, setFormData] = useState({ name: profile?.name || "", email: profile?.email || "", bio: profile?.bio || "", location: profile?.location || "", website: profile?.website || "", socialLinks: profile?.socialLinks || [], }); const [emailChangeData, setEmailChangeData] = useState({ newEmail: "", currentPassword: "", }); const fileInputRef = useRef(null); const avatarFileRef = useRef(null); const handleAvatarSelect = useCallback( async (file: File) => { if (!file.type.startsWith("image/")) { setErrors({ avatar: "Please select an image file" }); return; } if (file.size > 5 * 1024 * 1024) { setErrors({ avatar: "Image size must be less than 5MB" }); return; } avatarFileRef.current = file; const reader = new FileReader(); reader.onloadend = () => { setAvatarPreview(reader.result as string); }; reader.readAsDataURL(file); if (onAvatarUpload) { setIsUploadingAvatar(true); try { const avatarUrl = await onAvatarUpload(file); setAvatarPreview(avatarUrl); setErrors({}); } catch (error) { setErrors({ avatar: error instanceof Error ? error.message : "Failed to upload avatar", }); } finally { setIsUploadingAvatar(false); } } }, [onAvatarUpload] ); const handleAvatarClick = () => { fileInputRef.current?.click(); }; const handleAvatarRemove = async () => { if (onAvatarRemove) { setIsUploadingAvatar(true); try { await onAvatarRemove(); setAvatarPreview(null); avatarFileRef.current = null; setErrors({}); } catch (error) { setErrors({ avatar: error instanceof Error ? error.message : "Failed to remove avatar", }); } finally { setIsUploadingAvatar(false); } } else { setAvatarPreview(null); avatarFileRef.current = null; } }; const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); }, []); const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); const file = e.dataTransfer.files[0]; if (file) { handleAvatarSelect(file); } }, [handleAvatarSelect] ); const handleFileInputChange = useCallback( (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { handleAvatarSelect(file); } }, [handleAvatarSelect] ); const handleSave = async () => { setErrors({}); if (!formData.name.trim()) { setErrors({ name: "Name is required" }); return; } if (!formData.email.trim()) { setErrors({ email: "Email is required" }); return; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(formData.email)) { setErrors({ email: "Please enter a valid email address" }); return; } if (formData.website && formData.website.trim()) { try { new URL(formData.website); } catch { setErrors({ website: "Please enter a valid URL" }); return; } } setIsSaving(true); try { await onSave?.(formData); } catch (error) { setErrors({ _general: error instanceof Error ? error.message : "Failed to save profile", }); } finally { setIsSaving(false); } }; const handleEmailChange = async () => { setErrors({}); if (!emailChangeData.newEmail.trim()) { setErrors({ newEmail: "New email is required" }); return; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(emailChangeData.newEmail)) { setErrors({ newEmail: "Please enter a valid email address" }); return; } if (!emailChangeData.currentPassword.trim()) { setErrors({ currentPassword: "Current password is required" }); return; } setIsChangingEmail(true); try { await onEmailChange?.( emailChangeData.newEmail, emailChangeData.currentPassword ); setFormData((prev) => ({ ...prev, email: emailChangeData.newEmail })); setEmailChangeData({ newEmail: "", currentPassword: "" }); setShowEmailChangeForm(false); setErrors({}); } catch (error) { setErrors({ emailChange: error instanceof Error ? error.message : "Failed to change email", }); } finally { setIsChangingEmail(false); } }; const updateSocialLink = (platform: string, url: string) => { setFormData((prev) => { const socialLinks = prev.socialLinks || []; const existingIndex = socialLinks.findIndex( (link) => link.platform === platform ); const updatedLinks = [...socialLinks]; if (url.trim()) { if (existingIndex >= 0) { updatedLinks[existingIndex] = { platform, url }; } else { updatedLinks.push({ platform, url }); } } else if (existingIndex >= 0) { updatedLinks.splice(existingIndex, 1); } return { ...prev, socialLinks: updatedLinks }; }); }; const getSocialLink = (platform: string): string => formData.socialLinks?.find((link) => link.platform === platform)?.url || ""; return (

Profile Settings Manage your profile information and avatar

{errors._general && (

{errors._general}

)} {/* Avatar Upload */}

Profile Picture

{avatarPreview ? ( <> Profile avatar

{isUploadingAvatar && (

)} ) : ( )}

{avatarPreview && ( )}

Drag and drop an image here, or click to browse. Max size: 5MB

{errors.avatar && (

{errors.avatar}

)}

{/* Basic Information */}

Name * setFormData((prev) => ({ ...prev, name: e.target.value })) } placeholder="Your full name" value={formData.name} /> {errors.name && {errors.name}} Email

setFormData((prev) => ({ ...prev, email: e.target.value, })) } placeholder="your.email@example.com" type="email" value={formData.email} /> {showEmailVerification && ( )}

{errors.email && {errors.email}} {showEmailChangeForm && (

New Email * setEmailChangeData((prev) => ({ ...prev, newEmail: e.target.value, })) } placeholder="new.email@example.com" type="email" value={emailChangeData.newEmail} /> {errors.newEmail && ( {errors.newEmail} )} Current Password * setEmailChangeData((prev) => ({ ...prev, currentPassword: e.target.value, })) } placeholder="Enter your current password" type="password" value={emailChangeData.currentPassword} /> {errors.currentPassword && ( {errors.currentPassword} )} {errors.emailChange && ( {errors.emailChange} )}

)} Bio

setFormData((prev) => ({ ...prev, bio: e.target.value }))
                  }
                  placeholder="Tell us about yourself..."
                  rows={4}
                  value={formData.bio || ""}
                />
                <FieldDescription>
                  A brief description about yourself (max 500 characters)
                </FieldDescription>
              </FieldContent>
            </Field>

<Field>
              <FieldLabel htmlFor="location">Location</FieldLabel>
              <FieldContent>
                <InputGroup>
                  <InputGroupInput
                    id="location"
                    onChange={(e) =>
                      setFormData((prev) => ({
                        ...prev,
                        location: e.target.value,
                      }))
                    }
                    placeholder="City, Country"
                    value={formData.location || ""}
                  />
                </InputGroup>
              </FieldContent>
            </Field>

<Field>
              <FieldLabel htmlFor="website">Website</FieldLabel>
              <FieldContent>
                <InputGroup>
                  <InputGroupInput
                    id="website"
                    onChange={(e) =>
                      setFormData((prev) => ({
                        ...prev,
                        website: e.target.value,
                      }))
                    }
                    placeholder="https://example.com"
                    type="url"
                    value={formData.website || ""}
                  />
                </InputGroup>
                {errors.website && <FieldError>{errors.website}</FieldError>}
              </FieldContent>
            </Field>
          </div>

{/* Social Links */}
          <div className="flex flex-col gap-4">
            <FieldLabel>Social Links</FieldLabel>
            <div className="flex flex-col gap-3">
              {defaultSocialPlatforms.map((platform) => (
                <Field key={platform.id}>
                  <FieldLabel htmlFor={`social-${platform.id}`}>
                    {platform.label}
                  </FieldLabel>
                  <FieldContent>
                    <InputGroup>
                      <InputGroupInput
                        id={`social-${platform.id}`}
                        onChange={(e) =>
                          updateSocialLink(platform.id, e.target.value)
                        }
                        placeholder={platform.placeholder}
                        type="url"
                        value={getSocialLink(platform.id)}
                      />
                    </InputGroup>
                  </FieldContent>
                </Field>
              ))}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
</article></body></html>

Example Usage