33 lines
891 B
TypeScript
33 lines
891 B
TypeScript
|
export function ContextHelp({
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
examples,
|
||
|
|
guidance,
|
||
|
|
examplesLabel,
|
||
|
|
scopeNote,
|
||
|
|
}: {
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
examples: string;
|
||
|
|
guidance: string;
|
||
|
|
examplesLabel: string;
|
||
|
|
scopeNote?: string | undefined;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<aside aria-label={title} className="space-y-2 rounded-lg border bg-muted/40 p-4 text-sm">
|
||
|
|
<p className="font-medium">{title}</p>
|
||
|
|
<p className="text-muted-foreground">{description}</p>
|
||
|
|
{scopeNote && <p>{scopeNote}</p>}
|
||
|
|
<details className="group">
|
||
|
|
<summary className="cursor-pointer rounded-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-ring">
|
||
|
|
{examplesLabel}
|
||
|
|
</summary>
|
||
|
|
<div className="mt-2 space-y-2 text-muted-foreground">
|
||
|
|
<p>{examples}</p>
|
||
|
|
<p>{guidance}</p>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|