front/src/pages/Home/Home.tsx

import { Snackbar, Stack, useMediaQuery, useTheme } from '@mui/material';

import MainContainer from '../../components/Container/MainContainer';

import { FlashOn, Settings } from "@mui/icons-material";
import { Box, Card, CardContent, Divider, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { useState } from 'react';



const Home = () => {
    const navigate = useNavigate()
    const [open, setOpen] = useState(false);

    const handleClick = () => {
      setOpen(true);
    };
  
    const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
      if (reason === 'clickaway') {
        return;
      }
  
      setOpen(false);
    };
  
    return (
        <>
            <MainContainer>
               <ExplainText/>
               <Box
          sx={{
            justifyContent: "center",
            display: "flex",
            pt: 2,
            alignItems: "center",
          }}
        >
          <Stack sx={{ height: '100%', borderRadius: '12px', gap: "30px", minWidth: "20vw", maxWidth:"300px"}}>
          <Card variant="outlined" sx={{cursor:"pointer"}} onClick={() => navigate("/Inference")}>
            <Box>
              <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", userSelect: "none", gap:"30px"}}>
              <Box sx={{ display: "flex", flexDirection:"column" }}>
                <Typography variant="h5">Express generation</Typography>
                <Typography variant="body1" fontStyle={"italic"}>TAL-Noisemaker synthesizer and recommended config is used</Typography>
              </Box>
                <FlashOn sx={{ fontSize: "40px", color: "inherit" }} />
              </CardContent>
            </Box>
          </Card>
          <Box></Box>
          <Divider>Or</Divider>
          <Card variant="outlined" sx={{cursor:"pointer"}} onClick={() => handleClick()}>
            <Box sx={{ display: "inherit"}}>
              <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", gap:"30px", userSelect: "none"}}>
              <Box sx={{ display: "flex", flexDirection:"column" }}>
                <Typography variant="h5">Custom generation</Typography>
                <Typography variant="body1" fontStyle={"italic"}>Bring your own VST and customize your model</Typography>
              </Box>
                <Settings sx={{ fontSize: "40px", color: "inherit" }} />
              </CardContent>
            </Box>
          </Card>
        </Stack>
        <Box sx={{borderRadius:"200px"}}>

        <Snackbar
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
          open={open}
          onClose={handleClose}
          autoHideDuration={35000}
          message="This feature is not yet available :("
          style={{borderRadius:"200px"}}
          />
          </Box>
        </Box>
        </MainContainer>
        </>
    );
};

export default Home;


export function ExplainText(props: any) {

  const theme = useTheme();
  const isSmUp = useMediaQuery(theme.breakpoints.up('md'));
  const isSxUp = useMediaQuery(theme.breakpoints.up('sm'));

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        marginBottom: "10px",
      }}
    >
      <Box
        sx={{
          width: !isSxUp ? "100%" : "50vw",
          borderRadius: "20px",
          bgcolor: "background.default",
          padding: "35px"
        }}
      >
        <Typography variant="h4">Hi!👋</Typography>
        <div style={{ paddingTop: "10px" }}>
          <Typography fontSize={"20px"}>
            This project provides an easy way to reproduce a given sound by inferring its parameters on the TAL-Noisemaker VST using a custom InverSynth model implementation.
          </Typography>
        </div>
      </Box>
    </div>
  )
}