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 &&