79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { InfoIcon } from "lucide-react";
|
|
import { useSyncExternalStore } from "react";
|
|
|
|
import {
|
|
Drawer,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer";
|
|
import {
|
|
HoverCard,
|
|
HoverCardContent,
|
|
HoverCardTrigger,
|
|
} from "@/components/ui/hover-card";
|
|
|
|
const finePointerQuery = "(hover: hover) and (pointer: fine)";
|
|
|
|
function subscribe(callback: () => void) {
|
|
const query = window.matchMedia(finePointerQuery);
|
|
query.addEventListener("change", callback);
|
|
return () => query.removeEventListener("change", callback);
|
|
}
|
|
|
|
function getSnapshot() {
|
|
return window.matchMedia(finePointerQuery).matches;
|
|
}
|
|
|
|
function Trigger({ label }: { label: string }) {
|
|
return (
|
|
<span className="inline-flex min-h-11 cursor-help items-center gap-1 rounded-md text-left font-medium underline decoration-border underline-offset-4 outline-none hover:text-primary focus-visible:ring-2 focus-visible:ring-ring md:min-h-0">
|
|
{label}
|
|
<InfoIcon aria-hidden="true" className="size-3.5 text-muted-foreground" />
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function TermDetail({
|
|
label,
|
|
detail,
|
|
}: {
|
|
label: string;
|
|
detail: string;
|
|
}) {
|
|
const finePointer = useSyncExternalStore(subscribe, getSnapshot, () => false);
|
|
|
|
if (finePointer) {
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger aria-label={`ดูรายละเอียด ${label}`}>
|
|
<Trigger label={label} />
|
|
</HoverCardTrigger>
|
|
<HoverCardContent align="start">
|
|
<p className="font-medium">{label}</p>
|
|
<p className="mt-1 text-muted-foreground">{detail}</p>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Drawer showSwipeHandle>
|
|
<DrawerTrigger aria-label={`เปิดรายละเอียด ${label}`}>
|
|
<Trigger label={label} />
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>{label}</DrawerTitle>
|
|
<DrawerDescription>{detail}</DrawerDescription>
|
|
</DrawerHeader>
|
|
<div className="h-6" />
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
}
|