Skip to content
This repository was archived by the owner on Jul 20, 2023. It is now read-only.

Commit f5decc5

Browse files
hungphan2001hungphan2001
committed
b4:map with picture
Signed-off-by: Hưng Phan <phandinhhungvp2001@gmail.com>
1 parent 674ceca commit f5decc5

File tree

13 files changed

+94
-108
lines changed

13 files changed

+94
-108
lines changed

‎public/css/index.css‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
*{
2-
margin:0;
3-
padding:0;}
4-
5-
body{
6-
font-family:arial;
7-
font-size:18px;}
8-
9-
#slide{
10-
width:600px;
11-
height:400px;
12-
margin: 50px auto;}
13-
14-
#slide-img img{
15-
border:5px solid #333;}
16-
17-
#slide-num{
18-
text-align:center;}
19-
20-
#slide-num a{
21-
font-weight:bold;
22-
color:#333;
23-
text-decoration:none;
24-
letter-spacing:10px;}
2+
margin: 0;
3+
padding: 0;
4+
}
5+
#products{
6+
margin: 50px auto;
7+
text-align: center;
8+
}
9+
#small{
10+
height: 90px;
11+
line-height: 90px;
12+
}
13+
#small img{
14+
width: 60px;
15+
height: 80px;
16+
margin: 0 5px;
17+
box-sizing: border-box;
18+
padding: 5px;
19+
}
20+
#small img.active{
21+
border: 2px solid #B4042A;
22+
}

‎public/images/img-1.jpg‎

69.9 KB
Loading

‎public/images/img-2.jpg‎

68.4 KB
Loading

‎public/images/img-3.jpg‎

56.6 KB
Loading

‎public/index.html‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Vietpro React</title>
5-
<meta charset="utf-8">
6-
<link rel="stylesheet" href="css/index.css"/>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<link rel="stylesheet" href="css/index.css"/>
77
</head>
88
<body>
99

10-
<div id="slide">
10+
<div id="products">
11+
<div>
12+
<div id="large">
13+
<img src="images/img-1.jpg" />
14+
</div>
15+
<div id="small">
16+
<img classname="active" src="images/img-1.jpg" />
17+
<img src="images/img-2.jpg" />
18+
<img src="images/img-3.jpg" />
19+
</div>
20+
</div>
1121
</div>
1222

23+
1324
</body>
14-
</html>
15-
25+
</html>

‎src/App.js‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11

22
import React, { useState } from "react";
3-
import Slide from "./components/Slide";
4-
import Button from "./components/Button";
5-
const App =()=>{
6-
const [img,setImg]= React.useState("./images/banner-1.jpg");
7-
const UpdateNewImg1 =()=>setImg("images/banner-1.jpg");
8-
const UpdateNewImg2 =()=>setImg("images/banner-2.jpg");
9-
const UpdateNewImg3 =()=>setImg("images/banner-3.jpg");
10-
return(
11-
<>
3+
import Large from "./components/Large";
4+
import Small from "./components/Small";
5+
const App = () => {
126

13-
<Slide img={img}></Slide>
14-
<Button
15-
UpdateNewImg1={UpdateNewImg1}
16-
UpdateNewImg2={UpdateNewImg2}
17-
UpdateNewImg3={UpdateNewImg3}>
18-
</Button>
19-
</>
7+
const listImage = [
8+
"images/img-1.jpg",
9+
"images/img-2.jpg",
10+
"images/img-3.jpg",
11+
]
12+
13+
const [image, setImage] = useState(listImage[0]);
14+
const [checked, setChecked] = useState(0);
15+
const updateImg = (url, index) => {
16+
setImage(url)
17+
setChecked(index)
18+
}
19+
return (
20+
<>
21+
<Large image={image}></Large>
22+
<Small
23+
listImage={listImage}
24+
updateImg={updateImg}
25+
checked={checked}></Small>
26+
</>
2027
)
2128

2229
}

‎src/components/Body.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/components/Button.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/components/Large.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { useState } from 'react'
2+
3+
const Large = ({image}) => {
4+
5+
return (
6+
<>
7+
<div>
8+
<div id="large">
9+
<img src={image} />
10+
</div>
11+
</div>
12+
</>
13+
)
14+
}
15+
16+
export default Large

‎src/components/Slide.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)