53 lines
2.1 KiB
TypeScript
53 lines
2.1 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
||
import { Database } from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
||
type ModulePageProps = {
|
||
title: string;
|
||
eyebrow: string;
|
||
description: string;
|
||
icon: LucideIcon;
|
||
phase: "待接入" | "二期预留" | "三期预留";
|
||
};
|
||
|
||
export function ModulePage({ title, eyebrow, description, icon: Icon, phase }: ModulePageProps): React.ReactElement {
|
||
return (
|
||
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
|
||
<section className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-start lg:justify-between">
|
||
<div className="flex min-w-0 items-center gap-3">
|
||
<span className="inline-flex size-9 items-center justify-center rounded-md bg-secondary text-primary">
|
||
<Icon className="size-4" aria-hidden="true" />
|
||
</span>
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-2">
|
||
<h1 className="truncate text-xl font-semibold tracking-normal">{title}</h1>
|
||
<Badge variant="secondary">{phase}</Badge>
|
||
</div>
|
||
<p className="mt-1 truncate text-sm text-muted-foreground">{eyebrow}</p>
|
||
<p className="mt-2 max-w-3xl text-sm text-muted-foreground">{description}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<Card className="max-w-3xl">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2 text-base">
|
||
<Database className="size-5 text-primary" aria-hidden="true" />
|
||
未接入真实数据源
|
||
</CardTitle>
|
||
<CardDescription>当前模块暂不展示业务记录、统计指标或流程入口。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-sm text-muted-foreground">
|
||
接入对应的 Drizzle 查询和操作 API 前，这里只保留模块位置，不渲染未落库记录或伪造待办。
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|