90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import { ArrowRight, CheckCircle2 } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
type ModuleMetric = {
|
|
label: string;
|
|
value: string;
|
|
detail: string;
|
|
};
|
|
|
|
type ModulePageProps = {
|
|
title: string;
|
|
eyebrow: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
phase: "一期" | "二期预留" | "三期预留";
|
|
metrics: ModuleMetric[];
|
|
workflows: string[];
|
|
};
|
|
|
|
export function ModulePage({
|
|
title,
|
|
eyebrow,
|
|
icon: Icon,
|
|
phase,
|
|
metrics,
|
|
workflows,
|
|
}: ModulePageProps): React.ReactElement {
|
|
return (
|
|
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
|
|
<section className="flex flex-col justify-between gap-4 border-b pb-5 lg:flex-row lg:items-end">
|
|
<div className="max-w-3xl">
|
|
<Badge variant={phase === "一期" ? "success" : "secondary"}>{phase}</Badge>
|
|
<div className="mt-4 flex items-center gap-3">
|
|
<span className="inline-flex size-11 items-center justify-center rounded-md bg-secondary text-primary">
|
|
<Icon className="size-5" aria-hidden="true" />
|
|
</span>
|
|
<div>
|
|
<p className="text-xs font-medium text-muted-foreground">{eyebrow}</p>
|
|
<h1 className="text-2xl font-semibold tracking-normal md:text-3xl">{title}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline">筛选</Button>
|
|
<Button>
|
|
新增记录
|
|
<ArrowRight className="size-4" aria-hidden="true" />
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-4 md:grid-cols-3">
|
|
{metrics.map((metric) => (
|
|
<Card key={metric.label}>
|
|
<CardHeader className="p-4">
|
|
<CardDescription>{metric.label}</CardDescription>
|
|
<CardTitle className="text-2xl">{metric.value}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-4 pt-0">
|
|
<p className="text-xs text-muted-foreground">{metric.detail}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</section>
|
|
|
|
<section>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>流转</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ol className="grid gap-3 md:grid-cols-2">
|
|
{workflows.map((workflow) => (
|
|
<li key={workflow} className="flex items-start gap-3 rounded-md border bg-secondary/30 p-3">
|
|
<CheckCircle2 className="mt-0.5 size-4 shrink-0 text-primary" aria-hidden="true" />
|
|
<span className="text-sm">{workflow}</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|