85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { InfoIcon } from "lucide-react";
|
|
import { useSyncExternalStore, type ReactNode } 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, showIcon }: { label: ReactNode; showIcon: boolean }) {
|
|
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 transition-colors hover:bg-primary/15 hover:text-primary hover:decoration-2 hover:decoration-primary focus-visible:bg-primary/15 focus-visible:text-primary focus-visible:ring-2 focus-visible:ring-ring md:min-h-0">
|
|
{label}
|
|
{showIcon ? <InfoIcon aria-hidden="true" className="size-3.5 text-muted-foreground" /> : null}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function TermDetail({
|
|
label,
|
|
title,
|
|
detail,
|
|
showIcon = true,
|
|
interactive = false,
|
|
}: {
|
|
label: ReactNode;
|
|
title: string;
|
|
detail: string;
|
|
showIcon?: boolean;
|
|
interactive?: boolean;
|
|
}) {
|
|
const finePointer = useSyncExternalStore(subscribe, getSnapshot, () => false);
|
|
|
|
if (finePointer && !interactive) {
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger aria-label={`ดูรายละเอียด ${title}`}>
|
|
<Trigger label={label} showIcon={showIcon} />
|
|
</HoverCardTrigger>
|
|
<HoverCardContent align="start">
|
|
<p className="font-medium text-primary">{title}</p>
|
|
<p className="mt-1 whitespace-pre-line text-muted-foreground">{detail}</p>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Drawer showSwipeHandle>
|
|
<DrawerTrigger aria-label={`เปิดรายละเอียด ${title}`}>
|
|
<Trigger label={label} showIcon={showIcon} />
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle className="text-primary">{title}</DrawerTitle>
|
|
<DrawerDescription className="whitespace-pre-line text-left">{detail}</DrawerDescription>
|
|
</DrawerHeader>
|
|
<div className="h-6" />
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
}
|