Mamalizz
117 lines
4.0 KiB
Vue
117 lines
4.0 KiB
Vue
<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>
|