Files
duocthu/apps/web/app/layout.tsx
T

63 lines
2.9 KiB
TypeScript

import type { Metadata } from "next";
import { ThemeProvider, ThemeScript, ThemeSelector, DisclaimerBanner } from "@duoc-thu/ui";
import { NavTabs } from "./_components/NavTabs";
import { Pill, ShieldCheck, Cpu } from "lucide-react";
import "./globals.css";
export const metadata: Metadata = {
title: "Dược Thư RAG — Medical Chatbot Platform (DTQGVN 2018)",
description: "Tra cứu 684 chuyên luận Dược thư Quốc gia Việt Nam 2018 với căn cứ theo trang in, hỗ trợ bác sĩ làm rõ dữ kiện và thảo luận theo bối cảnh lâm sàng.",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="vi" data-theme="dark" className="h-full">
<head>
<ThemeScript />
</head>
<body className="relative flex min-h-screen flex-col bg-app text-txt-primary antialiased selection:bg-accent-soft selection:text-accent-primary">
<ThemeProvider>
{/* Safety Medical Disclaimer Banner */}
<DisclaimerBanner />
{/* Application Header */}
<header className="sticky top-0 z-30 flex flex-wrap items-center justify-between gap-4 border-b border-border-subtle bg-surface/90 px-4 sm:px-6 py-2.5 text-txt-primary shadow-sm backdrop-blur-xl">
<div className="flex items-center gap-3">
<div className="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl bg-accent-primary text-txt-inverse shadow-sm">
<Pill className="h-5 w-5" />
</div>
<div>
<div className="flex items-center gap-2">
<h1 className="m-0 text-sm font-extrabold tracking-tight text-txt-primary sm:text-base">
Dược Thư AI System
</h1>
<span className="hidden items-center gap-1 rounded-full border border-border-accent/40 bg-accent-soft px-2 py-0.5 text-[0.65rem] font-bold tracking-wider text-accent-primary sm:inline-flex">
<ShieldCheck className="h-3 w-3" />
ENTAILEMENT VERIFIED
</span>
</div>
</div>
</div>
<div className="flex items-center gap-3">
<NavTabs />
{/* Theme Mode Selector (Auto, Light, Dark, Heavy Glass) */}
<ThemeSelector />
{/* System Status Pill */}
<div className="hidden items-center gap-1.5 rounded-full border border-border-subtle bg-surface-elevated px-3 py-1 text-xs font-semibold text-accent-primary backdrop-blur-md md:flex shadow-sm">
<Cpu className="h-3.5 w-3.5 text-accent-primary animate-pulse" />
<span>Gateway Online</span>
</div>
</div>
</header>
{/* Main Content Workspace */}
<main className="relative z-10 flex flex-1 overflow-hidden">{children}</main>
</ThemeProvider>
</body>
</html>
);
}