UTS PBW No.7

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>REFIL</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

</body>
</html>
CSS
html,body{
height: 100%;
position: relative;
}
JS
import React, { useEffect, useState } from "react";

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
import Container from "@mui/material/Container";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import SearchIcon from "@mui/icons-material/Search";
import { styled, alpha } from "@mui/material/styles";
import InputBase from "@mui/material/InputBase";
import Grid from "@mui/material/Unstable_Grid2";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import { CardActionArea } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { Link } from "react-router-dom";
const pages = ["Home", "Movies", "Series", "Books"];
const theme = createTheme({

palette: {
primary: {
main: "#64b5f6",
},
secondary: {
main: "#29b6f6",
},
text: {
main: "#e3f2fd",
},
},
});
const Search = styled("div")(({ theme }) => ({

position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto",
},
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({

padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({

color: "inherit",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch",
},
},
},
}));
function Home() {
const [anchorElNav, setAnchorElNav] = useState(null);
const handleOpenNavMenu = (event) => {

setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
const [value] = React.useState(0);

const navigate = useNavigate();
useEffect(() => {
if (value === 0) navigate("/");
else if (value === 1) navigate("/home.js");
else if (value === 2) navigate("/movies");
else if (value === 3) navigate("/series");
else if (value === 4) navigate("/books");
}, [value, navigate]);
return (
<>
<ThemeProvider theme={theme}>
<AppBar position="static" color="primary">
<Container maxWidth="xl">
<Toolbar disableGutters>
<Typography
variant="h6"
fontSize={30}
noWrap
component="a"
href="/"
sx={{
mr: 15,
display: { xs: "flex", md: "flex" },
fontFamily: "monospace",
fontWeight: 1000,
letterSpacing: ".3rem",
color: "red",
textDecoration: "none",
}}
>
ReFil
</Typography>
<Grid container spacing={50} xs={12}>

<Grid
display="flex"
justifyContent="center"
alignItems="center"
xs={12}
>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
placeholder="Search…"
inputProps={{ "aria-label": "search" }}
/>
</Search>
</Grid>
</Grid>
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>

<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "left",
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: "block", md: "none" },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography color="text" textAlign="center">
<Link
style={{ textDecoration: "none", color: "white" }}
to={"/${page}"}
>
{page}
</Link>
</Typography>
</MenuItem>
))}
</Menu>
</Box>
<Box
sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}
></Box>
<Box sx={{ flexGrow: 0, display: { xs: "none", md: "flex" } }}>

{pages.map((page) => (
<Button
key={page}
color="text"
onClick={handleCloseNavMenu}
sx={{ my: 2, display: "block" }}
>
<Link
style={{ textDecoration: "none", color: "white" }}
to={"/${page}"}
>
{page}
</Link>
</Button>
))}
</Box>
</Toolbar>
</Container>
</AppBar>
<Grid container spacing={2} marginTop={4}>
<Grid xs={2}>
<Button variant="contained" fullWidth style={{ borderRadius: 50 }}>
Tahun 2020
</Button>
</Grid>
<Grid xs={2}>
<Button variant="contained" fullWidth style={{ borderRadius: 50 }}>
Lokal
</Button>
</Grid>
</Grid>
<Grid container spacing={2} marginTop={3}>
<Grid item xs={2}>
<Card sx={{ maxWidth: 330 }}>
<CardActionArea>
<CardMedia
component="img"
height="200"
image="/static/images/cards/contemplative-reptile.jpg"
alt="green iguana"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with
over 6,000 species, ranging across all continents except
Antarctica
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>

UTS PBW No.7

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UTS PBW No.7

Uploaded by

Copyright:

Available Formats

HTML

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will

You can add webfonts, meta tags, or analytics to this file.

To begin the development, run `npm start` or `yarn start`.

import React, { useEffect, useState } from "react";

const pages = ["Home", "Movies", "Series", "Books"];

const theme = createTheme({

const Search = styled("div")(({ theme }) => ({

const SearchIconWrapper = styled("div")(({ theme }) => ({

const StyledInputBase = styled(InputBase)(({ theme }) => ({

const handleOpenNavMenu = (event) => {

const [value] = React.useState(0);

<Grid container spacing={50} xs={12}>

<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>

<Box sx={{ flexGrow: 0, display: { xs: "none", md: "flex" } }}>

You might also like