Merge pull request #22 from patika-hepsiburada-react-bootcamp/dev

[#2, #12] feat: MVP of UI done

client/src/components/AddButton/index.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import styles from "./styles.module.scss";
+
+export default function AddButton() {
+  const [isActive, setIsActive] = useState(true);
+
+  const handleActive = () => {
+    setIsActive(false);
+  };
+
+  return isActive ? (
+    <button
+      className={isActive && styles.ActiveButton}
+      onClick={() => handleActive()}
+    >
+      Sepete Ekle
+    </button>
+  ) : (
+    <button className={!isActive && styles.DeactiveButton}>
+      Bu ürünü sepete ekleyemezsiniz.
+    </button>
+  );
+}

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

@@ -0,0 +1,27 @@
+@use "../../global/variables.scss" as vars;
+
+.ActiveButton {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  background-color: vars.$add-to-cart-btn-bg;
+  color: vars.$hover-link-color;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  width: 233px;
+  height: 32px;
+  cursor: pointer;
+}
+
+.DeactiveButton {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  background-color: vars.$cart-remove-deactive-btn-color;
+  color: vars.$deactive-font-color;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  width: 233px;
+  height: 32px;
+  cursor: pointer;
+}

client/src/components/ImageBox/index.jsx

@@ -2,9 +2,13 @@
 import styles from "./styles.module.scss";
 import cn from "classnames";
 
-export default function ImageBox({ src, basketImg, productImg }) {
+export default function ImageBox({ src, basketImg, productImg, isHovered }) {
   const basketItemClasses = cn(styles.Container, styles.BasketItemImg);
-
+  const productItemClasses = cn(
+    styles.Container,
+    styles.ProductItemImg,
+    isHovered && styles.Hovered
+  );
   return (
     <>
       {basketImg && (
@@ -18,7 +22,16 @@ export default function ImageBox({ src, basketImg, productImg }) {
         </div>
       )}
 
-      {productImg && <img src width="224" height="332" alt="product" />}
+      {productImg && (
+        <div className={productItemClasses}>
+          <img
+            src={`${process.env.REACT_APP_IMAGE_URL}s/32/224-332/10352817012786.jpg`}
+            width="224"
+            height="332"
+            alt="product"
+          />
+        </div>
+      )}
     </>
   );
 }

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

@@ -7,6 +7,21 @@
   border: 1px solid vars.$cart-item-border-color;
   border-radius: 4px;
 
+  &.ProductItemImg {
+    background-color: white;
+    min-height: 339px;
+    min-width: 254px;
+    padding: 3px 15px 4px 15px;
+  }
+
+  &.Hovered {
+    border: 1px solid transparent;
+    outline: unset;
+    width: 252px;
+    min-width: 252px;
+    padding: 2px 13px 4px 13px;
+  }
+
   &.BasketItemImg {
     width: 54px;
     height: 72px;

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

@@ -3,6 +3,7 @@
 .Container {
   display: flex;
   width: 100%;
+  min-height: 96px;
   height: 96px;
   padding: 0 80px;
   align-items: center;

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

@@ -1,5 +1,29 @@
 import styles from "./styles.module.scss";
+import { ProductTable, ProductRow, ProductItem } from "../..";
 
-export default function Section({ children }) {
-  return <section className={styles.container}>section {children}</section>;
+export default function Section() {
+  return (
+    <section className={styles.Container}>
+      <ProductTable>
+        <ProductRow>
+          <ProductItem />
+          <ProductItem />
+          <ProductItem />
+          <ProductItem />
+        </ProductRow>
+        <ProductRow>
+          <ProductItem />
+          <ProductItem />
+          <ProductItem />
+          <ProductItem />
+        </ProductRow>
+        <ProductRow>
+          <ProductItem />
+          <ProductItem />
+          <ProductItem />
+          <ProductItem />
+        </ProductRow>
+      </ProductTable>
+    </section>
+  );
 }

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

@@ -1,3 +1,6 @@
-.container {
+.Container {
   display: flex;
+  width: 1058px;
+  min-width: 1058px;
+  margin-bottom: 298px;
 }

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

@@ -1,5 +1,32 @@
+import { LinkList, Link } from "../..";
 import styles from "./styles.module.scss";
 
-export default function Sidebar({ children }) {
-  return <aside className={styles.container}>sidebar {children}</aside>;
+export default function Sidebar() {
+  return (
+    <aside className={styles.Container}>
+      <LinkList filterTitle="Renk">
+        <Link filterName="Label Text (4)" />
+        <Link filterName="Lacivert (3)" />
+        <Link filterName="Sarı (1)" />
+        <Link filterName="Siyah (5)" />
+        <Link filterName="Beyaz (2)" />
+      </LinkList>
+      <LinkList filterTitle="Sıralama">
+        <Link filterName="En Düşük Fiyat" />
+        <Link filterName="En Yüksek Fiyat" />
+        <Link filterName="En Yeniler (A>Z)" />
+        <Link filterName="En Yeniler (Z>A)" />
+      </LinkList>
+      <LinkList filterTitle="Marka">
+        <Link filterName="Samsung (4)" />
+        <Link filterName="Nokia (6)" />
+        <Link filterName="Apple (3)" />
+        <Link filterName="LG (2)" />
+        <Link filterName="Huawei (6)" />
+        <Link filterName="Xiaomi (9)" />
+        <Link filterName="General Mobile (1)" />
+        {/* count eklenecek */}
+      </LinkList>
+    </aside>
+  );
 }

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

@@ -1,4 +1,7 @@
-.container {
+.Container {
+  width: 206px;
+  min-width: 206px;
+  padding-top: 19px;
   display: flex;
   flex-direction: column;
 }

client/src/components/Layout/index.jsx

@@ -1,18 +1,23 @@
-import { Header } from "..";
-import { SubHeader } from "..";
-import { Sidebar } from "..";
-import { Section } from "..";
+import { useState } from "react";
+import { Header, SubHeader, Sidebar, Section, Modal } from "..";
 
 import styles from "./styles.module.scss";
 
-export default function Layout({ children }) {
+export default function Layout() {
+  const [showModal] = useState(false);
+
   return (
-    <div className={styles.container}>
-      <Header />
-      <SubHeader />
-      <Sidebar />
-      <Section />
-      {children}
-    </div>
+    <>
+      <div className={styles.Container}>
+        <Header />
+        <SubHeader />
+        <div className={styles.Wrapper}>
+          <Sidebar />
+          <Section />
+        </div>
+        {showModal && <Modal />}
+      </div>
+      <div className={showModal && styles.GrayLayer}></div>
+    </>
   );
 }

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

@@ -1,8 +1,30 @@
-.container {
+@use "../../global/variables.scss" as vars;
+
+.Container {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   height: 100vh;
   width: 100vw;
+  position: relative;
+
+  .Wrapper {
+    display: flex;
+    min-width: vars.$desktop-width;
+    max-width: vars.$desktop-width;
+    padding: 0 80px 2px 80px;
+    justify-content: space-between;
+  }
+}
+.GrayLayer {
+  position: absolute;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  min-height: 100vh;
+  min-width: 100vw;
+  background-color: #e5e5e5;
+  opacity: 0.5;
+  z-index: 99;
 }

client/src/components/Link/index.jsx

@@ -0,0 +1,5 @@
+import styles from "./styles.module.scss";
+
+export default function Link({ filterName }) {
+  return <li className={styles.Container}>{filterName}</li>;
+}

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

@@ -0,0 +1,15 @@
+@use "../../global/variables.scss" as vars;
+
+.Container {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 24px;
+  color: vars.$link-color;
+  cursor: pointer;
+
+  &:hover {
+    color: vars.$hover-link-color;
+  }
+}

client/src/components/LinkList/index.jsx

@@ -0,0 +1,10 @@
+import styles from "./styles.module.scss";
+
+export default function LinkList({ filterTitle, children }) {
+  return (
+    <>
+      <h3 className={styles.Title}>{filterTitle}</h3>
+      <ul className={styles.Container}>{children}</ul>
+    </>
+  );
+}

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

@@ -0,0 +1,18 @@
+@use "../../global/variables.scss" as vars;
+
+.Container {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24px;
+}
+
+.Title {
+  padding-left: 1px;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 150%;
+  color: vars.$primary-font-color;
+  margin-bottom: 20px;
+}

client/src/components/Modal/index.jsx

@@ -0,0 +1,25 @@
+import styles from "./styles.module.scss";
+
+export default function Modal() {
+  return (
+    <div className={styles.Container}>
+      <div className={styles.Header}>
+        <h3>Ürünü silmek istediğinize emin misiniz?</h3>
+      </div>
+      <div className={styles.Body}>
+        <p className={styles.Content}>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting,
+          remaining essentiall....
+        </p>
+      </div>
+      <div className={styles.Footer}>
+        <button className={styles.Yes}>EVET</button>
+        <button className={styles.No}>HAYIR</button>
+      </div>
+    </div>
+  );
+}