debugger

JsonDebugger.tsx

import React, {useState} from "react";
import {useSearchParams} from "react-router-dom";

export interface Props<T> {
    data: T;
    debugParam: string;
}

export const JsonDebugger = <T extends Record<string, any> | string>({data: obj, debugParam}: Props<T>) => {
    const [query] = useSearchParams();
    const [display, setDisplay] = useState(true)
    return (
        <>
            {
                query.get('$debug')?.includes(debugParam) ? (
                    <>
                        <div
                            onClick={() => setDisplay(!display)}
                            style={{
                                backgroundColor: '#b3ef4d',
                                padding: '5px',
                                borderRadius: '3px 3px 0 0',
                                borderBottom: '1px solid #e3e3e3',
                            }}>Debug: {debugParam}</div>
                        {display ?
                            <pre style={{
                                backgroundColor: '#e3e3e3',
                                borderColor: '#b3ef4d',
                                padding: '10px',
                                borderRadius: '0 0 3px 3px',
                                fontSize: '10px'
                            }}>
                            {JSON.stringify(obj, null, 2)}
                        </pre> : null
                        }
                    </>
                ) : null
            }
        </>
    );
};