diff --git a/client/src/components/AddButton/index.jsx b/client/src/components/AddButton/index.jsx new file mode 100644 index 0000000..dbb5bf5 --- /dev/null +++ b/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 ? ( + + ) : ( + + ); +} diff --git a/client/src/components/AddButton/styles.module.scss b/client/src/components/AddButton/styles.module.scss new file mode 100644 index 0000000..cda4513 --- /dev/null +++ b/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; +} diff --git a/client/src/components/ImageBox/index.jsx b/client/src/components/ImageBox/index.jsx index e43b1b6..11a17e4 100644 --- a/client/src/components/ImageBox/index.jsx +++ b/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 }) { )} - {productImg && product} + {productImg && ( +
+ product +
+ )} ); } diff --git a/client/src/components/ImageBox/styles.module.scss b/client/src/components/ImageBox/styles.module.scss index f937bb9..c582fd2 100644 --- a/client/src/components/ImageBox/styles.module.scss +++ b/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; diff --git a/client/src/components/Layout/Header/styles.module.scss b/client/src/components/Layout/Header/styles.module.scss index d6ca4c6..436233e 100644 --- a/client/src/components/Layout/Header/styles.module.scss +++ b/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; diff --git a/client/src/components/Layout/Section/index.jsx b/client/src/components/Layout/Section/index.jsx index b899cd3..5f2f03b 100644 --- a/client/src/components/Layout/Section/index.jsx +++ b/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 {children}
; +export default function Section() { + return ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ); } diff --git a/client/src/components/Layout/Section/styles.module.scss b/client/src/components/Layout/Section/styles.module.scss index abde53a..2439814 100644 --- a/client/src/components/Layout/Section/styles.module.scss +++ b/client/src/components/Layout/Section/styles.module.scss @@ -1,3 +1,6 @@ -.container { +.Container { display: flex; + width: 1058px; + min-width: 1058px; + margin-bottom: 298px; } diff --git a/client/src/components/Layout/Sidebar/index.jsx b/client/src/components/Layout/Sidebar/index.jsx index 8092399..02bebe1 100644 --- a/client/src/components/Layout/Sidebar/index.jsx +++ b/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 ; +export default function Sidebar() { + return ( + + ); } diff --git a/client/src/components/Layout/Sidebar/styles.module.scss b/client/src/components/Layout/Sidebar/styles.module.scss index a386e82..66d9d09 100644 --- a/client/src/components/Layout/Sidebar/styles.module.scss +++ b/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; } diff --git a/client/src/components/Layout/index.jsx b/client/src/components/Layout/index.jsx index 5511c2e..b51f46c 100644 --- a/client/src/components/Layout/index.jsx +++ b/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 ( -
-
- - -
- {children} -
+ <> +
+
+ +
+ +
+
+ {showModal && } +
+
+ ); } diff --git a/client/src/components/Layout/styles.module.scss b/client/src/components/Layout/styles.module.scss index 87ef385..ac6aaa7 100644 --- a/client/src/components/Layout/styles.module.scss +++ b/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; } diff --git a/client/src/components/Link/index.jsx b/client/src/components/Link/index.jsx new file mode 100644 index 0000000..363d7ec --- /dev/null +++ b/client/src/components/Link/index.jsx @@ -0,0 +1,5 @@ +import styles from "./styles.module.scss"; + +export default function Link({ filterName }) { + return
  • {filterName}
    • ; +} diff --git a/client/src/components/Link/styles.module.scss b/client/src/components/Link/styles.module.scss new file mode 100644 index 0000000..db6e1b0 --- /dev/null +++ b/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; + } +} diff --git a/client/src/components/LinkList/index.jsx b/client/src/components/LinkList/index.jsx new file mode 100644 index 0000000..0b2b330 --- /dev/null +++ b/client/src/components/LinkList/index.jsx @@ -0,0 +1,10 @@ +import styles from "./styles.module.scss"; + +export default function LinkList({ filterTitle, children }) { + return ( + <> +

    {filterTitle}

    + + + ); +} diff --git a/client/src/components/LinkList/styles.module.scss b/client/src/components/LinkList/styles.module.scss new file mode 100644 index 0000000..eb2a1bb --- /dev/null +++ b/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; +} diff --git a/client/src/components/Modal/index.jsx b/client/src/components/Modal/index.jsx new file mode 100644 index 0000000..da3a654 --- /dev/null +++ b/client/src/components/Modal/index.jsx @@ -0,0 +1,25 @@ +import styles from "./styles.module.scss"; + +export default function Modal() { + return ( +
    +
    +

    Ürünü silmek istediğinize emin misiniz?

    +
    +
    +

    + 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.... +

    +
    +
    + + +
    +
    + ); +} diff --git a/client/src/components/Modal/styles.module.scss b/client/src/components/Modal/styles.module.scss new file mode 100644 index 0000000..e2db0d8 --- /dev/null +++ b/client/src/components/Modal/styles.module.scss @@ -0,0 +1,73 @@ +@use "../../global/variables.scss" as vars; + +.Container { + color: vars.$primary-font-color; + max-width: 400px; + width: 400px; + height: 260px; + background-color: #fff; + border: 1px solid rgba(228, 228, 228, 0.6); + box-shadow: 0px 6px 12px rgba(50, 50, 71, 0.07); + border-radius: 4px; + display: flex; + flex-direction: column; + justify-content: space-between; + position: absolute; + top: 250px; + z-index: 999; + + .Header { + display: flex; + align-items: center; + padding-left: 18px; + padding-right: 18px; + border-bottom: 1px solid #cdcdcd; + height: 60px; + } + + .Body { + display: flex; + align-items: center; + font-weight: normal; + padding-left: 20px; + padding-right: 20px; + padding-top: 16px; + font-size: 12px; + line-height: 17px; + + .Content { + font-weight: normal; + font-size: 12px; + } + } + + .Footer { + display: flex; + justify-content: flex-end; + height: 56px; + padding-right: 20px; + align-items: flex-end; + padding-bottom: 20px; + + .Yes { + background: #90d659; + border-radius: 4px; + width: 70px; + height: 26px; + outline: none; + border: none; + color: #fff; + } + + .No { + margin-left: 10px; + background: #d65959; + width: 70px; + height: 26px; + border-radius: 4px; + outline: none; + border: none; + color: #fff; + } + } +} diff --git a/client/src/components/PageInfo/styles.module.scss b/client/src/components/PageInfo/styles.module.scss index 79dafef..03714ad 100644 --- a/client/src/components/PageInfo/styles.module.scss +++ b/client/src/components/PageInfo/styles.module.scss @@ -5,7 +5,7 @@ flex-grow: 3; position: relative; flex-direction: column; - padding-left: 3px; + margin-left: 3px; .PageTitle { font-family: Roboto; @@ -31,12 +31,12 @@ .SearchLabel { color: vars.$muted-font-color; - width: 100.33px; - min-width: 100.33px; + width: 101px; + min-width: 101px; } .searchText { - margin-left: 6px; + margin-left: 3px; color: black; } } diff --git a/client/src/components/ProductTable/Pagination/index.jsx b/client/src/components/ProductTable/Pagination/index.jsx new file mode 100644 index 0000000..1cd6a86 --- /dev/null +++ b/client/src/components/ProductTable/Pagination/index.jsx @@ -0,0 +1,13 @@ +import styles from "./styles.module.scss"; + +export default function Pagination() { + return ( +
    + + + + + +
    + ); +} diff --git a/client/src/components/ProductTable/Pagination/styles.module.scss b/client/src/components/ProductTable/Pagination/styles.module.scss new file mode 100644 index 0000000..3c25b02 --- /dev/null +++ b/client/src/components/ProductTable/Pagination/styles.module.scss @@ -0,0 +1,25 @@ +@use "../../../global/variables.scss" as vars; + +.Container { + display: flex; + align-items: center; + margin-top: 39px; + + .Button { + width: 33px; + height: 33px; + background-color: #ffff; + margin-left: 13.2px; + border: 1px solid vars.$pagination-btn-color; + border-radius: 9px; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 20px; + color: vars.$secondary-font-color; + + &:last-child { + margin-right: 0; + } + } +} diff --git a/client/src/components/ProductTable/ProductItem/index.jsx b/client/src/components/ProductTable/ProductItem/index.jsx new file mode 100644 index 0000000..1dc0a6b --- /dev/null +++ b/client/src/components/ProductTable/ProductItem/index.jsx @@ -0,0 +1,51 @@ +import { useState } from "react"; +import ImageBox from "../../ImageBox"; +import styles from "./styles.module.scss"; +import cn from "classnames"; +import AddButton from "../../AddButton"; + +export default function ProductItem() { + const [isHovered, setIsHovered] = useState(false); + + const onMouseEnter = () => setIsHovered(true); + const onMouseLeave = () => setIsHovered(false); + return ( +
    onMouseEnter()} + onMouseLeave={() => onMouseLeave()} + > + {!isHovered ? ( + <> + +
    +
    iPhone 11 Kırmızı Kılıf
    +
    +
    + + Apple +
    +
    + + Siyah +
    +
    + 90,85 TL +
    + 124,00 TL + 12% +
    +
    + + ) : ( + <> + +
    +
    iPhone 11 Kırmızı Kılıf
    + +
    + + )} +
    + ); +} diff --git a/client/src/components/ProductTable/ProductItem/styles.module.scss b/client/src/components/ProductTable/ProductItem/styles.module.scss new file mode 100644 index 0000000..bb35415 --- /dev/null +++ b/client/src/components/ProductTable/ProductItem/styles.module.scss @@ -0,0 +1,81 @@ +@use "../../../global/variables.scss" as vars; + +.Container { + display: flex; + flex-direction: column; + align-items: center; + width: 254px; + min-height: 100%; + max-height: 100%; + height: 100%; + + &.Stroke { + border: 1px solid vars.$stroke-border-color; + border-radius: 4px; + } + + .Content { + display: flex; + width: 230px; + max-width: 230px; + height: 130px; + max-height: 130px; + align-items: flex-start; + flex-direction: column; + justify-content: space-between; + + .Name { + padding-top: 9px; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 18px; + } + + .Variant { + font-family: Roboto; + font-style: normal; + font-weight: bold; + font-size: 12px; + line-height: 18px; + color: vars.$primary-font-color; + + .Name { + font-weight: normal; + } + } + + .Price { + height: 17px; + font-style: normal; + font-weight: bold; + font-size: 14px; + line-height: 18px; + color: #000; + } + + .DiscountContainer { + display: flex; + + .DiscountedPrice { + height: 17px; + min-width: 60px; + font-style: normal; + font-weight: normal; + font-size: 13px; + line-height: 18px; + color: vars.$disabled-font-color; + text-decoration-line: line-through; + } + + .Discount { + font-family: Roboto; + font-style: normal; + font-weight: bold; + font-size: 12px; + line-height: 18px; + color: vars.$highlight-font-color; + } + } + } +} diff --git a/client/src/components/ProductTable/ProductRow/index.jsx b/client/src/components/ProductTable/ProductRow/index.jsx new file mode 100644 index 0000000..5a8c49a --- /dev/null +++ b/client/src/components/ProductTable/ProductRow/index.jsx @@ -0,0 +1,5 @@ +import styles from "./styles.module.scss"; + +export default function ProductRow({ children }) { + return
    {children}
    ; +} diff --git a/client/src/components/ProductTable/ProductRow/styles.module.scss b/client/src/components/ProductTable/ProductRow/styles.module.scss new file mode 100644 index 0000000..ad82f36 --- /dev/null +++ b/client/src/components/ProductTable/ProductRow/styles.module.scss @@ -0,0 +1,9 @@ +@use "../../../global/variables.scss" as vars; + +.Row { + display: flex; + width: 100%; + justify-content: space-between; + height: 479px; + max-height: 479px; +} diff --git a/client/src/components/ProductTable/index.jsx b/client/src/components/ProductTable/index.jsx new file mode 100644 index 0000000..b422e6e --- /dev/null +++ b/client/src/components/ProductTable/index.jsx @@ -0,0 +1,11 @@ +import { Pagination } from ".."; +import styles from "./styles.module.scss"; + +export default function ProductTable({ children }) { + return ( +
    +
    {children}
    + +
    + ); +} diff --git a/client/src/components/ProductTable/styles.module.scss b/client/src/components/ProductTable/styles.module.scss new file mode 100644 index 0000000..79da9e5 --- /dev/null +++ b/client/src/components/ProductTable/styles.module.scss @@ -0,0 +1,16 @@ +@use "../../global/variables.scss" as vars; + +.Container { + display: flex; + flex-direction: column; + width: 100%; + + .Table { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + height: 1465px; + min-height: 1465px; + } +} diff --git a/client/src/components/SelectBox/styles.module.scss b/client/src/components/SelectBox/styles.module.scss index d23a638..ab42eab 100644 --- a/client/src/components/SelectBox/styles.module.scss +++ b/client/src/components/SelectBox/styles.module.scss @@ -41,7 +41,7 @@ display: block; position: absolute; top: 47px; - right: 0; + right: -1px; width: 274px; max-width: 274px; height: 152px; diff --git a/client/src/components/index.jsx b/client/src/components/index.jsx index cc73779..d0e5809 100644 --- a/client/src/components/index.jsx +++ b/client/src/components/index.jsx @@ -11,3 +11,11 @@ export { default as ImageBox } from "./ImageBox"; export { default as PageInfo } from "./PageInfo"; export { default as SelectBox } from "./SelectBox"; export { default as SelectBoxItem } from "./SelectBox/SelectBoxItem"; +export { default as LinkList } from "./LinkList"; +export { default as Link } from "./Link"; +export { default as ProductTable } from "./ProductTable"; +export { default as ProductRow } from "./ProductTable/ProductRow"; +export { default as ProductItem } from "./ProductTable/ProductItem"; +export { default as Pagination } from "./ProductTable/Pagination"; +export { default as AddButton } from "./AddButton"; +export { default as Modal } from "./Modal"; diff --git a/client/src/global/variables.scss b/client/src/global/variables.scss index f8c2154..93d3e86 100644 --- a/client/src/global/variables.scss +++ b/client/src/global/variables.scss @@ -5,10 +5,12 @@ $brand-color: #ff6000; // logo, linkler vs $border-color: #b0b0b0; // buttonlar sepetim $sorting-border-color: #b4b4bb; //siralama $hover-border-color: $border-color; // ürüne hover edilmesi +$stroke-border-color: #cdcdcd; $muted-font-color: $border-color; $primary-font-color: #484848; // ana baslik, alt basliklar $secondary-font-color: #646464; // linkler +$deactive-font-color: $border-color; // sepet deactive $disabled-font-color: #9b9b9b; // düşülen para $highlight-font-color: #f90000; // indirim, sepetten kaldir butonu @@ -19,8 +21,8 @@ $hover-link-color: $brand-color; $add-to-cart-btn-bg: rgba(255, 96, 0, 0.11); $cart-item-border-color: #e5e5e5; $cart-remove-btn-color: $highlight-font-color; +$cart-remove-deactive-btn-color: rgba(126, 126, 126, 0.11); $pagination-btn-color: #eeeeee; $search-bg-color: $pagination-btn-color; $search-ph-color: $border-color; // search placeholder -$secondary-bg-color: $border-color; // search, deactive button