104 lines
4.4 KiB
JavaScript
104 lines
4.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import hljs from 'highlight.js/lib/core';
|
|
import json from 'highlight.js/lib/languages/json';
|
|
import 'highlight.js/styles/monokai.css';
|
|
|
|
hljs.registerLanguage('json', json);
|
|
|
|
export default function CollapsibleRawSections({ container }) {
|
|
const [showCreation, setShowCreation] = useState(false);
|
|
const [showProgress, setShowProgress] = useState(false);
|
|
const [showCompletion, setShowCompletion] = useState(false);
|
|
const [copied, setCopied] = useState({ creation: false, progress: false, completion: false });
|
|
|
|
const handleCopy = (section, data) => {
|
|
navigator.clipboard.writeText(JSON.stringify(data, null, 2));
|
|
setCopied(prev => ({ ...prev, [section]: true }));
|
|
setTimeout(() => setCopied(prev => ({ ...prev, [section]: false })), 1200);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{/* Creation Section */}
|
|
{container.creation && (
|
|
<div>
|
|
<h4 style={{ display: 'flex', alignItems: 'center' }}>
|
|
<span
|
|
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: 1 }}
|
|
onClick={() => setShowCreation(v => !v)}
|
|
>
|
|
<i className={`fas fa-chevron-${showCreation ? 'down' : 'right'}`} style={{ marginRight: 6 }} />
|
|
Creation
|
|
</span>
|
|
<button
|
|
title="Copy Creation JSON"
|
|
onClick={e => { e.stopPropagation(); handleCopy('creation', container.creation); }}
|
|
style={{ marginLeft: 8, border: 'none', background: 'none', cursor: 'pointer', color: '#ccc' }}
|
|
>
|
|
{copied.creation ? <span style={{ color: '#6f6' }}>Copied!</span> : <i className="fas fa-copy" />}
|
|
</button>
|
|
</h4>
|
|
{showCreation && (
|
|
<pre className="hljs"><code>
|
|
<div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.creation || {}, null, 2), { language: 'json' }).value }} />
|
|
</code></pre>
|
|
)}
|
|
</div>
|
|
)}
|
|
{/* Progress Section */}
|
|
{container.progress && container.progress.length > 0 && (
|
|
<div>
|
|
<h4 style={{ display: 'flex', alignItems: 'center' }}>
|
|
<span
|
|
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: 1 }}
|
|
onClick={() => setShowProgress(v => !v)}
|
|
>
|
|
<i className={`fas fa-chevron-${showProgress ? 'down' : 'right'}`} style={{ marginRight: 6 }} />
|
|
Progress
|
|
</span>
|
|
<button
|
|
title="Copy Progress JSON"
|
|
onClick={e => { e.stopPropagation(); handleCopy('progress', container.progress); }}
|
|
style={{ marginLeft: 8, border: 'none', background: 'none', cursor: 'pointer', color: '#ccc' }}
|
|
>
|
|
{copied.progress ? <span style={{ color: '#6f6' }}>Copied!</span> : <i className="fas fa-copy" />}
|
|
</button>
|
|
</h4>
|
|
{showProgress && (
|
|
<pre className="hljs"><code>
|
|
<div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.progress || {}, null, 2), { language: 'json' }).value }} />
|
|
</code></pre>
|
|
)}
|
|
</div>
|
|
)}
|
|
{/* Completion Section */}
|
|
{container.completion && (
|
|
<div>
|
|
<h4 style={{ display: 'flex', alignItems: 'center' }}>
|
|
<span
|
|
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: 1 }}
|
|
onClick={() => setShowCompletion(v => !v)}
|
|
>
|
|
<i className={`fas fa-chevron-${showCompletion ? 'down' : 'right'}`} style={{ marginRight: 6 }} />
|
|
Completion
|
|
</span>
|
|
<button
|
|
title="Copy Completion JSON"
|
|
onClick={e => { e.stopPropagation(); handleCopy('completion', container.completion); }}
|
|
style={{ marginLeft: 8, border: 'none', background: 'none', cursor: 'pointer', color: '#ccc' }}
|
|
>
|
|
{copied.completion ? <span style={{ color: '#6f6' }}>Copied!</span> : <i className="fas fa-copy" />}
|
|
</button>
|
|
</h4>
|
|
{showCompletion && (
|
|
<pre className="hljs"><code>
|
|
<div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.completion || {}, null, 2), { language: 'json' }).value }} />
|
|
</code></pre>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|