diff --git a/src/App.js b/src/App.js index 9798dee..220630c 100644 --- a/src/App.js +++ b/src/App.js @@ -2,13 +2,9 @@ import "./App.scss"; import ProductList from "./components/productlist/ProductList"; import { library } from "@fortawesome/fontawesome-svg-core"; import { fab } from "@fortawesome/free-brands-svg-icons"; -import { - faCheckSquare, - faCoffee, - faStar, -} from "@fortawesome/free-solid-svg-icons"; +import { faCheckSquare, faCoffee } from "@fortawesome/free-solid-svg-icons"; -library.add(fab, faCheckSquare, faCoffee, faStar); +library.add(fab, faCheckSquare, faCoffee); function App() { return ( diff --git a/src/components/productlist/ProductList.js b/src/components/productlist/ProductList.js index 0600cd8..1e57894 100644 --- a/src/components/productlist/ProductList.js +++ b/src/components/productlist/ProductList.js @@ -26,14 +26,1082 @@ const ProductList = ({ {/* title holder */}

آیتم محصولات

-
{/* product items1 */} -
+
{/* item1 */} -
+
+ {/*star img holder*/} +
+ {/* like btn */} + {discountPrice && ( +
+

+ 23% +

+
+ )} + {likeBtn && ( +
+ +
+ )} + {discount && ( +
+ +
+ )} + {/* img Holder */} +
+ +
+ {/* select Color */} + {colors && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+ )} +
+ {/* content holder */} +
+ {alignedProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {centeredProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {productContent && ( +

+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب + دیگری نیز دارد. +

+ )} +
+ {/* star holder */} + {star && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+ 39 +
+ )} + {/* price holder */} + {alignedPriceHolder && ( +
+ {/* price */} +
+
+ قیمت + {discountPrice && ( +

+ 145تومان +

+ )} +
+

+ 145.000تومان +

+
+ + {/* add to cart */} + +
+ )} + {centeredPriceHolder && ( +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ )} + {centeredPriceHolder1 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ +
+ )} + {centeredPriceHolder2 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+

نسخه چاپی علموم تجربه هفتم

+ +
+ )} + {centeredPriceHolder3 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+
+ +

23

+ +
+
+ )} + {/* tag holder */} + {productTags && ( +
+ + + +
+ )} +
+ {/* item2 */} +
+ {/*star img holder*/} +
+ {/* like btn */} + {discountPrice && ( +
+

+ 23% +

+
+ )} + {likeBtn && ( +
+ +
+ )} + {discount && ( +
+ +
+ )} + {/* img Holder */} +
+ +
+ {/* select Color */} + {colors && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+ )} +
+ {/* content holder */} +
+ {alignedProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {centeredProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {productContent && ( +

+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب + دیگری نیز دارد. +

+ )} +
+ {/* star holder */} + {star && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+ 39 +
+ )} + {/* price holder */} + {alignedPriceHolder && ( +
+ {/* price */} +
+
+ قیمت + {discountPrice && ( +

+ 145تومان +

+ )} +
+

+ 145.000تومان +

+
+ + {/* add to cart */} + +
+ )} + {centeredPriceHolder && ( +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ )} + {centeredPriceHolder1 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ +
+ )} + {centeredPriceHolder2 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+

نسخه چاپی علموم تجربه هفتم

+ +
+ )} + {centeredPriceHolder3 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+
+ +

23

+ +
+
+ )} + {/* tag holder */} + {productTags && ( +
+ + + +
+ )} +
+ {/* item3 */} +
+ {/*star img holder*/} +
+ {/* like btn */} + {discountPrice && ( +
+

+ 23% +

+
+ )} + {likeBtn && ( +
+ +
+ )} + {discount && ( +
+ +
+ )} + {/* img Holder */} +
+ +
+ {/* select Color */} + {colors && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+ )} +
+ {/* content holder */} +
+ {alignedProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {centeredProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {productContent && ( +

+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب + دیگری نیز دارد. +

+ )} +
+ {/* star holder */} + {star && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+ 39 +
+ )} + {/* price holder */} + {alignedPriceHolder && ( +
+ {/* price */} +
+
+ قیمت + {discountPrice && ( +

+ 145تومان +

+ )} +
+

+ 145.000تومان +

+
+ + {/* add to cart */} + +
+ )} + {centeredPriceHolder && ( +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ )} + {centeredPriceHolder1 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ +
+ )} + {centeredPriceHolder2 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+

نسخه چاپی علموم تجربه هفتم

+ +
+ )} + {centeredPriceHolder3 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+
+ +

23

+ +
+
+ )} + {/* tag holder */} + {productTags && ( +
+ + + +
+ )} +
+ {/* item4 */} +
+ {/*star img holder*/} +
+ {/* like btn */} + {discountPrice && ( +
+

+ 23% +

+
+ )} + {likeBtn && ( +
+ +
+ )} + {discount && ( +
+ +
+ )} + {/* img Holder */} +
+ +
+ {/* select Color */} + {colors && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+ )} +
+ {/* content holder */} +
+ {alignedProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {centeredProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {productContent && ( +

+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب + دیگری نیز دارد. +

+ )} +
+ {/* star holder */} + {star && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+ 39 +
+ )} + {/* price holder */} + {alignedPriceHolder && ( +
+ {/* price */} +
+
+ قیمت + {discountPrice && ( +

+ 145تومان +

+ )} +
+

+ 145.000تومان +

+
+ + {/* add to cart */} + +
+ )} + {centeredPriceHolder && ( +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ )} + {centeredPriceHolder1 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ +
+ )} + {centeredPriceHolder2 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+

نسخه چاپی علموم تجربه هفتم

+ +
+ )} + {centeredPriceHolder3 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+
+ +

23

+ +
+
+ )} + {/* tag holder */} + {productTags && ( +
+ + + +
+ )} +
+ {/* item5 */} +
+ {/*star img holder*/} +
+ {/* like btn */} + {discountPrice && ( +
+

+ 23% +

+
+ )} + {likeBtn && ( +
+ +
+ )} + {discount && ( +
+ +
+ )} + {/* img Holder */} +
+ +
+ {/* select Color */} + {colors && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+ )} +
+ {/* content holder */} +
+ {alignedProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {centeredProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {productContent && ( +

+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب + دیگری نیز دارد. +

+ )} +
+ {/* star holder */} + {star && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+ 39 +
+ )} + {/* price holder */} + {alignedPriceHolder && ( +
+ {/* price */} +
+
+ قیمت + {discountPrice && ( +

+ 145تومان +

+ )} +
+

+ 145.000تومان +

+
+ + {/* add to cart */} + +
+ )} + {centeredPriceHolder && ( +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ )} + {centeredPriceHolder1 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ +
+ )} + {centeredPriceHolder2 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+

نسخه چاپی علموم تجربه هفتم

+ +
+ )} + {centeredPriceHolder3 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+
+ +

23

+ +
+
+ )} + {/* tag holder */} + {productTags && ( +
+ + + +
+ )} +
+ {/* item6 */} +
+ {/*star img holder*/} +
+ {/* like btn */} + {discountPrice && ( +
+

+ 23% +

+
+ )} + {likeBtn && ( +
+ +
+ )} + {discount && ( +
+ +
+ )} + {/* img Holder */} +
+ +
+ {/* select Color */} + {colors && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+ )} +
+ {/* content holder */} +
+ {alignedProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {centeredProductTitle && ( +

نسخه چاپی علموم تجربه هفتم

+ )} + {productContent && ( +

+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب + دیگری نیز دارد. +

+ )} +
+ {/* star holder */} + {star && ( +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+ 39 +
+ )} + {/* price holder */} + {alignedPriceHolder && ( +
+ {/* price */} +
+
+ قیمت + {discountPrice && ( +

+ 145تومان +

+ )} +
+

+ 145.000تومان +

+
+ + {/* add to cart */} + +
+ )} + {centeredPriceHolder && ( +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ )} + {centeredPriceHolder1 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+ +
+ )} + {centeredPriceHolder2 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+

نسخه چاپی علموم تجربه هفتم

+ +
+ )} + {centeredPriceHolder3 && ( +
+ {/* price */} +
+ {/* price */} + قیمت +

+ 145.000تومان +

+
+
+ +

23

+ +
+
+ )} + {/* tag holder */} + {productTags && ( +
+ + + +
+ )} +
+ {/* item7 */} +
{/*star img holder*/}
{/* like btn */} @@ -221,15 +1289,15 @@ ProductList.defaultProps = { colors: true, likeBtn: true, discount: true, - discountPrice: false, - alignedProductTitle: true, - centeredProductTitle: false, - productContent: true, - alignedPriceHolder: true, + discountPrice: true, + alignedProductTitle: false, + centeredProductTitle: true, + productContent: false, + alignedPriceHolder: false, centeredPriceHolder: false, centeredPriceHolder1: false, centeredPriceHolder2: false, - centeredPriceHolder3: false, - star: true, - productTags: true, + centeredPriceHolder3: true, + star: false, + productTags: false, }; diff --git a/src/index..scss b/src/index..scss index 4205e9f..7590004 100644 --- a/src/index..scss +++ b/src/index..scss @@ -13,8 +13,12 @@ body { background-color: #f5f5f5; } +.product-items-holder { + @apply w-full flex flex-wrap items-center justify-around my-10 px-4; +} + .product-item { - @apply rounded-lg shadow-sm w-1/4 border p-2; + @apply w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border p-2 my-3; } .discountPriceBtn {