Add default profile button

frontend/components/profile/index/ProfilePictureModal.vue

@@ -12,7 +12,7 @@ type Props = {
 };
 
 type Emits = {
-    "update:modelValue": [value: File];
+    "update:modelValue": [value: File | null];
     "update:isShow": [value: boolean];
 };
 
@@ -59,8 +59,7 @@ const { isPending: updateAccountIsPending } = useUpdateAccount();
 // computed
 
 const currentProfile = computed({
-    get: () =>
+    get: () => (!!modelValue.value ? URL.createObjectURL(modelValue.value) : null),
-        !!modelValue.value ? URL.createObjectURL(modelValue.value) : null,
     set: (value: File) => emit("update:modelValue", value),
 });
 
@@ -81,6 +80,15 @@ onFileDialogChange((files: any) => {
     emit("update:modelValue", file);
     resetFileDialog();
 });
+
+const resetAvatarFile = async () => {
+    const response = await fetch("/img/default-avatar.jpeg");
+    const blob = await response.blob();
+    const file = new File([blob], "default-avatar.jpeg", { type: blob.type });
+
+    emit("update:modelValue", file);
+    resetFileDialog();
+};
 </script>
 
 <template>
@@ -92,19 +100,17 @@ onFileDialogChange((files: any) => {
         contectClass="w-full max-lg:container lg:!w-[30vw]"
     >
         <template #trigger>
-            <button
+            <button class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0">
-                class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
+                <Icon
-            >
+                    name="bi:pencil"
-                <Icon name="bi:pencil" class="**:fill-slate-100" size="12" />
+                    class="**:fill-slate-100"
+                    size="12"
+                />
             </button>
         </template>
         <template #content>
-            <div
+            <div class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4">
-                class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
+                <div class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]">
-            >
-                <div
-                    class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]"
-                >
                     <button
                         v-for="(avatar, index) in avatars"
                         :key="index"
@@ -143,18 +149,33 @@ onFileDialogChange((files: any) => {
                         class="!size-24 lg:!size-32"
                         iconClass="!text-xl lg:!text-2xl"
                     />
-                    <Button
+                    <div class="flex items-center gap-4">
-                        class="rounded-full w-[8rem]"
+                        <Button
-                        @click="openFileDialog"
+                            class="rounded-full w-[8rem] bg-red-500"
-                        :loading="updateAccountIsPending"
+                            @click="resetAvatarFile"
-                        size="md"
+                            :loading="updateAccountIsPending"
-                    >
+                            size="md"
-                        <Icon
+                        >
-                            v-if="updateAccountIsPending"
+                            <Icon
-                            name="svg-spinners:3-dots-bounce"
+                                v-if="updateAccountIsPending"
-                        />
+                                name="bi:trash"
-                        <span v-else>آپلود عکس شما</span>
+                            />
-                    </Button>
+                            <span v-else>حذف عکس</span>
+                        </Button>
+
+                        <Button
+                            class="rounded-full w-[8rem]"
+                            @click="openFileDialog"
+                            :loading="updateAccountIsPending"
+                            size="md"
+                        >
+                            <Icon
+                                v-if="updateAccountIsPending"
+                                name="svg-spinners:3-dots-bounce"
+                            />
+                            <span v-else>آپلود عکس شما</span>
+                        </Button>
+                    </div>
                 </div>
             </div>
         </template>