Untitled

import React, { useState } from 'react';
import { Container, Typography, Button, Grid, Paper, ThemeProvider, createTheme } from '@mui/material';
import FileUpload from './components/FileUpload';
import ConverterForm from './components/ConverterForm';

const theme = createTheme({
  palette: {
    primary: {
      main: '#0288d1', // Custom primary color
    },
    secondary: {
      main: '#00acc1', // Custom secondary color
    },
  },
  typography: {
    h4: {
      fontWeight: 600,
      color: '#ffffff', // Header color
    },
  },
});

const styles = {
  root: {
    background: 'linear-gradient(45deg, #0288d1, #26c6da)', // Gradient background color
    minHeight: '100vh',
    padding: '20px 0',
  },
  paper: {
    padding: '30px',
    borderRadius: '10px',
    backgroundColor: '#ffffff', // Paper background color
    boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .3)',
  },
  button: {
    backgroundColor: '#00acc1', // Custom button color
    color: '#ffffff', // Button text color
    '&:hover': {
      backgroundColor: '#00838f', // Button hover color
    },
  },
};

function App() {
  const [inputFile, setInputFile] = useState(null);
  const [outputFile, setOutputFile] = useState(null);
  const [fileTypeError, setFileTypeError] = useState('');

  const handleFileUpload = (file) => {
    setInputFile(file);
    setFileTypeError(''); // Reset any previous error
  };

  const handleInputTypeChange = (selectedType) => {
    if (inputFile) {
      const fileExtension = inputFile.name.split('.').pop();
      if (
        (selectedType === 'json' && fileExtension !== 'json') ||
        (selectedType === 'csv' && fileExtension !== 'csv') ||
        (selectedType === 'excel' && !['xls', 'xlsx'].includes(fileExtension))
      ) {
        setFileTypeError('Uploaded file type does not match the selected input type.');
      } else {
        setFileTypeError('');
      }
    }
  };

  return (
    <ThemeProvider theme={theme}>
      <div style={styles.root}>
        <Container maxWidth="md">
          <Typography variant="h4" align="center" gutterBottom style={{ margin: '20px 0' }}>
            Data Converter
          </Typography>
          <Paper elevation={3} style={styles.paper}>
            <FileUpload inputFile={inputFile} setInputFile={handleFileUpload} />
            {inputFile && (
              <ConverterForm
                inputFile={inputFile}
                setOutputFile={setOutputFile}
                onInputTypeChange={handleInputTypeChange}
                fileTypeError={fileTypeError}
              />
            )}
            {outputFile && (
              <Grid container justifyContent="center" style={{ marginTop: '20px' }}>
                <Button variant="contained" style={styles.button} onClick={() => window.open(URL.createObjectURL(outputFile))}>
                  Download Output File
                </Button>
              </Grid>
            )}
          </Paper>
        </Container>
      </div>
    </ThemeProvider>
  );
}

export default App;