nx/nx-dev/ui-markdoc/src/lib/nodes/fences/codeOutput.component.tsx
2022-10-13 17:15:57 -04:00

21 lines
628 B
TypeScript

import { ReactNode } from 'react';
export function CodeOutput({
content,
fileName,
}: {
content: ReactNode;
fileName: string;
}): JSX.Element {
return (
<div className="hljs not-prose w-full overflow-x-auto rounded-lg border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60">
{!!fileName && (
<div className="flex border-b border-slate-200 bg-slate-50 px-4 py-2 italic text-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-500">
{fileName}
</div>
)}
<div className="p-4">{content}</div>
</div>
);
}