From e7648a1a0a2e046694c2a4893f8efa6853d8ccc2 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 8 Feb 2025 23:49:13 +0330
Subject: [PATCH] added profile picture modal

---
 .../components/profile/index/PictureModal.vue | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 frontend/components/profile/index/PictureModal.vue

diff --git a/frontend/components/profile/index/PictureModal.vue b/frontend/components/profile/index/PictureModal.vue
new file mode 100644
index 0000000..17b4bdc
--- /dev/null
+++ b/frontend/components/profile/index/PictureModal.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+// state
+
+const isShow = ref(false);
+
+const currentProfile = ref("");
+
+const avatars = ref([
+    "/avatars/1.jpg",
+    "/avatars/2.jpg",
+    "/avatars/3.jpg",
+    "/avatars/4.jpg",
+    "/avatars/5.jpg",
+    "/avatars/1.jpg",
+    "/avatars/2.jpg",
+    "/avatars/3.jpg",
+    "/avatars/4.jpg",
+    "/avatars/5.jpg",
+    "/avatars/1.jpg",
+    "/avatars/2.jpg",
+    "/avatars/3.jpg",
+    "/avatars/4.jpg",
+    "/avatars/5.jpg",
+    "/avatars/1.jpg",
+    "/avatars/2.jpg",
+    "/avatars/3.jpg",
+    "/avatars/4.jpg",
+    "/avatars/5.jpg",
+    "/avatars/1.jpg",
+    "/avatars/2.jpg",
+    "/avatars/3.jpg",
+    "/avatars/4.jpg",
+    "/avatars/5.jpg",
+    "/avatars/5.jpg",
+    "/avatars/1.jpg",
+    "/avatars/2.jpg",
+    "/avatars/3.jpg",
+    "/avatars/4.jpg",
+    "/avatars/5.jpg",
+    "/avatars/1.jpg",
+    "/avatars/2.jpg",
+    "/avatars/3.jpg",
+    "/avatars/4.jpg",
+    "/avatars/5.jpg",
+]);
+</script>
+
+<template>
+    <Modal v-model="isShow" title="عکس پروفایل" icon="bi:image" iconSize="20">
+        <template #trigger>
+            <button
+                class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
+            >
+                <Icon name="bi:pencil" class="**:fill-slate-100" size="12" />
+            </button>
+        </template>
+        <template #content>
+            <div class="w-max">
+                <div
+                    class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
+                >
+                    <div
+                        class="flex items-center justify-between w-full flex-wrap gap-4 max-w-[500px]"
+                    >
+                        <button
+                            v-for="(avatar, index) in avatars"
+                            :key="index"
+                            class="size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
+                        >
+                            <Avatar
+                                :src="avatar"
+                                :alt="`avatar-${index}`"
+                                class="size-full"
+                            />
+                        </button>
+                    </div>
+
+                    <div
+                        class="w-full flex-center gap-4 max-w-[500px] flex-wrap"
+                    >
+                        <button
+                            class="size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                        />
+                        <button
+                            class="size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                        />
+                        <button
+                            class="size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                        />
+                        <button
+                            class="size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                        />
+                        <button
+                            class="size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                        />
+                    </div>
+
+                    <div class="w-full flex-col-center gap-5">
+                        <div
+                            class="size-32 border border-slate-200 rounded-full"
+                        >
+                            <Avatar
+                                :src="currentProfile"
+                                :alt="''"
+                                class="size-full"
+                            />
+                        </div>
+                        <Button class="rounded-full">آپلود عکس شما</Button>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </Modal>
+</template>
+
+<style scoped></style>