changed notification and added props

frontend/components/profile/notifications/notification.vue

@@ -1,26 +1,37 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// imports
+
+import usePersianDate from "~/composables/global/usePersianDate";
+
+// types
+
+type Props = {
+    data: Notification;
+};
+
+// props
+
+defineProps<Props>();
+
+// state
+
+const { formatToPersian } = usePersianDate();
+</script>
 
 <template>
-    <li
-        class="w-full rounded-xl border border-slate-200 bg-slate-50 p-4 flex items-center justify-between"
-    >
+    <li class="w-full rounded-xl border border-slate-200 bg-slate-50 p-4 flex items-center justify-between">
         <div class="flex flex-col gap-2">
             <div class="flex items-center gap-3">
-                <Icon name="bi:info-circle" class="lg:text-lg" />
-                <h3 class="max-lg:text-sm font-semibold">تغییر وضعیت سفارش</h3>
+                <Icon
+                    :name="data.notif_type == 'NEWS' ? 'bi:info-circle' : 'bi:bell'"
+                    class="lg:text-lg"
+                />
+                <h3 class="max-lg:text-sm font-semibold">{{ data.title }}</h3>
                 |
-                <span class="text-xs text-cyan-500 font-semibold">
-                    ۲۳ تیر
-                </span>
+                <span class="text-xs text-cyan-500 font-semibold">{{ formatToPersian(data.created_at) }}</span>
             </div>
-            <p
-                class="text-xs lg:text-sm leading-[175%] text-slate-700 text-justify"
-            >
-                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-                استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
-                در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
-                نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
-                کتابهای زیادی در شصت.
+            <p class="text-xs lg:text-sm leading-[175%] text-slate-700 text-justify">
+                {{ data.content }}
             </p>
         </div>
     </li>