Skip to content

Commit b173318

Browse files
author
GLEADS0\tringuyen
committed
add banner
1 parent 1473ef1 commit b173318

File tree

7 files changed

+651
-595
lines changed

7 files changed

+651
-595
lines changed

‎src/component/molecules/CardProduct/index.js‎

Lines changed: 55 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,7 @@ import {
99
import "./index.scss";
1010
import { Button } from "react-bootstrap";
1111
import { Link } from "react-router-dom";
12-
const dataStart = [
13-
1,
14-
1,
15-
1,
16-
1,
17-
1,
18-
]
12+
const dataStart = [1, 1, 1, 1, 1];
1913
const dollarUSLocale = Intl.NumberFormat("en-US");
2014
const CardProduct = ({
2115
title,
@@ -28,68 +22,71 @@ const CardProduct = ({
2822
className,
2923
onClickaddCard,
3024
onClicSee,
31-
start
25+
start,
26+
cardSale,
3227
}) => (
3328
<div className={`cardpro ${className ? className : ""}`}>
3429
<div className="cardpro_installment">Trả góp 0%</div>
3530
<img className="cardpro_photo" src={img} alt={title} />
36-
{/* {priceDiscount && (
37-
<div className="cardpro_discount">
38-
<FaCertificate className="cardpro_discount_icon">%</FaCertificate>
39-
{" Sale "}
40-
{priceDiscount}
41-
<i className="cardpro_price_currency">USD</i>
42-
</div>
43-
)} */}
31+
{priceDiscount && <div className="cardpro_discount">{priceDiscount}%</div>}
4432
<div className="cardpro_content">
45-
<Link to="/iphone/iphone-13" className="cardpro_title">{title}</Link>
33+
<Link to="/iphone/iphone-13" className="cardpro_title">
34+
{title}
35+
</Link>
4636
<div className="cardpro_price">
47-
<div className="cardpro_price_New">
48-
{dollarUSLocale.format(price)}
49-
<i className="cardpro_price_currency">đ</i>
50-
</div>
51-
<div className="cardpro_price_discount">
52-
{dollarUSLocale.format(discount)}
53-
<i className="cardpro_price_currency">đ</i>
54-
</div>
37+
{priceDiscount ? (
38+
<>
39+
<div className="cardpro_price_New">
40+
{dollarUSLocale.format(price - price * (priceDiscount / 100))}
41+
<i className="cardpro_price_currency">đ</i>
42+
</div>
43+
<div className="cardpro_price_discount">
44+
{dollarUSLocale.format(price)}
45+
<i className="cardpro_price_currency">đ</i>
46+
</div>
47+
</>
48+
) : (
49+
<div className="cardpro_price_New">
50+
{dollarUSLocale.format(price)}
51+
<i className="cardpro_price_currency">đ</i>
52+
</div>
53+
)}
5554
</div>
5655
<div className="cardpro_evaluate">
5756
{dataStart.slice(0, start).map((index, item) => {
58-
return (
59-
<AiFillStar className="cardpro_evaluate_star" />
60-
)
61-
}
62-
)}
57+
return <AiFillStar className="cardpro_evaluate_star" />;
58+
})}
6359
{dataStart.slice(0, 5 - start).map((index, item) => {
64-
return (
65-
<AiFillStar style={{ color: "#8e9195" }} />
66-
)
67-
}
68-
)}
69-
</div>
70-
<div className="cardpro_footer">
71-
<Button
72-
className="btnheart"
73-
variant="none d-flex position-relative pb-0"
74-
onClick={onClicSee}
75-
>
76-
<AiOutlineEye style={{ fontSize: "20px" }} className="" />{" "}
77-
</Button>
78-
<Button
79-
className="btnheart"
80-
variant="none d-flex position-relative pb-0"
81-
onClick={onClickaddCard}
82-
>
83-
<AiOutlineHeart style={{ fontSize: "20px" }} className="" />{" "}
84-
</Button>
85-
<Button
86-
className="btnheart"
87-
variant="none d-flex position-relative pb-0"
88-
onClick={onClickaddCard}
89-
>
90-
<AiOutlineShoppingCart style={{ fontSize: "20px" }} className="" />{" "}
91-
</Button>
60+
return <AiFillStar style={{ color: "#8e9195" }} />;
61+
})}
9262
</div>
63+
{cardSale ? (
64+
""
65+
) : (
66+
<div className="cardpro_footer">
67+
<Button
68+
className="btnheart"
69+
variant="none d-flex position-relative pb-0"
70+
onClick={onClicSee}
71+
>
72+
<AiOutlineEye style={{ fontSize: "20px" }} className="" />{" "}
73+
</Button>
74+
<Button
75+
className="btnheart"
76+
variant="none d-flex position-relative pb-0"
77+
onClick={onClickaddCard}
78+
>
79+
<AiOutlineHeart style={{ fontSize: "20px" }} className="" />{" "}
80+
</Button>
81+
<Button
82+
className="btnheart"
83+
variant="none d-flex position-relative pb-0"
84+
onClick={onClickaddCard}
85+
>
86+
<AiOutlineShoppingCart style={{ fontSize: "20px" }} className="" />{" "}
87+
</Button>
88+
</div>
89+
)}
9390
</div>
9491
</div>
9592
);

