Skip to content

Commit 451e5b0

Browse files
damladamla
authored
Merge pull request #22 from patika-hepsiburada-react-bootcamp/dev
[#2, #12] feat: MVP of UI done
2 parents ec0306b + 443e4ae commit 451e5b0

29 files changed

+558
-28
lines changed

‎client/src/components/AddButton/index.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { useState } from "react";
2+
import styles from "./styles.module.scss";
3+
4+
export default function AddButton() {
5+
const [isActive, setIsActive] = useState(true);
6+
7+
const handleActive = () => {
8+
setIsActive(false);
9+
};
10+
11+
return isActive ? (
12+
<button
13+
className={isActive && styles.ActiveButton}
14+
onClick={() => handleActive()}
15+
>
16+
Sepete Ekle
17+
</button>
18+
) : (
19+
<button className={!isActive && styles.DeactiveButton}>
20+
Bu ürünü sepete ekleyemezsiniz.
21+
</button>
22+
);
23+
}

‎client/src/components/AddButton/styles.module.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@use "../../global/variables.scss" as vars;
2+
3+
.ActiveButton {
4+
font-weight: 500;
5+
font-size: 14px;
6+
line-height: 18px;
7+
background-color: vars.$add-to-cart-btn-bg;
8+
color: vars.$hover-link-color;
9+
border: 1px solid transparent;
10+
border-radius: 8px;
11+
width: 233px;
12+
height: 32px;
13+
cursor: pointer;
14+
}
15+
16+
.DeactiveButton {
17+
font-weight: 500;
18+
font-size: 14px;
19+
line-height: 18px;
20+
background-color: vars.$cart-remove-deactive-btn-color;
21+
color: vars.$deactive-font-color;
22+
border: 1px solid transparent;
23+
border-radius: 8px;
24+
width: 233px;
25+
height: 32px;
26+
cursor: pointer;
27+
}

‎client/src/components/ImageBox/index.jsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@
22
import styles from "./styles.module.scss";
33
import cn from "classnames";
44

5-
export default function ImageBox({ src, basketImg, productImg }) {
5+
export default function ImageBox({ src, basketImg, productImg, isHovered }) {
66
const basketItemClasses = cn(styles.Container, styles.BasketItemImg);
7-
7+
const productItemClasses = cn(
8+
styles.Container,
9+
styles.ProductItemImg,
10+
isHovered && styles.Hovered
11+
);
812
return (
913
<>
1014
{basketImg && (
@@ -18,7 +22,16 @@ export default function ImageBox({ src, basketImg, productImg }) {
1822
</div>
1923
)}
2024

21-
{productImg && <img src width="224" height="332" alt="product" />}
25+
{productImg && (
26+
<div className={productItemClasses}>
27+
<img
28+
src={`${process.env.REACT_APP_IMAGE_URL}s/32/224-332/10352817012786.jpg`}
29+
width="224"
30+
height="332"
31+
alt="product"
32+
/>
33+
</div>
34+
)}
2235
</>
2336
);
2437
}

‎client/src/components/ImageBox/styles.module.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,21 @@
77
border: 1px solid vars.$cart-item-border-color;
88
border-radius: 4px;
99

10+
&.ProductItemImg {
11+
background-color: white;
12+
min-height: 339px;
13+
min-width: 254px;
14+
padding: 3px 15px 4px 15px;
15+
}
16+
17+
&.Hovered {
18+
border: 1px solid transparent;
19+
outline: unset;
20+
width: 252px;
21+
min-width: 252px;
22+
padding: 2px 13px 4px 13px;
23+
}
24+
1025
&.BasketItemImg {
1126
width: 54px;
1227
height: 72px;

‎client/src/components/Layout/Header/styles.module.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
.Container {
44
display: flex;
55
width: 100%;
6+
min-height: 96px;
67
height: 96px;
78
padding: 0 80px;
89
align-items: center;

‎client/src/components/Layout/Section/index.jsx

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
import styles from "./styles.module.scss";
2+
import { ProductTable, ProductRow, ProductItem } from "../..";
23

3-
export default function Section({ children }) {
4-
return <section className={styles.container}>section {children}</section>;
4+
export default function Section() {
5+
return (
6+
<section className={styles.Container}>
7+
<ProductTable>
8+
<ProductRow>
9+
<ProductItem />
10+
<ProductItem />
11+
<ProductItem />
12+
<ProductItem />
13+
</ProductRow>
14+
<ProductRow>
15+
<ProductItem />
16+
<ProductItem />
17+
<ProductItem />
18+
<ProductItem />
19+
</ProductRow>
20+
<ProductRow>
21+
<ProductItem />
22+
<ProductItem />
23+
<ProductItem />
24+
<ProductItem />
25+
</ProductRow>
26+
</ProductTable>
27+
</section>
28+
);
529
}

‎client/src/components/Layout/Section/styles.module.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
.container {
1+
.Container {
22
display: flex;
3+
width: 1058px;
4+
min-width: 1058px;
5+
margin-bottom: 298px;
36
}

‎client/src/components/Layout/Sidebar/index.jsx

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,32 @@
1+
import { LinkList, Link } from "../..";
12
import styles from "./styles.module.scss";
23

3-
export default function Sidebar({ children }) {
4-
return <aside className={styles.container}>sidebar {children}</aside>;
4+
export default function Sidebar() {
5+
return (
6+
<aside className={styles.Container}>
7+
<LinkList filterTitle="Renk">
8+
<Link filterName="Label Text (4)" />
9+
<Link filterName="Lacivert (3)" />
10+
<Link filterName="Sarı (1)" />
11+
<Link filterName="Siyah (5)" />
12+
<Link filterName="Beyaz (2)" />
13+
</LinkList>
14+
<LinkList filterTitle="Sıralama">
15+
<Link filterName="En Düşük Fiyat" />
16+
<Link filterName="En Yüksek Fiyat" />
17+
<Link filterName="En Yeniler (A>Z)" />
18+
<Link filterName="En Yeniler (Z>A)" />
19+
</LinkList>
20+
<LinkList filterTitle="Marka">
21+
<Link filterName="Samsung (4)" />
22+
<Link filterName="Nokia (6)" />
23+
<Link filterName="Apple (3)" />
24+
<Link filterName="LG (2)" />
25+
<Link filterName="Huawei (6)" />
26+
<Link filterName="Xiaomi (9)" />
27+
<Link filterName="General Mobile (1)" />
28+
{/* count eklenecek */}
29+
</LinkList>
30+
</aside>
31+
);
532
}

‎client/src/components/Layout/Sidebar/styles.module.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
.container {
1+
.Container {
2+
width: 206px;
3+
min-width: 206px;
4+
padding-top: 19px;
25
display: flex;
36
flex-direction: column;
47
}

‎client/src/components/Layout/index.jsx

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
1-
import { Header } from "..";
2-
import { SubHeader } from "..";
3-
import { Sidebar } from "..";
4-
import { Section } from "..";
1+
import { useState } from "react";
2+
import { Header, SubHeader, Sidebar, Section, Modal } from "..";
53

64
import styles from "./styles.module.scss";
75

8-
export default function Layout({ children }) {
6+
export default function Layout() {
7+
const [showModal] = useState(false);
8+
99
return (
10-
<div className={styles.container}>
11-
<Header />
12-
<SubHeader />
13-
<Sidebar />
14-
<Section />
15-
{children}
16-
</div>
10+
<>
11+
<div className={styles.Container}>
12+
<Header />
13+
<SubHeader />
14+
<div className={styles.Wrapper}>
15+
<Sidebar />
16+
<Section />
17+
</div>
18+
{showModal && <Modal />}
19+
</div>
20+
<div className={showModal && styles.GrayLayer}></div>
21+
</>
1722
);
1823
}

‎client/src/components/Layout/styles.module.scss

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
1-
.container {
1+
@use "../../global/variables.scss" as vars;
2+
3+
.Container {
24
display: flex;
35
flex-direction: column;
46
justify-content: flex-start;
57
align-items: center;
68
height: 100vh;
79
width: 100vw;
10+
position: relative;
11+
12+
.Wrapper {
13+
display: flex;
14+
min-width: vars.$desktop-width;
15+
max-width: vars.$desktop-width;
16+
padding: 0 80px 2px 80px;
17+
justify-content: space-between;
18+
}
19+
}
20+
.GrayLayer {
21+
position: absolute;
22+
top: 0;
23+
height: 100vh;
24+
width: 100vw;
25+
min-height: 100vh;
26+
min-width: 100vw;
27+
background-color: #e5e5e5;
28+
opacity: 0.5;
29+
z-index: 99;
830
}

‎client/src/components/Link/index.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import styles from "./styles.module.scss";
2+
3+
export default function Link({ filterName }) {
4+
return <li className={styles.Container}>{filterName}</li>;
5+
}

‎client/src/components/Link/styles.module.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@use "../../global/variables.scss" as vars;
2+
3+
.Container {
4+
font-family: Roboto;
5+
font-style: normal;
6+
font-weight: normal;
7+
font-size: 14px;
8+
line-height: 24px;
9+
color: vars.$link-color;
10+
cursor: pointer;
11+
12+
&:hover {
13+
color: vars.$hover-link-color;
14+
}
15+
}

‎client/src/components/LinkList/index.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import styles from "./styles.module.scss";
2+
3+
export default function LinkList({ filterTitle, children }) {
4+
return (
5+
<>
6+
<h3 className={styles.Title}>{filterTitle}</h3>
7+
<ul className={styles.Container}>{children}</ul>
8+
</>
9+
);
10+
}

‎client/src/components/LinkList/styles.module.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@use "../../global/variables.scss" as vars;
2+
3+
.Container {
4+
display: flex;
5+
flex-direction: column;
6+
margin-bottom: 24px;
7+
}
8+
9+
.Title {
10+
padding-left: 1px;
11+
font-family: Roboto;
12+
font-style: normal;
13+
font-weight: 500;
14+
font-size: 16px;
15+
line-height: 150%;
16+
color: vars.$primary-font-color;
17+
margin-bottom: 20px;
18+
}

‎client/src/components/Modal/index.jsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import styles from "./styles.module.scss";
2+
3+
export default function Modal() {
4+
return (
5+
<div className={styles.Container}>
6+
<div className={styles.Header}>
7+
<h3>Ürünü silmek istediğinize emin misiniz?</h3>
8+
</div>
9+
<div className={styles.Body}>
10+
<p className={styles.Content}>
11+
Lorem Ipsum is simply dummy text of the printing and typesetting
12+
industry. Lorem Ipsum has been the industry's standard dummy text ever
13+
since the 1500s, when an unknown printer took a galley of type and
14+
scrambled it to make a type specimen book. It has survived not only
15+
five centuries, but also the leap into electronic typesetting,
16+
remaining essentiall....
17+
</p>
18+
</div>
19+
<div className={styles.Footer}>
20+
<button className={styles.Yes}>EVET</button>
21+
<button className={styles.No}>HAYIR</button>
22+
</div>
23+
</div>
24+
);
25+
}

0 commit comments

Comments
 (0)