84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { useState, useMemo } from 'react';
|
||
import { syntaxHighlight } from '../utils/syntaxHighlight';
|
||
import './JsonViewer.css';
|
||
|
||
export type FontFamily = 'jetbrains' | 'fira';
|
||
|
||
interface JsonViewerProps {
|
||
value: string;
|
||
title?: string;
|
||
placeholder?: string;
|
||
fontFamily?: FontFamily;
|
||
}
|
||
|
||
const FONT_FAMILIES = {
|
||
jetbrains: "'JetBrains Mono', monospace",
|
||
fira: "'Fira Mono', monospace"
|
||
};
|
||
|
||
export function JsonViewer({
|
||
value,
|
||
title = 'Форматированный JSON',
|
||
placeholder = 'Форматированный результат появится здесь...',
|
||
fontFamily = 'jetbrains'
|
||
}: JsonViewerProps) {
|
||
const [copied, setCopied] = useState(false);
|
||
|
||
const highlightedValue = useMemo(() => {
|
||
return value ? syntaxHighlight(value) : '';
|
||
}, [value]);
|
||
|
||
const handleCopy = async () => {
|
||
if (!value) return;
|
||
|
||
try {
|
||
await navigator.clipboard.writeText(value);
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 2000);
|
||
} catch (err) {
|
||
console.error('Ошибка копирования:', err);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="json-viewer">
|
||
<div className="viewer-header">
|
||
<h2>{title}</h2>
|
||
{value && (
|
||
<button
|
||
className="copy-button"
|
||
onClick={handleCopy}
|
||
title="Копировать в буфер обмена"
|
||
>
|
||
{copied ? (
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
) : (
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
|
||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
)}
|
||
</div>
|
||
{value ? (
|
||
<pre
|
||
className="viewer-content"
|
||
dangerouslySetInnerHTML={{ __html: highlightedValue }}
|
||
style={{ fontFamily: FONT_FAMILIES[fontFamily] }}
|
||
/>
|
||
) : (
|
||
<pre
|
||
className="viewer-content"
|
||
style={{ fontFamily: FONT_FAMILIES[fontFamily] }}
|
||
>
|
||
{placeholder}
|
||
</pre>
|
||
)}
|
||
{copied && <div className="copy-notification">Скопировано!</div>}
|
||
</div>
|
||
);
|
||
}
|