Mamalizz
60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
address?: Address;
|
|
isSelected?: boolean;
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
// emit
|
|
|
|
const emit = defineEmits(["select"]);
|
|
|
|
// computed
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
@click="!!address ? emit('select', address) : null"
|
|
:class="
|
|
isSelected
|
|
? 'border-cyan-500 ring-2 ring-offset-2 ring-cyan-500'
|
|
: 'border-gray-300'
|
|
"
|
|
class="flex flex-col items-center transition-all cursor-pointer w-full gap-4 p-4 border rounded-xl bg-gray-50"
|
|
>
|
|
<span
|
|
class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900"
|
|
>
|
|
آدرس
|
|
</span>
|
|
|
|
<div
|
|
class="flex flex-col items-center justify-between w-full gap-4 lg:flex-row"
|
|
>
|
|
<span
|
|
class="w-full text-start text-sm lg:text-[1rem] lg:w-9/12 text-gray-700"
|
|
>
|
|
{{
|
|
!!address
|
|
? `ایران, ${address.province}, ${address.city}, ${address.full_address}, کدپستی ${address.postal_code}`
|
|
: "افزودن آدرس جدید"
|
|
}}
|
|
</span>
|
|
|
|
<div class="flex items-center justify-end w-full lg:w-3/12">
|
|
<AddressModal
|
|
@add="(data) => $emit('add', data)"
|
|
:address="address"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped></style>
|