Parsa Nazer
93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useGetAccount from "~/composables/api/account/useGetAccount";
|
|
import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
is_user: boolean;
|
|
date: string;
|
|
message: string;
|
|
files: ServerFile[];
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { is_user, files, date } = toRefs(props);
|
|
|
|
// state
|
|
|
|
const timeAgo = usePersianTimeAgo(date.value);
|
|
|
|
// queries
|
|
|
|
const { data: account } = useGetAccount();
|
|
|
|
// computed
|
|
|
|
const profile = computed(() => {
|
|
return is_user.value
|
|
? account.value?.profile_photo
|
|
? account.value?.profile_photo
|
|
: "/img/avatars/1.jpg"
|
|
: "/img/avatars/3.jpg";
|
|
});
|
|
|
|
const username = computed(() => {
|
|
return is_user.value ? `${account.value?.first_name} ${account.value?.last_name}` : "ادمین پشتیبانی هی ملز";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="w-full flex flex-col justify-center gap-2"
|
|
:class="is_user ? 'items-start' : 'items-end'"
|
|
>
|
|
<div
|
|
class="w-full lg:w-1/2 bg-slate-50 border border-slate-200 rounded-xl p-5 flex items-start"
|
|
:class="is_user ? 'rounded-br-none' : 'rounded-bl-none'"
|
|
>
|
|
<div class="w-2/12 flex items-start justify-start">
|
|
<NuxtImg
|
|
:src="profile"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
class="size-16 rounded-full"
|
|
/>
|
|
</div>
|
|
|
|
<div class="w-10/12 flex flex-col items-start pt-2">
|
|
<div class="flex flex-col gap-0.5 w-full">
|
|
<p
|
|
class="text-[10px] font-semibold text-[#1677FF] line-clamp-1 text-right"
|
|
style="direction: ltr"
|
|
>
|
|
{{ timeAgo }}
|
|
</p>
|
|
<p class="text-xs font-semibold text-dynamic-secondary line-clamp-1">
|
|
{{ username }}
|
|
</p>
|
|
</div>
|
|
<div class="py-2 text-start">
|
|
{{ message }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-1/2 grid grid-cols-2 lg:grid-cols-3 gap-2">
|
|
<Attachment
|
|
v-for="(attachment, index) in files"
|
|
:index="index + 1"
|
|
:link="attachment.file_link"
|
|
:size="attachment.size"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|