Skip to content

Commit 630916e

Browse files
potchangelopotchangelo
committed
Prettier format
1 parent 109902d commit 630916e

File tree

9 files changed

+85
-90
lines changed

9 files changed

+85
-90
lines changed

‎src/App.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.app-section {
2-
padding: 20px;
2+
padding: 20px;
33
}
44

55
.app-container {
6-
max-width: 1200px;
7-
margin-left: auto;
8-
margin-right: auto;
9-
}
6+
max-width: 1200px;
7+
margin-left: auto;
8+
margin-right: auto;
9+
}

‎src/App.js‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,35 @@ import Notification from './Notification';
44
import Grid from './Grid';
55

66
function App() {
7-
return (
8-
<section className="app-section">
9-
<div className="app-container">
10-
<h2>Farm Dashboard</h2>
11-
<Notification title="สวัสดี" description="เรามาอย่างสันติ" />
12-
<Grid columns={3}>
13-
<Box title="ออเดอร์ต่อวัน">
14-
<ul>
15-
<li>3 กันยายน - 1,582 ออเดอร์</li>
16-
<li>2 กันยายน - 1,649 ออเดอร์</li>
17-
<li>1 กันยายน - 1,755 ออเดอร์</li>
18-
</ul>
19-
</Box>
20-
<Box title="ยอดขายสินค้ายอดนิยม">
21-
<p>หมายเหตุ : เป็นราคาโดยประมาณเท่านั้น</p>
22-
<ol>
23-
<li>แครอท ~ 200,000 บาท</li>
24-
<li>มะเขือเทศ ~ 120,000 บาท</li>
25-
<li>แตงกวา ~ 105,000 บาท</li>
26-
</ol>
27-
</Box>
28-
<Box title="Quote of the day">
29-
<p>คนเราจะมีพรุ่งนี้ได้อีกกี่วัน ... ชีวิตยังมีพรุ่งนี้เสมอ</p>
30-
<p>by พี่ตูน</p>
31-
</Box>
32-
</Grid>
33-
</div>
34-
</section>
35-
);
7+
return (
8+
<section className="app-section">
9+
<div className="app-container">
10+
<h2>Farm Dashboard</h2>
11+
<Notification title="สวัสดี" description="เรามาอย่างสันติ" />
12+
<Grid columns={3}>
13+
<Box title="ออเดอร์ต่อวัน">
14+
<ul>
15+
<li>3 กันยายน - 1,582 ออเดอร์</li>
16+
<li>2 กันยายน - 1,649 ออเดอร์</li>
17+
<li>1 กันยายน - 1,755 ออเดอร์</li>
18+
</ul>
19+
</Box>
20+
<Box title="ยอดขายสินค้ายอดนิยม">
21+
<p>หมายเหตุ : เป็นราคาโดยประมาณเท่านั้น</p>
22+
<ol>
23+
<li>แครอท ~ 200,000 บาท</li>
24+
<li>มะเขือเทศ ~ 120,000 บาท</li>
25+
<li>แตงกวา ~ 105,000 บาท</li>
26+
</ol>
27+
</Box>
28+
<Box title="Quote of the day">
29+
<p>คนเราจะมีพรุ่งนี้ได้อีกกี่วัน ... ชีวิตยังมีพรุ่งนี้เสมอ</p>
30+
<p>by พี่ตูน</p>
31+
</Box>
32+
</Grid>
33+
</div>
34+
</section>
35+
);
3636
}
3737

38-
export default App;
38+
export default App;

‎src/Box.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import styles from './Box.module.css';
22

33
function Box(props) {
4-
return (
5-
<div className={styles.box}>
6-
<h3 className={styles.title}>{props.title}</h3>
7-
{props.children}
8-
</div>
9-
);
4+
return (
5+
<div className={styles.box}>
6+
<h3 className={styles.title}>{props.title}</h3>
7+
{props.children}
8+
</div>
9+
);
1010
}
1111

