41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react"
|
|
|
|
type AdminSectionPlaceholderProps = {
|
|
feature: string
|
|
summary: string
|
|
requiredPermission: string
|
|
nextSteps: string[]
|
|
children?: ReactNode
|
|
}
|
|
|
|
export function AdminSectionPlaceholder({
|
|
feature,
|
|
summary,
|
|
requiredPermission,
|
|
nextSteps,
|
|
children,
|
|
}: AdminSectionPlaceholderProps) {
|
|
return (
|
|
<section className="space-y-5 rounded-xl border border-neutral-200 p-6">
|
|
<div className="space-y-2">
|
|
<h2 className="text-xl font-medium">{feature}</h2>
|
|
<p className="text-sm text-neutral-600">{summary}</p>
|
|
<p className="text-xs uppercase tracking-wide text-neutral-500">
|
|
Required permission: {requiredPermission}
|
|
</p>
|
|
</div>
|
|
|
|
{children}
|
|
|
|
<div className="rounded-lg border border-neutral-200 bg-neutral-50 p-4">
|
|
<p className="text-sm font-medium text-neutral-800">Planned next steps</p>
|
|
<ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-neutral-600">
|
|
{nextSteps.map((step) => (
|
|
<li key={step}>{step}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|