‎src/component/molecules/CardProduct/index.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,33 @@
2121
text-align: center;
2222
padding: 3px 10px;
2323
}
24+
&_discount {
25+
position: absolute;
26+
top: 8px;
27+
right: 8px;
28+
font-size: 14px;
29+
border-radius: 5px;
30+
text-align: center;
31+
padding: 3px 10px;
32+
vertical-align: middle;
33+
color: #fff;
34+
font-weight: 600;
35+
background: #f51212;
36+
border-radius: 3px;
37+
padding: 4px 8px;
38+
height: 24px;
39+
&::before {
40+
content: "";
41+
width: 0;
42+
height: 0;
43+
border-style: solid;
44+
border-width: 10px 10px 0 0;
45+
border-color: #f00 transparent transparent transparent;
46+
position: absolute;
47+
bottom: -4px;
48+
left: 0;
49+
}
50+
}
2451
&_title {
2552
text-decoration: none;
2653
padding-left: 10px;

‎src/component/organisms/Banner/index.js‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,7 @@ import Slider from "react-slick";
33
import "slick-carousel/slick/slick.css";
44
import "slick-carousel/slick/slick-theme.css";
55
import "./index.scss";
6-
import { AiOutlineSearch } from 'react-icons/ai'
7-
const SliderImg = ({ src }) => {
8-
return (
9-
<div className="SliderImg">
10-
<img alt="banner" src={src} />
11-
</div>
12-
);
13-
};
6+
147
const Banner = () => {
158
var settings = {
169
dots: false,
@@ -21,26 +14,41 @@ const Banner = () => {
2114
};
2215
return (
2316
<div className="container">
24-
<div className="search">
25-
<div className="search_icon">
26-
<AiOutlineSearch />
17+
<div className="banner">
18+
<div className="row">
19+
<div className="col-xl-9 col-12">
20+
<Slider {...settings} className="banner_slider ">
21+
<div className="SliderImg">
22+
<img
23+
alt="banner"
24+
src="https://cdn.tgdd.vn/2021/12/banner/tet-samsung-830-300-830x300.png"
25+
/>
26+
</div>
27+
<div className="SliderImg">
28+
<img
29+
alt="banner"
30+
src="https://cdn.tgdd.vn/2022/01/banner/830-300-830x300-4.png"
31+
/>
32+
</div>
33+
</Slider>
34+
</div>
35+
<div className="col-xl-3 d-xl-block d-none">
36+
<div className="banner_left">
37+
<img
38+
className="ImgBanner"
39+
alt="banner"
40+
src="https://cdn.hoanghamobile.com/i/home/Uploads/2022/01/05/san-pham-hot-ip-13.png"
41+
/>
42+
<p className="m-0 banner_left-title">NHIỀU KHUYẾN MÃI HOT</p>
43+
<img
44+
className="ImgBanner"
45+
alt="banner"
46+
src="https://cdn.hoanghamobile.com/i/home/Uploads/2022/01/07/san-pham-hot-reno6.png"
47+
/>
48+
</div>
49+
</div>
2750
</div>
28-
29-
<input
30-
type="text"
31-
name="q"
32-
id="search"
33-
className="cps-input cta-search"
34-
placeholder="Bạn cần tìm gì?"
35-
maxlength="128"
36-
autocomplete="off"
37-
/>
3851
</div>
39-
<Slider {...settings} className="banner_slider">
40-
<SliderImg src="https://images.fpt.shop/unsafe/fit-in/800x300/filters:quality(90):fill(white)/fptshop.com.vn/Uploads/Originals/2021/12/3/637741411837311205_F-H1_800x300%20(1).png" />
41-
<SliderImg src="https://images.fpt.shop/unsafe/fit-in/800x300/filters:quality(90):fill(white)/fptshop.com.vn/Uploads/Originals/2021/11/30/637739082837263999_pk%20my.png" />
42-
{/* <SliderImg src="" /> */}
43-
</Slider>
4452
</div>
4553
);
4654
};

‎src/component/organisms/Banner/index.scss‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
.banner {
2+
padding: 24px 0;
3+
// height: 480px;
4+
overflow: hidden;
5+
}
16
.banner_slider {
7+
height: 100%;
28
border-radius: 8px;
3-
margin-bottom: 70px;
4-
overflow: hidden;
59
@media (max-width: 768px) {
610
margin-bottom: 24px;
711
}
@@ -22,39 +26,37 @@
2226
color: #fff;
2327
right: 20px;
2428
}
25-
}
26-
27-
.SliderImg {
28-
position: relative;
29-
height: auto;
30-
img {
31-
width: 100%;
29+
.SliderImg {
30+
position: relative;
3231
height: auto;
33-
object-fit: cover;
32+
33+
img {
34+
width: 100%;
35+
height: 100%;
36+
object-fit: cover;
37+
}
3438
}
3539
}
36-
.search {
37-
width: 300px;
38-
display: flex;
39-
margin: 40px 0;
40-
background-color: #fff;
41-
border: 1px solid #333;
42-
border-radius: 16px;
43-
&_icon {
44-
svg {
45-
font-size: 20px;
46-
font-weight: 600;
47-
margin: 6px;
40+
41+
.banner_left {
42+
height: 100%;
43+
display: grid;
44+
grid-template-columns: auto;
45+
grid-template-rows: auto;
46+
column-gap: 10px;
47+
row-gap: 15px;
48+
&-title {
49+
font-weight: 600;
50+
color: #c5ba07;
51+
font-size: 22px;
52+
line-height: 30px;
53+
@media (max-width: 1365px) {
54+
font-size: 18px;
4855
}
4956
}
50-
input {
51-
width: 90%;
52-
outline: 0;
53-
border-radius: 0 20px 20px 0;
54-
border: 0;
55-
width: calc(100% - 32px);
56-
padding: 4px;
57-
color: #707070;
58-
box-shadow: none;
59-
}
57+
}
58+
.ImgBanner {
59+
width: 100%;
60+
height: 100%;
61+
border-radius: 10px;
6062
}

0 commit comments

Comments
 (0)