12-
export default Box;
12+
export default Box;

‎src/Box.module.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.box {
2-
background-color: white;
3-
border: 1px solid rgb(8, 158, 207);
4-
border-radius: 12px;
5-
padding: 8px 16px;
2+
background-color: white;
3+
border: 1px solid rgb(8, 158, 207);
4+
border-radius: 12px;
5+
padding: 8px 16px;
66
}
77

88
.title {
9-
border-bottom: 4px solid rgb(198, 198, 198);
10-
padding-bottom: 8px;
11-
}
9+
border-bottom: 4px solid rgb(198, 198, 198);
10+
padding-bottom: 8px;
11+
}

‎src/Grid.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
.grid {
2-
display: grid;
3-
row-gap: 16px;
4-
column-gap: 16px;
2+
display: grid;
3+
row-gap: 16px;
4+
column-gap: 16px;
55
}
66

77
.grid-1 {
8-
grid-template-columns: 1fr;
8+
grid-template-columns: 1fr;
99
}
1010

1111
.grid-2 {
12-
grid-template-columns: 1fr 1fr;
12+
grid-template-columns: 1fr 1fr;
1313
}
1414

1515
.grid-3 {
16-
grid-template-columns: 1fr 1fr 1fr;
17-
}
16+
grid-template-columns: 1fr 1fr 1fr;
17+
}

‎src/Grid.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import './Grid.css';
22

33
function Grid(props) {
4-
const { columns = 1, children } = props;
5-
let gridClass = `grid grid-${columns}`;
4+
const { columns = 1, children } = props;
5+
let gridClass = `grid grid-${columns}`;
66

7-
return (
8-
<div className={gridClass}>
9-
{children}
10-
</div>
11-
);
7+
return <div className={gridClass}>{children}</div>;
128
}
139

14-
export default Grid;
10+
export default Grid;

‎src/Notification.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import styles from './Notification.module.css';
22

33
function Notification(props) {
4-
return (
5-
<div className={styles.box}>
6-
<h3 className={styles.title}>{props.title}</h3>
7-
<p>{props.description}</p>
8-
<p><a>ปิดการแจ้งเตือน</a></p>
9-
</div>
10-
);
4+
return (
5+
<div className={styles.box}>
6+
<h3 className={styles.title}>{props.title}</h3>
7+
<p>{props.description}</p>
8+
<p>
9+
<a>ปิดการแจ้งเตือน</a>
10+
</p>
11+
</div>
12+
);
1113
}
1214

13-
export default Notification;
15+
export default Notification;

‎src/Notification.module.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.box {
2-
background-color: rgb(255, 255, 255);
3-
border: 2px solid red;
4-
padding: 8px 16px;
5-
margin-bottom: 24px;
2+
background-color: rgb(255, 255, 255);
3+
border: 2px solid red;
4+
padding: 8px 16px;
5+
margin-bottom: 24px;
66
}
77

88
.title {
9-
color: red;
10-
}
9+
color: red;
10+
}

‎src/index.css‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
body {
22
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
4+
'Droid Sans', 'Helvetica Neue', sans-serif;
65
-webkit-font-smoothing: antialiased;
76
-moz-osx-font-smoothing: grayscale;
87
}
98

109
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
10+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
1311
}
1412

15-
input[type="text"],
16-
input[type="password"],
17-
input[type="file"],
13+
input[type='text'],
14+
input[type='password'],
15+
input[type='file'],
1816
textarea {
1917
border: 1px solid gray;
20-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
21-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
22-
sans-serif;
18+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
19+
'Droid Sans', 'Helvetica Neue', sans-serif;
2320
font-size: 16px;
2421
box-sizing: border-box;
2522
width: 100%;
@@ -36,4 +33,4 @@ a {
3633
color: rgb(24, 73, 236);
3734
text-decoration: underline;
3835
cursor: pointer;
39-
}
36+
}

0 commit comments

Comments
 (0)