Skip to content

Commit f4d3715

Browse files
damladamla
authored
Merge pull request #20 from patika-hepsiburada-react-bootcamp/dev
[#2, #12] feat: start to implement base components
2 parents 7235ad6 + f0322ab commit f4d3715

33 files changed

+344
-30
lines changed

‎client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^12.1.10",
99
"react": "^17.0.2",
1010
"react-dom": "^17.0.2",
11+
"react-router-dom": "^5.3.0",
1112
"react-scripts": "4.0.3",
1213
"sass": "^1.43.3",
1314
"web-vitals": "^1.0.1"

‎client/public/favicon.ico

11 KB
Binary file not shown.

‎client/public/logo192.png

-5.22 KB
Binary file not shown.

‎client/public/logo512.png

-9.44 KB
Binary file not shown.

‎client/public/manifest.json

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,45 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "Hepsiburada",
3+
"name": "hepsiburada.com",
4+
"display": "standalone",
5+
"theme_color": "#ffffff",
6+
"background_color": "#ffffff",
47
"icons": [
58
{
69
"src": "favicon.ico",
710
"sizes": "64x64 32x32 24x24 16x16",
811
"type": "image/x-icon"
912
},
1013
{
11-
"src": "logo192.png",
14+
"src": "https://static.hepsiburada.net/assets/sfstatic/v.1.1.267/sf-mobile/pwa/hepsiburada-icon-1x.png",
15+
"type": "image/png",
16+
"sizes": "48x48"
17+
},
18+
{
19+
"src": "https://static.hepsiburada.net/assets/sfstatic/v.1.1.267/sf-mobile/pwa/hepsiburada-icon-2x.png",
20+
"type": "image/png",
21+
"sizes": "72x72"
22+
},
23+
{
24+
"src": "https://static.hepsiburada.net/assets/sfstatic/v.1.1.267/sf-mobile/pwa/hepsiburada-icon-3x.png",
1225
"type": "image/png",
13-
"sizes": "192x192"
26+
"sizes": "96x96"
1427
},
1528
{
16-
"src": "logo512.png",
29+
"src": "https://static.hepsiburada.net/assets/sfstatic/v.1.1.267/sf-mobile/pwa/hepsiburada-icon-4x.png",
1730
"type": "image/png",
18-
"sizes": "512x512"
31+
"sizes": "144x144"
32+
},
33+
{
34+
"src": "https://static.hepsiburada.net/assets/sfstatic/Content/images/android-chrome-192x192-new.png",
35+
"sizes": "192x192",
36+
"type": "image/png"
37+
},
38+
{
39+
"src": "https://static.hepsiburada.net/assets/sfstatic/Content/images/android-chrome-512x512-new.png",
40+
"sizes": "512x512",
41+
"type": "image/png"
1942
}
2043
],
21-
"start_url": ".",
22-
"display": "standalone",
23-
"theme_color": "#000000",
24-
"background_color": "#ffffff"
44+
"start_url": "."
2545
}

‎client/src/App.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
1+
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
2+
import { Home, Error } from "./pages";
3+
14
function App() {
2-
return <div className="App">{process.env.REACT_APP_BACKEND_ENDPOINT}</div>;
5+
return (
6+
<div>
7+
<Router>
8+
<Switch>
9+
<Route path="/" exact component={Home} />
10+
<Route path="*" component={Error} />
11+
</Switch>
12+
</Router>
13+
</div>
14+
);
315
}
416

517
export default App;

‎client/src/assets/index.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as Logo } from "./svg/logo.svg";
2+
export { default as SearchIcon } from "./svg/search-icon.svg";

‎client/src/assets/svg/logo.svg

Lines changed: 3 additions & 0 deletions
Loading

‎client/src/assets/svg/search-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import styles from "./styles.module.scss";
2+
import { Logo } from "../../../assets";
3+
import { Search } from "../..";
4+
export default function Header() {
5+
return (
6+
<header className={styles.Container}>
7+
<a href="/" target="" title="Hepsiburada">
8+
<img className={styles.Logo} src={Logo} alt="hb-logo" />
9+
</a>
10+
<Search />
11+
<div>Header</div>
12+
</header>
13+
);
14+
}

‎client/src/components/Layout/Header/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+
width: 100%;
6+
height: 96px;
7+
padding: 0 80px;
8+
align-items: center;
9+
justify-content: space-between;
10+
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.35);
11+
// background-color: aqua;
12+
13+
.Logo {
14+
width: 211.52px;
15+
height: 35px;
16+
cursor: pointer;
17+
}
18+
}

