Skip to content

Instantly share code, notes, and snippets.

@Priceless-P
Last active Apr 28, 2022
Embed
What would you like to do?
import React from "react";
import ResponsiveAppBar from "./ResponsiveAppBar";
import {useNavigate} from "react-router-dom";
import Grid from '@mui/material/Grid';
import Typography from "@mui/material/Typography";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import img from "./../assets/images/earth.jpg";
const Home = (props) => {
let navigate = useNavigate();
return (
<div>
<ResponsiveAppBar />
<Typography variant="h6" component="div"
style={{
marginTop:50,
paddingTop: 50,
fontWeight:600,
fontSize:32,
textAlign:'center',}}>
EARTH
</Typography>
<Grid container justifyContent="center">
<Avatar
variant={"rounded"}
alt="The Earth"
src={img}
style={{
width: 200,
height: 200,
marginTop:20,
}}
/>
<br />
<Typography variant="h6" component="div" align="center">
Earth apart from being our home, has a lot of cool fun facts you are
probably not aware of. Not to worry, we are gonna get to know some of
these facts today. Click the Learn button to start or the Quiz button
to check how much you already know.
</Typography>
<div component="span">
<Button variant="contained" color="error" onClick={() => navigate("/Quiz")}>
Quiz
</Button>
</div>
</Grid>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
<Button variant="contained" color="error" onClick={() => navigate('/Learn')}>
Learn
</Button>
</div>
</div>
);
};
export default Home;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment