feat : Con more reaible

components/public/term-detail.tsx

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