60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { ShieldAlert, Info, X } from "lucide-react";
|
|
import { cn } from "./lib/utils";
|
|
|
|
interface DisclaimerBannerProps {
|
|
className?: string;
|
|
collapsible?: boolean;
|
|
}
|
|
|
|
export function DisclaimerBanner({ className, collapsible = true }: DisclaimerBannerProps) {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
if (collapsed) {
|
|
return (
|
|
<div className={cn("bg-surface border-b border-border-subtle px-4 py-1 flex items-center justify-between text-xs text-txt-muted", className)}>
|
|
<div className="flex items-center gap-1.5">
|
|
<ShieldAlert className="w-3.5 h-3.5 text-status-warning shrink-0" />
|
|
<span>Thông tin trích từ Dược thư Quốc gia Việt Nam 2018 (Không thay thế chỉ định y khoa).</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setCollapsed(false)}
|
|
className="text-accent-primary hover:underline text-[0.7rem] font-medium"
|
|
>
|
|
Hiện chi tiết
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative flex items-center justify-between gap-3 border-b border-border-subtle bg-surface-elevated/90 px-4 py-2 text-xs text-txt-secondary backdrop-blur-md transition-all shadow-sm",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2.5 min-w-0">
|
|
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-status-warning-bg text-status-warning">
|
|
<ShieldAlert className="h-3.5 w-3.5" />
|
|
</div>
|
|
<p className="m-0 truncate text-[0.78rem] leading-tight">
|
|
<strong className="font-semibold text-txt-primary">Cảnh báo lâm sàng:</strong> Nội dung câu trả lời được truy xuất trực tiếp từ Dược thư Quốc gia Việt Nam 2018, chỉ mang tính chất tra cứu chuyên môn và không thay thế chỉ định điều trị của bác sĩ hoặc dược sĩ lâm sàng.
|
|
</p>
|
|
</div>
|
|
|
|
{collapsible && (
|
|
<button
|
|
onClick={() => setCollapsed(true)}
|
|
aria-label="Thu gọn cảnh báo"
|
|
className="rounded-lg p-1 text-txt-muted hover:bg-surface-hover hover:text-txt-primary transition-colors shrink-0"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|