Skip to content

Commit 069b0f8

Browse files
KechenkKechenk
committed
AAAAAAAKKHH
1 parent d39d4e9 commit 069b0f8

11 files changed

+202
-100
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"@emotion/react": "^11.13.0",
1414
"@emotion/styled": "^11.13.0",
15+
"@fontsource/plus-jakarta-sans": "^5.0.21",
1516
"@fontsource/roboto": "^5.0.14",
1617
"@mui/icons-material": "^5.16.7",
1718
"@mui/material": "^5.16.7",

‎pnpm-lock.yaml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.jsx

+3-9
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,15 @@ import * as React from "react";
33
import Navbar from "./components/Navbar";
44
import Card from "./components/Card";
55
import { Outlet } from "react-router-dom";
6-
import '@fontsource/roboto/300.css';
7-
import '@fontsource/roboto/400.css';
8-
import '@fontsource/roboto/500.css';
9-
import '@fontsource/roboto/700.css';
10-
6+
import "@fontsource/plus-jakarta-sans";
117

128
// import Router from "./main/router"
139

1410
function App() {
1511
return (
1612
<Container sx={{ p: 4 }}>
17-
<Typography>
18-
<Navbar />
19-
<Outlet />
20-
</Typography>
13+
<Navbar />
14+
<Outlet />
2115
</Container>
2216
);
2317
}

‎src/components/Card.jsx

+21-65
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { Box, Grid, Paper, Typography } from "@mui/material";
1+
import { Box, Grid, Paper } from "@mui/material";
2+
import BoxTrial from "./ui/BoxTrial";
3+
import { BoxSize } from "./ui/BoxSize";
4+
import Tombol from "./ui/Tombol";
5+
// import Tombol from "./ui/Tombol";
26

37

