nx/nx-dev/shared-ui-fence/src/lib/fences/terminal-shell.component.tsx

30 lines
1.1 KiB
TypeScript

import { cx } from '@nx/nx-dev/ui-primitives';
import { ReactNode } from 'react';
export function TerminalShellWrapper({
isMessageBelow,
children,
}: {
isMessageBelow: boolean;
children: ReactNode;
}): JSX.Element {
return (
<div
className={cx(
'hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60',
isMessageBelow ? 'rounded-t-lg border-b-0' : 'rounded-lg'
)}
>
<div className="relative flex justify-center p-2 border-b border-slate-200 bg-slate-100/50 text-slate-400 dark:border-slate-700 dark:bg-slate-700/50 dark:text-slate-500">
<div className="absolute flex items-center gap-2 left-2 top-3">
<span className="w-2 h-2 bg-red-400 rounded-full dark:bg-red-600" />
<span className="w-2 h-2 bg-yellow-400 rounded-full dark:bg-yellow-600" />
<span className="w-2 h-2 bg-green-400 rounded-full dark:bg-green-600" />
</div>
<span className="h-5"></span>
</div>
{children}
</div>
);
}