Styled Paper - Copy this React, Mui Component to your project

base it on this code import React, { useState } from 'react'; import axios from 'axios'; import { Button, TextField, Typography, Grid, Paper, CircularProgress, Alert, Card, CardContent, Chip, Box } from '@mui/material'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import './App.css'; // Define the Mantis theme const mantisTheme = createTheme({ palette: { mode: 'dark', // Dark background primary: { main: '#4caf50', // Vibrant green (single color theme) }, background: { default: '#121212', // Dark background paper: '#1d1d1d', // Slightly lighter paper for cards and containers }, text: { primary: '#e0e0e0', // Light text secondary: '#b0b0b0', // Dimmed text for secondary }, }, typography: { fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', h4: { fontWeight: 700, color: '#fff', // White color for headers }, h6: { color: '#b0b0b0', // Dimmed color for subtitles }, body1: { color: '#e0e0e0', // Light color for body text }, body2: { color: '#b0b0b0', // Dimmed body text }, }, shape: { borderRadius: 8, // Rounded corners for a more modern look }, components: { MuiButton: { styleOverrides: { root: { borderRadius: 20, // Rounded button }, }, }, MuiTextField: { styleOverrides: { root: { borderRadius: 10, // Rounded text fields }, }, }, MuiCard: { styleOverrides: { root: { borderRadius: 12, // Rounded cards backgroundColor: '#1d1d1d', // Dark background for cards boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)', // Soft shadow effect }, }, }, MuiChip: { styleOverrides: { root: { backgroundColor: '#4caf50', // Vibrant green pill-like chip color: '#fff', fontWeight: 600, padding: '6px 12px', }, }, }, }, }); function App() { const [preferences, setPreferences] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [responseData, setResponseData] = useState(null); const handleChange = (e) => { setPreferences(e.target.value); }; const handleSubmit = async (e) => { e.preventDefault(); if (!preferences) return; setLoading(true); setError(null); setResponseData(null); try { const response = await axios.post('http://127.0.0.1:5000/jobprediction', { preferences: preferences }); setResponseData(response.data); } catch (err) { setError('An error occurred while fetching job recommendations.'); } finally { setLoading(false); } }; return ( <ThemeProvider theme={mantisTheme}> <div className="App"> <Paper elevation={3} sx={{ padding: 3, maxWidth: 600, margin: 'auto', marginTop: 5 }}> <Typography variant="h4" gutterBottom align="center"> Job Recommendation System </Typography> <form onSubmit={handleSubmit}> <TextField fullWidth label="Enter your job preferences" variant="outlined" multiline rows={4} value={preferences} onChange={handleChange} sx={{ marginBottom: 2 }} /> <Grid container spacing={2} justifyContent="center"> <Grid item> <Button variant="contained" color="primary" type="submit" disabled={loading} sx={{ width: '100%', padding: '12px 16px', textTransform: 'none', fontSize: '16px', }} > {loading ? <CircularProgress size={24} color="inherit" /> : 'Get Recommendations'} </Button> </Grid> </Grid> </form> {error && ( <Alert severity="error" sx={{ marginTop: 2 }}> {error} </Alert> )} {responseData && ( <div sx={{ marginTop: 4 }}> <Typography variant="h6" gutterBottom> <Chip label={responseData.predicted_job_type} sx={{ marginTop: 2 }} /> </Typography> <Typography variant="subtitle1" gutterBottom> Important Features Based on Your Preferences: </Typography> <ul> {responseData.important_features.map((feature, index) => ( <li key={index}> {feature.feature}: {feature.importance.toFixed(2)}% </li> ))} </ul> <Typography variant="subtitle1" gutterBottom> Top Job Recommendations: </Typography> <Grid container spacing={2}> {responseData.job_recommendations.map((job, index) => ( <Grid item xs={12} sm={6} md={4} key={index}> <Card> <CardContent> <Typography variant="h6" fontWeight="bold"> {job.company} </Typography> <Typography variant="body2" color="textSecondary"> {job.job_type} </Typography> <Typography variant="body2">Location: {job.location}</Typography> <Typography variant="body2">Salary: {job.salary}</Typography> <Typography variant="body2">Skills: {job.skills}</Typography> <Typography variant="body2">Education Level: {job.education_level}</Typography> <Typography variant="body2">Work Type: {job.work_type}</Typography> </CardContent> </Card> </Grid> ))} </Grid> </div> )} </Paper> </div> </ThemeProvider> ); } export default App;