leumas-private-shared/src/Components/Downloaders/TextViewer.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';
import { Box, Button, Typography, Paper } from '@mui/material';
import DownloadIcon from '@mui/icons-material/Download';

const TextViewer = ({ fileContent, fileName }) => {
  const downloadFile = () => {
    const blob = new Blob([JSON.stringify(fileContent, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  return (
    <Box sx={{ my: 2, textAlign: 'center' }}>
      <Typography variant="h6">JSON Viewer</Typography>
      <Paper elevation={3} sx={{ p: 2, mt: 2, maxHeight: 400, overflow: 'auto', textAlign: 'left' }}>
        <pre>{JSON.stringify(fileContent, null, 2)}</pre>
      </Paper>
      <Button
        variant="contained"
        color="primary"
        startIcon={<DownloadIcon />}
        onClick={downloadFile}
        sx={{ mt: 2 }}
      >
        Download JSON
      </Button>
    </Box>
  );
};

export default TextViewer;