64 lines
3.0 KiB
TypeScript
64 lines
3.0 KiB
TypeScript
import Link from "next/link";
|
||
import { Clock3, MailCheck, ShieldCheck } from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { SignOutButton } from "@/modules/auth/components/SignOutButton";
|
||
import type { PublicAccount } from "@/modules/core/types";
|
||
import { UserAvatar } from "@/modules/shared/components/UserAvatar";
|
||
|
||
type PendingAssignmentProps = {
|
||
account: PublicAccount;
|
||
};
|
||
|
||
export function PendingAssignment({ account }: PendingAssignmentProps): React.ReactElement {
|
||
return (
|
||
<main className="flex min-h-svh items-center justify-center bg-background px-4 py-10">
|
||
<section className="page-enter w-full max-w-2xl">
|
||
<div className="mb-6 flex items-center justify-between">
|
||
<div className="flex min-w-0 items-center gap-3">
|
||
<UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="lg" />
|
||
<div className="min-w-0">
|
||
<p className="truncate text-sm font-medium">{account.name}</p>
|
||
<p className="truncate text-xs text-muted-foreground">{account.email}</p>
|
||
</div>
|
||
</div>
|
||
<SignOutButton />
|
||
</div>
|
||
|
||
<Card className="overflow-hidden">
|
||
<CardHeader className="border-b bg-secondary/35">
|
||
<Badge className="w-fit" variant="warning">
|
||
等待分配
|
||
</Badge>
|
||
<CardTitle className="mt-3 text-2xl leading-tight">账号已创建，等待管理员分配机构和角色</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="grid gap-4 pt-5">
|
||
<div className="grid gap-3 md:grid-cols-3">
|
||
<div className="rounded-md border bg-background p-4">
|
||
<Clock3 className="size-5 text-amber-600" aria-hidden="true" />
|
||
<p className="mt-3 text-sm font-medium">账号状态</p>
|
||
<p className="mt-1 text-xs text-muted-foreground">可登录，暂无后台权限。</p>
|
||
</div>
|
||
<div className="rounded-md border bg-background p-4">
|
||
<MailCheck className="size-5 text-primary" aria-hidden="true" />
|
||
<p className="mt-3 text-sm font-medium">机构申请</p>
|
||
<p className="mt-1 text-xs text-muted-foreground">管理员可在用户管理审批。</p>
|
||
</div>
|
||
<div className="rounded-md border bg-background p-4">
|
||
<ShieldCheck className="size-5 text-emerald-600" aria-hidden="true" />
|
||
<p className="mt-3 text-sm font-medium">权限生效</p>
|
||
<p className="mt-1 text-xs text-muted-foreground">分配角色后重新进入即可使用。</p>
|
||
</div>
|
||
</div>
|
||
<Button asChild className="w-fit" variant="outline">
|
||
<Link href="/app/dashboard">刷新状态</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|