48
export default function () {
@@ -10,71 +14,23 @@ export default function () {
1014
columnSpacing={2}
1115
rowSpacing={3}
1216
>
13-
<Grid item xs={12} md={12}>
14-
<Box
15-
component="div"
16-
height="21em"
17-
maxWidth="100%"
18-
bgcolor="rgb(18, 158, 84, 0.7)"
19-
sx={{
20-
borderRadius: 2,
21-
backgroundImage: 'url("/img/bg.png")',
22-
backgroundSize: "cover",
23-
}}
24-
>
25-
<Text>
26-
YEAH
27-
</Text>
28-
</Box>
29-
</Grid>
30-
<Grid item xs={6} md={6}>
31-
<Box
32-
component="div"
33-
height="10em"
34-
maxWidth="100%"
35-
bgcolor="rgb(18, 158, 84, 0.7)"
36-
sx={{
37-
borderRadius: 2,
38-
backgroundImage: 'url("/img/bg.png")',
39-
backgroundSize: "cover",
40-
}}
41-
>
42-
tes
43-
</Box>
44-
</Grid>
45-
<Grid item xs={6} md={6}>
46-
<Box
47-
component="div"
48-
height="10em"
49-
maxWidth="100%"
50-
bgcolor="rgb(18, 158, 84, 0.7)"
51-
sx={{
52-
borderRadius: 2,
53-
backgroundImage: 'url("/img/bg.png")',
54-
backgroundSize: "cover",
55-
}}
56-
>
57-
tes
58-
</Box>
59-
</Grid>
6017

61-
<Grid item xs={6} md={6}>
62-
<Box bgcolor="rgb(18, 158, 84, 0.7)" borderRadius={2}>
63-
<Typography lineHeight="1em" component="span">
64-
tesss
65-
</Typography>
66-
<Box
67-
component="img"
68-
src="/img/bg.png"
69-
sx={{
70-
width: "100%",
71-
position: "relative",
72-
verticalAlign: "middle",
73-
borderRadius: 2,
74-
}}
75-
/>
76-
</Box>
77-
</Grid>
18+
{/* <BoxSize.MD />
19+
<BoxSize.XS />
20+
<BoxSize.XS /> */}
21+
22+
<BoxTrial md={12} xs={12} height="21em">
23+
<Tombol>
24+
wow
25+
</Tombol>
26+
</BoxTrial>
27+
<BoxTrial md={4} xs={4}>
28+
</BoxTrial>
29+
<BoxTrial md={4} xs={4} />
30+
<BoxTrial md={4} xs={4}>
31+
</BoxTrial>
32+
33+
7834
</Grid>
7935
</Box>
8036
);

‎src/components/Kartu.jsx

+62-26
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
1-
import { Box, Paper, Grid, styled, Card } from "@mui/material";
2-
3-
const Item = styled(Paper)(({ theme }) => ({
4-
...theme.typography.body2,
5-
padding: theme.spacing(8),
6-
whiteSpace: "nowrap",
7-
textAlign: "center",
8-
// color: "#424242",
9-
fontWeight: "bold",
10-
}));
1+
import { Box, Card, Grid, Paper, Stack, Typography, withStyles } from "@mui/material";
2+
import BoxComponents from "./ui/BoxComponents.jsx"
113

124
export default function () {
135
return (
@@ -17,27 +9,71 @@ export default function () {
179
container
1810
columnSpacing={2}
1911
rowSpacing={3}
12+
direction="row"
2013
>
21-
<Grid item xs={12} md={12}>
22-
<Box sx={{ backgroundColor : "transparent" }}>
23-
<Item>yes</Item>
14+
<Grid xs={12} md={12} container>
15+
<Box item container bgcolor="rgb(18, 158, 84, 0.7)" borderRadius={2}>
16+
<Stack
17+
sx={{
18+
alignItems: "center",
19+
direction: "column",
20+
flexGrow: 1,
21+
}}
22+
>
23+
<Typography variant="h5">My-Title</Typography>
24+
</Stack>
25+
26+
<BoxComponents />
2427
</Box>
2528
</Grid>
26-
<Grid item xs={6} md={6}>
27-
<Item>yes</Item>
29+
<Grid xs={6} md={6} container>
30+
<Box item container bgcolor="rgb(18, 158, 84, 0.7)" borderRadius={2}>
31+
<Stack
32+
sx={{
33+
alignItems: "center",
34+
direction: "column",
35+
flexGrow: 1,
36+
}}
37+
>
38+
<Typography variant="h5">My-Title</Typography>
39+
</Stack>
40+
41+
<Box
42+
component="img"
43+
src="/img/bg.png"
44+
sx={{
45+
width: "100%",
46+
position: "relative",
47+
verticalAlign: "middle",
48+
borderRadius: 2,
49+
}}
50+
/>
51+
</Box>
2852
</Grid>
29-
<Grid item xs={6} md={6}>
30-
<Item>yes</Item>
53+
<Grid xs={6} md={6} container>
54+
<Box item container bgcolor="rgb(18, 158, 84, 0.7)" borderRadius={2}>
55+
<Stack
56+
sx={{
57+
alignItems: "center",
58+
direction: "column",
59+
flexGrow: 1,
60+
}}
61+
>
62+
<Typography variant="h5">My-Title</Typography>
63+
</Stack>
64+
65+
<Box
66+
component="img"
67+
src="/img/bg.png"
68+
sx={{
69+
width: "100%",
70+
position: "relative",
71+
verticalAlign: "middle",
72+
borderRadius: 2,
73+
}}
74+
/>
75+
</Box>
3176
</Grid>
32-
{/* <Grid item xs={1} sm={2} md={6} lg={6}>
33-
<Item>ITEM 4</Item>
34-
</Grid>
35-
<Grid item xs={1} sm={2} md={4} lg={4}>
36-
<Item>ITEM 5</Item>
37-
</Grid>
38-
<Grid item xs={1} sm={2} md={2} lg={2}>
39-
<Item>ITEM 6</Item>
40-
</Grid> */}
4177
</Grid>
4278
</Box>
4379
);

‎src/components/Playground.jsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
3+
const Playground = () => {
4+
return (
5+
<>
6+
7+
</>
8+
)
9+
}
10+
11+
export default Playground

‎src/components/ui/BoxComponents.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Box } from "@mui/material";
2+
import React from "react";
3+
4+
const BoxComponents = () => {
5+
return (
6+
<Box
7+
component="img"
8+
src="/img/bg.png"
9+
sx={{
10+
width: "100%",
11+
position: "relative",
12+
verticalAlign: "middle",
13+
borderRadius: 2,
14+
}}
15+
/>
16+
);
17+
};
18+
19+
export default BoxComponents;

‎src/components/ui/BoxSize.jsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Grid } from "@mui/material";
2+
import React from "react";
3+
import BoxTrial from "./BoxTrial";
4+
5+
const MD = () => (
6+
// <Grid item xs={12} md={12}>
7+
<BoxTrial>Keceng</BoxTrial>
8+
// </Grid>
9+
);
10+
11+
12+
const XS = () => (
13+
<Grid item xs={6} md={6}>
14+
<BoxTrial>Keceng</BoxTrial>
15+
</Grid>
16+
);
17+
18+
export const BoxSize = {
19+
MD,
20+
XS,
21+
};

‎src/components/ui/BoxTrial.jsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Box, Grid, Typography } from "@mui/material";
2+
import React from "react";
3+
import Tombol from "./Tombol";
4+
5+
const BoxTrial = ({ children, xs, md, height = '10em' }) => {
6+
return (
7+
<Grid item xs={xs} md={md}>
8+
<Box
9+
bgcolor="rgb(18, 158, 84, 0.7)"
10+
borderRadius={2}
11+
display="flex"
12+
justifyContent="center"
13+
alignItems="center"
14+
height={height}
15+
sx={{
16+
backgroundImage: 'url("/img/bg.png")',
17+
backgroundSize: 'cover',
18+
borderRadius: 2,
19+
}}
20+
>
21+
<Typography variant="h3" fontWeight="bold" color="white" component="div">
22+
{children}
23+
</Typography>
24+
</Box>
25+
</Grid>
26+
);
27+
};
28+
29+
export default BoxTrial;

‎src/components/ui/Tombol.jsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Box } from '@mui/material'
2+
import React from 'react'
3+
4+
const Tombol = ({children}) => {
5+
return (
6+
<Box
7+
component="section"
8+
9+
borderRadius={4}
10+
display="flex"
11+
justifyContent="center"
12+
alignItems="center"
13+
sx={{ bgcolor : "transparent",
14+
borderColor : "white",
15+
}}
16+
>
17+
{children}
18+
</Box>
19+
)
20+
}
21+
22+
export default Tombol

‎src/main/router.jsx

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createBrowserRouter } from "react-router-dom";
22
import App from "../App";
33
import Card from "../components/Card";
44
import Kartu from "../components/Kartu";
5+
import Playground from "../components/Playground";
56

67
const router = createBrowserRouter([
78
{
@@ -15,6 +16,10 @@ const router = createBrowserRouter([
1516
{
1617
path: "Kartu",
1718
element: <Kartu />,
19+
},
20+
{
21+
path: "playground",
22+
element: <Playground />
1823
}
1924
],
2025
},

0 commit comments

Comments
 (0)