From 7eb1528a55e75a7981f9d84038fcf6dd4b1aae00 Mon Sep 17 00:00:00 2001
From: robonen <robonenandrew@gmail.com>
Date: Sun, 15 Jun 2025 15:39:33 +0700
Subject: [PATCH] feat(comment): add Comment entity with types and UI component

---
 src/entities/Comment/index.ts       |  2 ++
 src/entities/Comment/types.ts       |  7 +++++++
 src/entities/Comment/ui/Comment.vue | 29 +++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 src/entities/Comment/index.ts
 create mode 100644 src/entities/Comment/types.ts
 create mode 100644 src/entities/Comment/ui/Comment.vue

diff --git a/src/entities/Comment/index.ts b/src/entities/Comment/index.ts
new file mode 100644
index 0000000..c573a4a
--- /dev/null
+++ b/src/entities/Comment/index.ts
@@ -0,0 +1,2 @@
+export * from './types';
+export { default as Comment } from './ui/Comment.vue';
diff --git a/src/entities/Comment/types.ts b/src/entities/Comment/types.ts
new file mode 100644
index 0000000..520c90c
--- /dev/null
+++ b/src/entities/Comment/types.ts
@@ -0,0 +1,7 @@
+export interface PostComment {
+  id: number;
+  avatar: string;
+  name: string;
+  text: string;
+  created_at: string;
+}
diff --git a/src/entities/Comment/ui/Comment.vue b/src/entities/Comment/ui/Comment.vue
new file mode 100644
index 0000000..19fff55
--- /dev/null
+++ b/src/entities/Comment/ui/Comment.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+export interface CommentProps extends Omit<PostComment, 'text'> {}
+</script>
+
+<script setup lang="ts">
+import type { PostComment } from '../types';
+import { formatDateTime } from '@/shared/utils';
+
+const props = defineProps<CommentProps>();
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <img
+      class="w-10 h-10 rounded-full object-cover"
+      :src="props.avatar"
+      :alt="props.name"
+    >
+    <div class="flex flex-col">
+      <span class="text-sm font-semibold text-gray-900">
+        {{ props.name }}</span>
+      <p class="text-sm">
+        <slot />
+      </p>
+      <span class="text-xs text-foreground-muted-light">
+        {{ formatDateTime(props.created_at) }}</span>
+    </div>
+  </div>
+</template>