38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { LinkifiedText } from '../../../lib/linkified-text';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface OutputTabProps {
|
|
outputPreviewName: string;
|
|
outputPreviewContent: string;
|
|
onViewFull: () => void;
|
|
}
|
|
|
|
export function OutputTab({ outputPreviewName, outputPreviewContent, onViewFull }: OutputTabProps) {
|
|
const { t } = useTranslation('detail');
|
|
return (
|
|
<div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<div className="font-bold text-[13px] text-slate-800">{t('output.title')}</div>
|
|
{outputPreviewName && (
|
|
<button onClick={onViewFull} className="text-2xs text-blue-600 font-bold hover:underline">{t('output.viewFull')}</button>
|
|
)}
|
|
</div>
|
|
{outputPreviewName ? (
|
|
<>
|
|
<div className="text-2xs text-slate-400 mb-2 font-mono">{outputPreviewName}</div>
|
|
{/* LinkifiedText turns inline `output/foo.md` references into
|
|
clickable anchors that the OutputPreviewProvider opens in
|
|
the preview pane. Plain `<pre>` rendering otherwise. */}
|
|
<LinkifiedText
|
|
as="pre"
|
|
className="text-xs whitespace-pre-wrap bg-slate-50 rounded-xl p-3 min-h-[260px] max-h-[540px] overflow-auto border border-slate-100"
|
|
text={outputPreviewContent.slice(0, 12000)}
|
|
/>
|
|
</>
|
|
) : (
|
|
<div className="text-[13px] text-slate-500">{t('output.empty')}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|