update 3 files and delete 10 files

3 years ago · 52c8330f0c
parent 76aa230922
commit 52c8330f0c
3 changed files with 305 additions and 26 deletions
--- a/src/components/SingleProduct/ProductDesign1/index.js
+++ b/src/components/SingleProduct/ProductDesign1/index.js
@ -0,0 +1,263 @@
+import React, { useState } from "react";
+import ReactTooltip from "react-tooltip";
+import TagDesign1 from "../Tag/TagDesign1";
+
+import StarRating from "../../Rating/StarRating1";
+
+const Design1 = ({
+  colors,
+  likeBtn,
+  discount,
+  discountPricePercent,
+  discountPrice,
+  productContent,
+  star,
+  productTags,
+  priceDirection,
+  productTitleAlignment,
+  priceHolder,
+  productHolderBorder,
+  productHolderBorderColor,
+  productTitleColor,
+  productExcerptTextColor,
+  productCat,
+  productCatTextColor,
+  rangeHolder,
+  verticalImg,
+  horizontalImg,
+  rangeWidth,
+  addToCartHolder,
+}) => {
+  const [isHovering, setIsHovering] = useState(false);
+  return (
+    <div className="flex flex-wrap sm:flex-nowrap justify-around">
+      <div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
+        <div
+          className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
+        >
+          {/* product image */}
+          <div className="w-full relative">
+            {/* icons on image */}
+            <div className="absolute left-2 top-2">
+              {discountPricePercent && (
+                <div className="bg-discountPriceBg rounded-md px-2">
+                  <p className="text-discountPriceTitle font-bold text-xs">
+                    23<span>%</span>
+                  </p>
+                </div>
+              )}
+              {likeBtn && (
+                <div className="bg-likeBtnBg rounded-md flex justify-center my-2">
+                  <img
+                    src="images/SingleProductvuesax-linear-heart.svg"
+                    alt=""
+                    className="w-5"
+                  />
+                </div>
+              )}
+              {discount && (
+                <div className="rounded-md">
+                  <img
+                    src="images/SingleProductdiscount.png"
+                    alt=""
+                    className="w-full"
+                  />
+                </div>
+              )}
+            </div>
+            {/* img */}
+            <div className="flex-shrink-0">
+              {verticalImg && (
+                <img
+                  src="images/SingleProductgoldon.png"
+                  alt=""
+                  className="w-full rounded-lg cursor-pointer"
+                  onMouseEnter={() => setIsHovering(true)}
+                  onMouseLeave={() => setIsHovering(false)}
+                />
+              )}
+              {horizontalImg && (
+                <img
+                  src="images/SingleProductwatermelon.png"
+                  alt=""
+                  className="w-full rounded-lg"
+                />
+              )}
+            </div>
+            {/* select Color */}
+            {colors && (
+              <div className="flex items-center absolute right-2 bottom-2">
+                <img
+                  src="images/SingleProductyellowDotIcon.svg"
+                  alt=""
+                  data-tip="زرد"
+                  className="w-3 h-3 ml-1 cursor-pointer"
+                />
+                <ReactTooltip place="top" type="dark" effect="float" />
+                <img
+                  src="images/SingleProductredDotIcon.svg"
+                  alt=""
+                  data-tip="قرمز"
+                  className="w-3 h-3 ml-1 cursor-pointer"
+                />
+                <ReactTooltip place="top" type="dark" effect="float" />
+                <img
+                  src="images/SingleProductpurpleDotIcon.svg"
+                  alt=""
+                  data-tip="بنفش"
+                  className="w-3 h-3 ml-1 cursor-pointer"
+                />
+                <ReactTooltip place="top" type="dark" effect="float" />
+                <img
+                  src="images/SingleProductlightBlueDotIcon.svg"
+                  alt=""
+                  data-tip="آبی"
+                  className="w-3 h-3 ml-1 cursor-pointer"
+                />
+                <ReactTooltip place="top" type="dark" effect="float" />
+              </div>
+            )}
+            <div
+              className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${
+                isHovering ? "" : "hidden"
+              }`}
+            >
+              <button>افزودن به سبد خرید</button>
+            </div>
+          </div>
+          {/* product content */}
+          <div className="px-2">
+            <div className="mt-4">
+              <h2
+                className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
+              >
+                نسخه چاپی علموم تجربه هفتم
+              </h2>
+              {productContent && (
+                <p
+                  className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
+                >
+                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
+                  دیگری نیز دارد.
+                </p>
+              )}
+              {productCat && (
+                <span className={`text-xs font-light ${productCatTextColor}`}>
+                  پایه سوم
+                </span>
+              )}
+            </div>
+            {/* star */}
+            {star && (
+              <div className="flex items-center mt-2">
+                <StarRating />
+                <span className="text-xs text-productContent font-bold mr-2">
+                  39
+                </span>
+              </div>
+            )}
+            {/* price */}
+            {priceHolder && (
+              <div
+                className={`flex items-center justify-between ${priceDirection}`}
+              >
+                <div className="mt-2">
+                  <div
+                    className={`${
+                      priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
+                    }`}
+                  >
+                    <span className="text-xs text-borderColor ml-2">قیمت</span>
+                    {/* price with line on it */}
+                    {discountPrice && (
+                      <p className="line-through text-xs text-borderColor mr-2">
+                        145<span>تومان</span>
+                      </p>
+                    )}
+                  </div>
+                  <p className="text-sm text-productPrice font-semibold inline">
+                    145.000<span>تومان</span>
+                  </p>
+                </div>
+                {/* add to cart */}
+                {addToCartHolder && (
+                  <button
+                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
+                      priceDirection.indexOf("col") !== -1 ? "w-full" : ""
+                    }`}
+                  >
+                    اضافه کردن به سبد خرید
+                  </button>
+                )}
+              </div>
+            )}
+            {productTags && (
+              <div className="mt-2 flex flex-wrap">
+                {productTags.map((item, index) => (
+                  <TagDesign1 title={item} key={index} />
+                ))}
+              </div>
+            )}
+            {rangeHolder && (
+              <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
+                <div
+                  className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
+                ></div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Design1;
+
+// text colors i used for product title:
+// text-darkCrimsonTextColor
+// text-productTitle
+
+// text color i used for product excerpt:
+// text-productContent
+
+// text color i used for product cat:
+// text-darkCrimsonTextColor
+
+Design1.defaultProps = {
+  // icons on product image
+  colors: true,
+  likeBtn: true,
+  discount: true,
+  discountPricePercent: true,
+  // product price
+  discountPrice: true,
+  priceHolder: true,
+
+  productContent: true,
+  star: true,
+  productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"],
+  productCat: true,
+  rangeHolder: true,
+
+  // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
+  verticalImg: true,
+  horizontalImg: false,
+
+  addToCartHolder: true,
+
+  productTitleColor: "text-productTitle",
+
+  productExcerptTextColor: "text-productContent",
+
+  productCatTextColor: "text-darkCrimsonTextColor",
+  // برای درصد دادن به عرض رنج
+  rangeWidth: "w-44",
+  //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
+  productHolderBorder: "border",
+  productHolderBorderColor: "border-grayBorderColor",
+
+  productTitleAlignment: "text-justify",
+  //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
+  priceDirection: "flex-row",
+};
--- a/src/components/Tag/index.js
+++ b/src/components/Tag/index.js
@ -1,31 +1,25 @@
-import React from "react";
+import React, { useState } from "react";

-import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg";
+import Design1 from "./TagDesign1";

-const ProductTags = ({
-  titleColor,
-  title,
-  tagBgColor,
-  tagBorderColor,
-  icon,
-}) => {
+function Tag() {
+  const list = {
+    1: <Design1 />,
+  };
+  const [type, setType] = useState(1);
  return (
-    <button
-      className={`flex flex-row items-center rounded border-2 m-1 px-2 py-0.5 text-base ${titleColor} ${tagBorderColor} ${tagBgColor} `}
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
      >
-      {title}
-      {icon && <img src={icon} alt="" className="mr-5 w-2.5" />}
-    </button>
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
  );
-};
+}

-export default ProductTags;
-
-ProductTags.defaultProps = {
-  title: "کتاب",
-  titleColor: "text-blue-600",
-  tagBgColor: "bg-blue-300 bg-opacity-10",
-  tagBorderColor: "border-blue-200",
-  // for icons
-  icon: blackCancleIcon,
-};
+export default Tag;
--- a/src/redux/data.js
+++ b/src/redux/data.js
@ -22,6 +22,8 @@ import Navbar from "../components/Navbar";
 import SearchDesign from "../components/SearchDesign";
 import SwitchDesign from "../components/SwitchDesign";
 import Sidebar from "../components/Sidebar";
+import SingleProduct from "../components/SingleProduct";
+import Rating from "../components/Rating";

 // mini components
 import MiniComponents from "../components/MiniComponents";
@ -555,6 +557,26 @@ const components = [
      code: null,
    },
  },
+  {
+    name: "Single Product",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Single Product",
+      component: <SingleProduct />,
+      code: null,
+    },
+  },
+  {
+    name: "Rating",
+    author: "Andalib/Ashrafi",
+    props: [],
+    content: {
+      name: "Rating",
+      component: <Rating />,
+      code: null,
+    },
+  },
  // mini components
  {
    name: "Mini Components",