feat : comment feature

2026-10-08 01:40:08 +07:00
parent 8c8815cda5
commit 5812d99715
65 changed files with 27013 additions and 10 deletions
@@ -0,0 +1,31 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function CommentSkeleton({ count = 3 }: { count?: number }) {
+  return <div role="status" aria-label="กำลังโหลดความคิดเห็น" className="flex flex-col gap-6">
+    <span className="sr-only">กำลังโหลดความคิดเห็น…</span>
+    <div aria-hidden="true" className="flex flex-col gap-6">{Array.from({ length: count }, (_, index) =>
+      <div key={index} className="flex gap-3">
+        <Skeleton className="size-10 shrink-0 rounded-full" />
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <Skeleton className="h-4 w-36 max-w-full" /><Skeleton className="h-4 w-4/5" /><Skeleton className="h-4 w-3/5" />
+          <div className="mt-1 flex gap-3"><Skeleton className="h-7 w-12 rounded-full" /><Skeleton className="h-7 w-12 rounded-full" /><Skeleton className="h-7 w-16 rounded-full" /></div>
+        </div>
+      </div>)}
+    </div>
+  </div>;
+}
+
+export function CommentBoardSkeleton() {
+  return <div className="flex flex-col gap-8 py-2">
+    <Skeleton className="h-7 w-48" />
+    <div className="flex items-center gap-3"><Skeleton className="size-10 shrink-0 rounded-full" /><Skeleton className="h-10 flex-1" /></div>
+    <CommentSkeleton />
+  </div>;
+}
+
+export function CommentThreadSkeleton() {
+  return <div className="flex flex-col gap-4">
+    <CommentSkeleton count={1} />
+    <div className="ml-5 border-l border-border pl-8"><CommentSkeleton count={2} /></div>
+  </div>;
+}