Edit Profile Dialog

1"use client";
2 
3import { useId } from "react";
4import Image from "next/image";
5 
6import { CheckIcon, ImagePlusIcon, XIcon } from "lucide-react";
7 
8import { Button } from "@/components/ui/button";
9import { Input } from "@/components/ui/input";
10import { Label } from "@/components/ui/label";
11import {
12  ResponsiveDialog,
13  ResponsiveDialogClose,
14  ResponsiveDialogContent,
15  ResponsiveDialogDescription,
16  ResponsiveDialogFooter,
17  ResponsiveDialogHeader,
18  ResponsiveDialogTitle,
19  ResponsiveDialogTrigger,
20} from "@/components/ui/revola";
21import { Textarea } from "@/components/ui/textarea";
22 
23import { useCharacterLimit } from "@/hooks/use-character-limit";
24import { useFileUpload } from "@/hooks/use-file-upload";
25 
26// Pretend we have initial image files
27const initialBgImage = [
28  {
29    name: "extended-gradient-bg.png",
30    size: 1528737,
31    type: "image/png",
32    url: "/extended-gradient.png",
33    id: "profile-bg-123456789",
34  },
35];
36 
37const initialAvatarImage = [
38  {
39    name: "original-avatar.jpg",
40    size: 1528737,
41    type: "image/jpeg",
42    url: "/original-avatar.jpg",
43    id: "avatar-123456789",
44  },
45];
46 
47export default function EditProfileDialog() {
48  const id = useId();
49 
50  const maxLength = 180;
51  const {
52    value,
53    characterCount,
54    handleChange,
55    maxLength: limit,
56  } = useCharacterLimit({
57    maxLength,
58    initialValue: "Hey, I am Charlet, a Product Manager who loves building amazing products that delight users!",
59  });
60 
61  return (
62    <ResponsiveDialog>
63      <ResponsiveDialogTrigger asChild>
64        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
65          Edit profile
66        </Button>
67      </ResponsiveDialogTrigger>
68      <ResponsiveDialogContent className="flex flex-col gap-0">
69        <ResponsiveDialogHeader className="space-y-0 !p-0 text-left">
70          <ResponsiveDialogTitle className="border-b px-6 py-4 text-base max-sm:pt-2">
71            Edit profile
72          </ResponsiveDialogTitle>
73        </ResponsiveDialogHeader>
74        <ResponsiveDialogDescription className="sr-only">
75          Make changes to your profile here. You can change your photo and set a username.
76        </ResponsiveDialogDescription>
77 
78        <div className="overflow-y-auto">
79          <ProfileBg />
80          <Avatar />
81          <div className="px-6 pb-6 pt-4">
82            <form className="space-y-4">
83              <div className="flex flex-col gap-4 sm:flex-row">
84                <div className="flex-1 space-y-2">
85// … truncated