json preview component

Json Preview.tsx

import React, { useState } from 'react';

interface JsonDisplayProps {
  data: any; // You can use a more specific type based on what JSON you expect
}

const JsonDisplay: React.FC<JsonDisplayProps> = ({ data }) => {
  const [isCollapsed, setIsCollapsed] = useState(true);
  const jsonString = JSON.stringify(data, null, 2);
  const truncateLimit = 100; // You can adjust the truncate limit as needed
  const toDisplay = isCollapsed && jsonString.length > truncateLimit
    ? `${jsonString.slice(0, truncateLimit)}...`
    : jsonString;

  return (
    <div>
      <pre>{toDisplay}</pre>
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        {isCollapsed ? 'Show More' : 'Show Less'}
      </button>
    </div>
  );
};

export default JsonDisplay;