import React, { useState, useEffect } from 'react'; import { useTranslation } from '../js/i18n'; import SEO from '../components/SEO'; import styled from 'styled-components'; import { usePageLoading } from '../hooks/usePageLoading'; import LoadingOverlay from './LoadingOverlay'; const Container = styled.div` min-height: 100vh; background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%); padding: 6rem 2rem 2rem; position: relative; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px), linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; } `; const ContentWrapper = styled.div` max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; `; const Title = styled.h2` font-size: 1.8rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; letter-spacing: -0.02em; text-align: center; `; // New styled component for the JSON display container const JsonDisplayContainer = styled.div` height: 100%; max-height: 100%; overflow: auto; word-wrap: break-word; word-break: break-word; `; function JsonFormatter() { const { t } = useTranslation(); const [input, setInput] = useState(''); const [parsedJson, setParsedJson] = useState(null); const [isCopied, setIsCopied] = useState(false); const [isCompressed, setIsCompressed] = useState(false); const isLoading = usePageLoading(); useEffect(() => { try { if (input.trim()) { const parsed = JSON.parse(input); setParsedJson(parsed); } else { setParsedJson(null); } } catch (error) { setParsedJson(null); } }, [input]); const handleCopy = () => { if (parsedJson) { const formattedJson = isCompressed ? JSON.stringify(parsedJson) : JSON.stringify(parsedJson, null, 2); navigator.clipboard.writeText(formattedJson).then(() => { setIsCopied(true); setTimeout(() => setIsCopied(false), 2000); }); } }; const toggleCompression = () => { setIsCompressed(!isCompressed); }; return ( <> {isLoading && } {t('tools.jsonFormatter.title')}