import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { Title, Wrapper, Container, Preview } from '../js/SharedStyles'; import { useTranslation } from '../js/i18n'; import SEO from '../components/SEO'; const InputText = styled.textarea` width: 100%; height: 200px; font-size: 14px; padding: 10px; border: none; border-bottom: 1px solid #e0e0e0; box-sizing: border-box; outline: none; resize: none; @media (min-width: 768px) { width: 35%; height: 100%; border-bottom: none; border-right: 1px solid #e0e0e0; } `; const PreviewContainer = styled.div` width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; box-sizing: border-box; @media (min-width: 768px) { width: 65%; height: 100%; } `; const ToggleButton = styled.span` cursor: pointer; color: #666; font-weight: bold; margin-right: 5px; `; const Key = styled.span` color: #881391; `; const Value = styled.span` color: #1a1aa6; `; const JsonList = styled.ul` list-style-type: none; padding-left: 20px; margin: 0; `; const CopyButton = styled.button` position: absolute; top: 10px; right: 10px; background-color: transparent; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: opacity 0.3s, color 0.3s; &:hover { opacity: 1; } svg { width: 16px; height: 16px; } &.copied { color: #34a853; // Google green color for success feedback } `; const RelativePreviewContainer = styled(PreviewContainer)` position: relative; `; function JsonFormatter() { const { t } = useTranslation(); const [input, setInput] = useState(''); const [parsedJson, setParsedJson] = useState(null); const [isCopied, setIsCopied] = useState(false); useEffect(() => { try { const parsed = JSON.parse(input); setParsedJson(parsed); } catch (error) { setParsedJson(null); } }, [input]); const handleCopy = () => { if (parsedJson) { const formattedJson = JSON.stringify(parsedJson, null, 2); navigator.clipboard.writeText(formattedJson).then(() => { setIsCopied(true); setTimeout(() => setIsCopied(false), 2000); }); } }; return ( <> {t('tools.jsonFormatter.title')} setInput(e.target.value)} /> {parsedJson ? ( <> {isCopied ? ( ) : ( )} ) : ( {t('tools.jsonFormatter.invalidJson')} )} ); } function JsonView({ data }) { const [isExpanded, setIsExpanded] = useState(true); if (Array.isArray(data)) { return (
setIsExpanded(!isExpanded)}> {isExpanded ? '[-]' : '[+]'} {!isExpanded && Array} {isExpanded && ( [ {data.map((item, index) => (
  • {index < data.length - 1 && ','}
  • ))} ]
    )}
    ); } else if (typeof data === 'object' && data !== null) { return (
    setIsExpanded(!isExpanded)}> {isExpanded ? '{-}' : '{+}'} {!isExpanded && Object} {isExpanded && ( {'{'} {Object.entries(data).map(([key, value], index, array) => (
  • "{key}": {index < array.length - 1 && ','}
  • ))} {'}'}
    )}
    ); } else if (typeof data === 'string') { return "{data}"; } else { return {JSON.stringify(data)}; } } export default JsonFormatter;