‎client/src/components/Layout/Section/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 Section({ children }) {
4+
return <section className={styles.container}>section {children}</section>;
5+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.container {
2+
display: flex;
3+
}

‎client/src/components/Layout/Sidebar/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 Sidebar({ children }) {
4+
return <aside className={styles.container}>sidebar {children}</aside>;
5+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
}

‎client/src/components/Layout/SubHeader/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 SubHeader({ children }) {
4+
return <div className={styles.container}>subheader {children}</div>;
5+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.container {
2+
display: flex;
3+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Header } from "..";
2+
import { SubHeader } from "..";
3+
import { Sidebar } from "..";
4+
import { Section } from "..";
5+
6+
import styles from "./styles.module.scss";
7+
8+
export default function Layout({ children }) {
9+
return (
10+
<div className={styles.container}>
11+
<Header />
12+
<SubHeader />
13+
<Sidebar />
14+
<Section />
15+
{children}
16+
</div>
17+
);
18+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: flex-start;
5+
// align-items: center;
6+
height: 100vh;
7+
width: 100vw;
8+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import styles from "./styles.module.scss";
2+
import { SearchIcon } from "../../assets/";
3+
4+
export default function Search() {
5+
return (
6+
<div className={styles.Container}>
7+
<span className={styles.LogoWrapper}>
8+
<img src={SearchIcon} height="17.5" alt="hb-logo" />
9+
</span>
10+
<input
11+
type="search"
12+
className={styles.SearchInput}
13+
placeholder="25 milyon'dan fazla ürün içerisinde ara"
14+
/>
15+
</div>
16+
);
17+
}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@use "../../global/variables.scss" as vars;
2+
3+
.Container {
4+
display: flex;
5+
align-items: center;
6+
justify-content: flex-start;
7+
width: 669px;
8+
height: 48px;
9+
padding: 0 20px;
10+
border-radius: 100px;
11+
background-color: vars.$search-bg-color;
12+
cursor: text;
13+
14+
.LogoWrapper {
15+
width: 32px;
16+
min-width: 32px;
17+
height: 32px;
18+
margin-right: 4px;
19+
cursor: default;
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
}
24+
25+
.SearchInput {
26+
width: 100%;
27+
border: unset;
28+
outline: unset;
29+
font-size: 15px;
30+
font-weight: 400;
31+
background-color: transparent;
32+
color: vars.$primary-font-color;
33+
}
34+
35+
::placeholder {
36+
/* Chrome, Firefox, Opera, Safari 10.1+ */
37+
color: vars.$search-ph-color;
38+
opacity: 1; /* Firefox */
39+
}
40+
41+
:-ms-input-placeholder {
42+
/* Internet Explorer 10-11 */
43+
color: vars.$search-ph-color;
44+
}
45+
46+
::-ms-input-placeholder {
47+
/* Microsoft Edge */
48+
color: vars.$search-ph-color;
49+
}
50+
}

‎client/src/components/index.jsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export { default as Layout } from "./Layout";
2+
export { default as Header } from "./Layout/Header";
3+
export { default as Section } from "./Layout/Section";
4+
export { default as Sidebar } from "./Layout/Sidebar";
5+
export { default as SubHeader } from "./Layout/SubHeader";
6+
export { default as Search } from "./Search";

‎client/src/global/index.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ body {
1414
-moz-osx-font-smoothing: grayscale;
1515
}
1616

17-
/* li {
17+
li {
1818
list-style: none;
1919
padding: 0;
2020
margin: 0;
21-
} */
21+
}

‎client/src/global/variables.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
$desktop-width: 1440px;
2+
3+
$brand-color: #ff6000; // logo, linkler vs
4+
5+
$border-color: #b0b0b0; // buttonlar sepetim, siralama
6+
$hover-border-color: $border-color; // ürüne hover edilmesi
7+
8+
$primary-font-color: #484848; // ana baslik, alt basliklar
9+
$secondary-font-color: #646464; // linkler
10+
$disabled-font-color: #9b9b9b; // düşülen para
11+
$highlight-font-color: #f90000; // indirim, sepetten kaldir butonu
12+
13+
$link-color: $secondary-font-color;
14+
$visited-link-color: $secondary-font-color;
15+
$hover-link-color: $brand-color;
16+
17+
$add-to-cart-btn-bg: rgba(255, 96, 0, 0.11);
18+
$cart-remove-btn-color: $highlight-font-color;
19+
$pagination-btn-color: #eeeeee;
20+
$search-bg-color: $pagination-btn-color;
21+
$search-ph-color: $border-color;
22+
23+
$secondary-bg-color: $border-color; // search, deactive button
24+
// @use "../../global/variables.scss" as vars;

0 commit comments

Comments
 (0)