added addresses page

frontend/pages/profile/addresses.vue

@@ -1,15 +1,74 @@
 <script setup lang="ts">
+// imports
+
+import useGetAllAddress from "~/composables/api/account/useGetAllAddress";
+
 // meta
 
 definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
 });
+
+// state
+
+const selectedAddress = ref<Address | null>();
+
+const modalIsShow = ref(false);
+
+// queries
+
+const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();
+
+// methods
+
+const handleSelectAddress = (address: Address) => {
+    selectedAddress.value = { ...address };
+};
 </script>
 
 <template>
     <div class="w-full flex flex-col gap-10">
         <ProfilePageTitle title="آدرس های شما" icon="bi:map" />
+
+        <ProfileSection title="همه">
+            <template #button>
+                <AddressModal
+                    :address="undefined"
+                    v-model:is-show="modalIsShow"
+                />
+            </template>
+            <ul
+                v-if="addressesIsLoading"
+                class="w-full grid grid-cols-1 lg:grid-cols-2 gap-5"
+            >
+                <Skeleton
+                    v-for="i in 6"
+                    :key="i"
+                    class="w-full !h-[10rem] !rounded-xl"
+                />
+            </ul>
+
+            <div v-else class="w-full h-max">
+                <div v-if="!addresses?.length" class="flex flex-grow w-full">
+                    <Placeholder
+                        title="آدرسی یافت نشد :("
+                        icon="bi:map"
+                        class="!py-[4rem] !border-none"
+                    />
+                </div>
+
+                <ul v-else class="w-full grid grid-cols-2 gap-5">
+                    <AddressItem
+                        v-for="(address, index) in addresses"
+                        :key="index"
+                        :address="address"
+                        @select="handleSelectAddress"
+                        :isSelected="address.id == selectedAddress?.id"
+                    />
+                </ul>
+            </div>
+        </ProfileSection>
     </div>
 </template>