48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
|
type PlaceholderPageProps = {
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function PlaceholderPage({ title, description }: PlaceholderPageProps) {
|
||
|
|
return (
|
||
|
|
<div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
|
||
|
|
<div>
|
||
|
|
<h1 className="font-display display-lg text-ink">{title}</h1>
|
||
|
|
<p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
|
||
|
|
{description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section className="relative overflow-hidden rounded-3xl border border-hairline bg-canvas-soft px-10 py-20 text-center">
|
||
|
|
<div
|
||
|
|
aria-hidden
|
||
|
|
className="pointer-events-none absolute -right-24 top-0 h-72 w-72 rounded-full opacity-50 blur-3xl"
|
||
|
|
style={{
|
||
|
|
backgroundImage:
|
||
|
|
"radial-gradient(circle, color-mix(in srgb, var(--gradient-sky) 50%, transparent), transparent 70%)",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
aria-hidden
|
||
|
|
className="pointer-events-none absolute -left-20 bottom-0 h-64 w-64 rounded-full opacity-45 blur-3xl"
|
||
|
|
style={{
|
||
|
|
backgroundImage:
|
||
|
|
"radial-gradient(circle, color-mix(in srgb, var(--gradient-lavender) 50%, transparent), transparent 70%)",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<div className="relative">
|
||
|
|
<div className="caption-label inline-flex rounded-full bg-surface-strong px-3 py-1 text-muted-foreground">
|
||
|
|
建设中
|
||
|
|
</div>
|
||
|
|
<p className="font-display display-sm mx-auto mt-5 max-w-md text-ink">
|
||
|
|
这个页面正在编写中
|
||
|
|
</p>
|
||
|
|
<p className="mx-auto mt-3 max-w-md text-sm leading-7 text-body">
|
||
|
|
页面骨架与设计语言已就绪，后续将填充具体功能与数据。
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|