73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import { ChevronDownIcon, InfoIcon } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
|
|
export function ContextHelp({
|
|
title,
|
|
description,
|
|
examples,
|
|
guidance,
|
|
examplesLabel,
|
|
scopeNote,
|
|
icon = <InfoIcon />,
|
|
variant = "card",
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
examples: string;
|
|
guidance: string;
|
|
examplesLabel: string;
|
|
scopeNote?: string | undefined;
|
|
icon?: ReactNode;
|
|
variant?: "card" | "plain";
|
|
}) {
|
|
return (
|
|
<aside
|
|
aria-label={title}
|
|
className={
|
|
variant === "plain"
|
|
? "space-y-1 border-t border-border/60 pt-3 text-sm"
|
|
: "space-y-4 rounded-xl border bg-muted/30 p-4 text-sm sm:p-5"
|
|
}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<span
|
|
aria-hidden="true"
|
|
className={
|
|
variant === "plain"
|
|
? "flex size-5 shrink-0 items-center justify-center pt-1 text-muted-foreground [&_svg]:size-4"
|
|
: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary [&_svg]:size-5"
|
|
}
|
|
>
|
|
{icon}
|
|
</span>
|
|
<div className="min-w-0 space-y-1 pt-1">
|
|
<p className="text-base font-semibold text-foreground">{title}</p>
|
|
<p className="leading-relaxed text-muted-foreground">{description}</p>
|
|
{scopeNote && <p className="leading-relaxed text-muted-foreground">{scopeNote}</p>}
|
|
</div>
|
|
</div>
|
|
<details
|
|
className={
|
|
variant === "plain"
|
|
? "group"
|
|
: "group overflow-hidden rounded-lg border border-primary/10"
|
|
}
|
|
>
|
|
<summary
|
|
className={`flex cursor-pointer list-none items-center gap-3 font-semibold text-primary focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring [&::-webkit-details-marker]:hidden ${variant === "plain" ? "py-2 text-sm hover:underline" : "rounded-lg bg-primary/5 px-4 py-3"}`}
|
|
>
|
|
<ChevronDownIcon
|
|
aria-hidden="true"
|
|
className="size-4 shrink-0 -rotate-90 transition-transform group-open:rotate-0 motion-reduce:transition-none"
|
|
/>
|
|
{examplesLabel}
|
|
</summary>
|
|
<div className="space-y-2 px-4 py-3 leading-relaxed text-muted-foreground">
|
|
<p>{examples}</p>
|
|
<p>{guidance}</p>
|
|
</div>
|
|
</details>
|
|
</aside>
|
|
);
|
|
}
|