astral/buzz-sheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(comments) : show formatted Thai dates in tooltips

Browse Source
This commit is contained in:
gunshiz
2026-10-13 00:16:26 +07:00 Unverified
parent d58dbcced9
commit 3b06d05a9e
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/comments/comment-card.tsx
+7 -2
View File
@@ -13,6 +13,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
import { Alert, AlertDescription } from "@/components/ui/alert"; import { Alert, AlertDescription } from "@/components/ui/alert";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"; import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { SimpleTooltip } from "@/components/tooltip";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "@/components/ui/dropdown-menu"; import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { CommentSkeleton } from "./comment-skeleton"; import { CommentSkeleton } from "./comment-skeleton";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
@@ -41,6 +42,10 @@ function subscribeClock(listener: () => void) {
} }
const clockSnapshot = () => clockTime; const clockSnapshot = () => clockTime;
const serverClockSnapshot = () => 0; const serverClockSnapshot = () => 0;
const timestampFormatter = new Intl.DateTimeFormat("th-TH", {
calendar: "gregory", timeZone: "Asia/Bangkok", day: "numeric", month: "short", year: "numeric",
hour: "2-digit", minute: "2-digit", hourCycle: "h23",
});
function CommentTimestamp({ value }: { value: string }) { function CommentTimestamp({ value }: { value: string }) {
const now = useSyncExternalStore(subscribeClock, clockSnapshot, serverClockSnapshot); const now = useSyncExternalStore(subscribeClock, clockSnapshot, serverClockSnapshot);
function relativeTime() { function relativeTime() {
@@ -52,9 +57,9 @@ function CommentTimestamp({ value }: { value: string }) {
const [size, unit] = units.find(([size]) => absolute >= size)!; const [size, unit] = units.find(([size]) => absolute >= size)!;
return formatter.format(Math.round(seconds / size), unit); return formatter.format(Math.round(seconds / size), unit);
} }
return <time dateTime={value} title={value} className="text-xs text-muted-foreground">{now > 0 return <SimpleTooltip text={timestampFormatter.format(new Date(value))}><time dateTime={value} tabIndex={0} className="cursor-default text-xs text-muted-foreground hover:underline">{now > 0
? relativeTime() ? relativeTime()
: `${value.slice(0, 16).replace("T")}`}</time>; : `${value.slice(0, 16).replace("T", " ")}`}</time></SimpleTooltip>;
} }
export function CommentImages({ images }: { images: CommentImage[] }) { export function CommentImages({ images }: { images: CommentImage[] }) {