From bead035a7bf0837a670495872ef05aa12950be33 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 28 Feb 2025 23:09:06 +0330
Subject: [PATCH] re designed ticket bubble

---
 .../profile/tickets/[id]/TicketBubble.vue     | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 frontend/components/profile/tickets/[id]/TicketBubble.vue

diff --git a/frontend/components/profile/tickets/[id]/TicketBubble.vue b/frontend/components/profile/tickets/[id]/TicketBubble.vue
new file mode 100644
index 0000000..b7f0da6
--- /dev/null
+++ b/frontend/components/profile/tickets/[id]/TicketBubble.vue
@@ -0,0 +1,91 @@
+<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(new Date(date.value));
+
+// queries
+
+const { data: account } = useGetAccount();
+
+// computed
+
+const profile = computed(() => {
+    return is_user.value
+        ? account.value?.profile_photo
+            ? account.value?.profile_photo
+            : "/avatars/1.jpg"
+        : "/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">
+                <img :src="profile" 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>