72 lines
4.0 KiB
TypeScript
72 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useCommentLocale } from "./comment-locale";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
|
|
|
|
export function AdminCommentRowsSkeleton({ count = 3 }: { count?: number }) {
|
|
const { t } = useCommentLocale();
|
|
return <div role="status" aria-label={t("กำลังโหลดความคิดเห็น", "Loading comments")} className="flex min-w-0 flex-col">
|
|
<span className="sr-only">{t("กำลังโหลดความคิดเห็น…", "Loading comments…")}</span>
|
|
<Table className="table-fixed max-md:block" aria-hidden="true">
|
|
<TableBody className="max-md:block">{Array.from({ length: count }, (_, index) => <TableRow key={index} className="max-md:block">
|
|
<TableCell className="px-0 py-5 align-top whitespace-normal max-md:block max-md:pb-3 md:pr-6">
|
|
<div className="flex min-w-0 flex-col gap-3 py-2">
|
|
<div className="flex items-center gap-3"><Skeleton className="size-10 shrink-0 rounded-full" /><Skeleton className="h-4 w-36 max-w-full" /></div>
|
|
<Skeleton className="h-4 w-4/5" /><Skeleton className="h-4 w-3/5" />
|
|
<div className="flex gap-3"><Skeleton className="h-11 w-16 rounded-full md:h-7" /><Skeleton className="h-11 w-11 rounded-full md:h-7" /><Skeleton className="h-11 w-11 rounded-full md:h-7" /></div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="px-0 py-5 align-top whitespace-normal max-md:block max-md:pt-0 md:w-[280px]">
|
|
<div className="flex items-start gap-2 md:justify-end">
|
|
<Skeleton className="size-11 shrink-0 rounded-full md:size-7" />
|
|
<Skeleton className="size-28 shrink-0 rounded-lg" />
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>)}</TableBody>
|
|
</Table>
|
|
</div>;
|
|
}
|
|
|
|
export function AdminCommentInboxSkeleton() {
|
|
return <div className="flex min-w-0 flex-col gap-6">
|
|
<div className="flex flex-col gap-2"><Skeleton className="h-9 w-48 max-w-full" /><Skeleton className="h-5 w-72 max-w-full" /></div>
|
|
<div className="flex flex-col gap-6 lg:grid lg:grid-cols-[repeat(3,minmax(0,1fr))_auto] lg:items-end">{Array.from({ length: 3 }, (_, index) =>
|
|
<div key={index} className="flex min-w-0 flex-col gap-2"><Skeleton className="h-4 w-36 max-w-full" /><Skeleton className="h-11 w-full md:h-8" /></div>)}
|
|
<Skeleton className="h-11 w-24 self-end md:h-8" />
|
|
</div>
|
|
<AdminCommentRowsSkeleton />
|
|
</div>;
|
|
}
|
|
|
|
export function CommentSkeleton({ count = 3 }: { count?: number }) {
|
|
const { t } = useCommentLocale();
|
|
return <div role="status" aria-label={t("กำลังโหลดความคิดเห็น", "Loading comments")} className="flex flex-col gap-6">
|
|
<span className="sr-only">{t("กำลังโหลดความคิดเห็น…", "Loading comments…")}</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>;
|
|
}
|