init git

components/panel/NotificationItem.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="notification-item" :class="{ 'unread': !read }">
+        <h2>{{ title }} </h2>
+        <div>
+            <span>{{ new Date(createdAt).toLocaleTimeString('fa-IR') }}</span>
+            <i />
+            <span>{{ new Date(createdAt).toLocaleDateString('fa-IR') }}</span>
+        </div>
+        <p v-html="content"></p>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps(['data'])
+const { title, content, createdAt, read } = props.data
+</script>
+
+<style lang="scss" scoped>
+.notification-item {
+    @apply w-full h-[5.8rem] lg:h-[6.4rem] font-vazir rounded-[0.6rem] bg-[#FAFAFA];
+    @apply flex flex-wrap items-center justify-between gap-y-2 p-6 lg:gap-2.5;
+
+    h2 {
+        @apply text-[#333333] text-xs lg:text-base lg:font-bold lg:w-full truncate;
+    }
+
+    p {
+        @apply text-neutral-600 text-xs lg:text-base leading-loose truncate w-full lg:w-max;
+    }
+
+    div {
+        @apply flex items-center gap-1.5 lg:gap-3 lg:order-last;
+
+        span {
+            @apply text-zinc-500 text-[0.6em] lg:text-base font-medium whitespace-nowrap;
+        }
+
+        i {
+            @apply w-2 h-2 bg-neutral-200 rounded-full;
+        }
+    }
+
+    &.unread {
+        @apply shadow-[0px_0px_7px_#0000001a] bg-white;
+
+        h2 {
+            @apply font-bold;
+        }
+    }
+}
+</style>