- Change dialog surfaces, drawers, and confirm dialogs from off-white (#F4F3EB) to white background - Standardize border radius from 3xl/36px to 2xl across multiple components - Update default setting view from 'account' to 'general' for better user experience - Adjust input field heights and backgrounds for improved visual consistency
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
export type KnowledgePageHeaderProps = {
|
|
title: string;
|
|
subtitle: string;
|
|
totalCount: number;
|
|
totalSize: string;
|
|
documentsLabel: string;
|
|
storageLabel: string;
|
|
};
|
|
|
|
export default function KnowledgePageHeader({
|
|
title,
|
|
subtitle,
|
|
totalCount,
|
|
totalSize,
|
|
documentsLabel,
|
|
storageLabel,
|
|
}: KnowledgePageHeaderProps) {
|
|
return (
|
|
<div className="mb-6 flex shrink-0 flex-col justify-between gap-4 md:flex-row md:items-start">
|
|
<div>
|
|
<h1
|
|
className="mb-3 text-4xl font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6] md:text-4xl"
|
|
style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
|
|
>
|
|
{title}
|
|
</h1>
|
|
<p className="text-[17px] text-[#171717]/70 dark:text-gray-400">{subtitle}</p>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2 md:mt-2 md:min-w-[320px]">
|
|
<div className="rounded-2xl bg-[#f4f7fb] px-5 py-4 dark:bg-[#222225]">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-[#99A0AE] dark:text-gray-500">{documentsLabel}</div>
|
|
<div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalCount}</div>
|
|
</div>
|
|
<div className="rounded-2xl bg-[#fff7ed] px-5 py-4 dark:bg-[#31251a]">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-[#6b7280] dark:text-gray-400">{storageLabel}</div>
|
|
<div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalSize}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|