Scaffold web frontend: mock-backed chat + PDF split-view, Tailwind/shadcn

2026-07-31 12:16:47 +07:00
parent b72d4bf9d9
commit 967b917001
43 changed files with 5192 additions and 7 deletions
@@ -0,0 +1,39 @@
+import { FileText } from "lucide-react";
+import type { Citation } from "@duoc-thu/shared-types";
+import { badgeVariants } from "./primitives/badge";
+import { cn } from "./lib/utils";
+
+export interface CitationCardProps {
+  citation: Citation;
+  onClick?: () => void;
+}
+
+export function CitationCard({ citation, onClick }: CitationCardProps) {
+  const [fromPage, toPage] = citation.sourcePageRange;
+  const className = cn(
+    badgeVariants({ variant: "outline" }),
+    "mr-1.5 mt-1 border-primary/20 bg-primary/5 font-normal text-foreground",
+    onClick && "cursor-pointer transition-colors hover:bg-primary/10"
+  );
+  const content = (
+    <>
+      <FileText className="h-3.5 w-3.5 text-primary" aria-hidden="true" />
+      <span className="font-bold text-primary">{citation.drugName}</span>
+      <span className="text-muted-foreground">{citation.sectionType}</span>
+      <span className="text-muted-foreground">
+        tr. {fromPage}
+        {toPage !== fromPage ? `–${toPage}` : ""}
+      </span>
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button type="button" className={className} onClick={onClick}>
+        {content}
+      </button>
+    );
+  }
+
+  return <div className={className}>{content}</div>;
+}