40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
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>;
|
||
}
|