update 2 files and delete 4 files

master
mahdi 2 years ago
parent 0a054dd1c3
commit df6a12fea4
  1. 14
      src/components/SingleProduct/ProductDesign1/index.js
  2. 1
      src/components/productDesign/ProductDesign.css
  3. 9
      src/components/productDesign/ProductDesign.css.map
  4. 324
      src/components/productDesign/ProductDesign.js
  5. 0
      src/components/productDesign/ProductDesign.scss
  6. 2
      src/index.scss

@ -40,10 +40,12 @@ const Design1 = ({
productTags,
hoverEffect,
priceDirection,
}) => {
return (
<div className={`w-fit ${productHolderClassname}`}>
<div className={`relative group w-fit ${productHolderClassname}`}>
{/* product image */}
<div className="w-full relative">
{/* icons on image */}
@ -196,6 +198,12 @@ const Design1 = ({
/>
)}
</div>
{/* {hoverEffect && ( )} */}
<div className="absolute right-0 bottom-0 h-full w-full group-hover:bg-blackBg group-hover:rounded group-hover:border transition duration-300 opacity-50"></div>
<Button
className={`group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs opacity-0 absolute left-1/2 bottom-1/2 transform -translate-x-1/2 -translate-y-1/2`}
text={"افزودن به سبد خرید"}
/>
</div>
);
};
@ -238,6 +246,8 @@ Design1.defaultProps = {
productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"],
hoverEffect: false,
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
priceDirection: "flex-col",
priceDirection: "flex-row",
};

@ -1 +0,0 @@
/* No CSS *//*# sourceMappingURL=ProductDesign.css.map */

@ -1,9 +0,0 @@
{
"version": 3,
"mappings": "",
"sources": [
"ProductDesign.scss"
],
"names": [],
"file": "ProductDesign.css"
}

@ -1,324 +0,0 @@
import React, { useEffect, useState } from "react";
import "./ProductDesign.scss";
import StarRating from "../starRating/StarRating";
import ReactTooltip from "react-tooltip";
import book from "../../assets/images/goldon.png";
import watermelon from "../../assets/images/watermelon.png";
import heart from "../../assets/icons/vuesax-linear-heart.svg";
import discountImg from "../../assets/icons/discount.png";
import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
import RedDotIcon from "../../assets/icons/redDotIcon.svg";
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
import Button from "../Button";
const ProductDesign = ({
colors,
likeBtn,
discount,
discountPricePercent,
discountPrice,
productContent,
star,
productTags,
priceDirection,
productTitleAlignment,
priceHolder,
productHolderBorder,
productHolderBorderColor,
productTitleColor,
productExcerptTextColor,
productCat,
productCatTextColor,
rangeHolder,
verticalImg,
horizontalImg,
rangeWidth,
addToCartHolder,
mainPriceTitle,
}) => {
const [progressFlag, setProgressFlag] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 1000);
}, []);
return (
<section className="w-full sm:w-11/12 mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg text-$productTitle">آیتم محصولات</h2>
<button className="bg-indigo-500 text-white rounded shadow-lg p-2">
مشاهده تمام محصولات
</button>
</div>
<div>
<p className="leading-10">
نام این کامپوننت
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
productDesign
</span>
است و داخل این کامپوننت شما میتوانید با
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
true - false
</span>
کردن
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
Props
</span>
ها به صورت داینامیک دیزاین های مختلفی را مشاهده کنید شما همچنین
میتوانید با تغییر دادن مقدار <span>PriceDirection</span> به یکی از این
ها:
<br />
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
flex-row/flex-row-reverse/flex-column/flex-column-reverse
</span>
دیزاین های متفاوتی را برای قسمت قیمت و اضافه کردن به سبد خرید هر محصول
ببینید.
</p>
<p className="mt-4 leading-7 ">
برای نمایش ستاره ها من از یک کامپوننت استفاده کردم ====
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
Star Rating
</span>
</p>
</div>
{/* product UI Design */}
<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={`group w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 relative cursor-pointer ${productHolderBorder} ${productHolderBorderColor} hover:border-0`}
>
{/* product image */}
<div className="w-full relative group">
{/* icons on image */}
<div className="absolute left-2 top-2">
{discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<p className="text-discountPriceTitle font-sansbold text-xs">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={heart} alt="" className="w-5" />
</div>
)}
{discount && (
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
</div>
{/* img */}
<div className="">
{verticalImg && (
<img
src={book}
alt=""
className="w-full rounded-lg cursor-pointer"
/>
)}
{horizontalImg && (
<img src={watermelon} alt="" className="w-full rounded-lg" />
)}
</div>
{/* select Color */}
{colors && (
<div className="flex items-center absolute right-2 bottom-2">
<img
src={YellowDotIcon}
alt=""
data-tip="زرد"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={RedDotIcon}
alt=""
data-tip="قرمز"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={PurpleDotIcon}
alt=""
data-tip="بنفش"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={LightBlueDotIcon}
alt=""
data-tip="آبی"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
</div>
)}
</div>
{/* product content */}
<div className="px-2">
<div className="mt-4">
<h2
className={`leading-4 text-base font-semibold ${productTitleColor} ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p
className={`text-justify mt-2 text-sm 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-sansbold 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"
}`}
>
{mainPriceTitle && (
<span className="text-xs text-borderColor ml-2">
قیمت
</span>
)}
{/* price with line on it */}
{discountPrice && (
<p className="line-through text-xs text-borderColor">
<span> قیمت</span> 140<span>تومان</span>
</p>
)}
</div>
<p className="text-sm text-productPrice font-semibold inline">
130.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
{addToCartHolder && (
<button
className={`rounded-lg px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
)}
</div>
)}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
ارسال رایگان
</button>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
برچسب های دیگر
</button>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
دسته بندی به صورت کادو
</button>
</div>
)}
{rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div
className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{
width: progressFlag ? rangeWidth : 0,
}}
></div>
</div>
)}
</div>
{/* dark hover effect */}
<div className="absolute right-0 bottom-0 h-full w-full group-hover:bg-blackBg group-hover:rounded group-hover:border transition duration-300 opacity-50"></div>
<Button
className={`group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs opacity-0 absolute left-1/2 bottom-1/2 transform -translate-x-1/2 -translate-y-1/2`}
text={"افزودن به سبد خرید"}
/>
</div>
</div>
</div>
</section>
);
};
export default ProductDesign;
// 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
ProductDesign.defaultProps = {
// icons on product image
colors: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
// product price
mainPriceTitle: false,
discountPrice: true,
priceHolder: true,
productContent: true,
star: true,
productTags: true,
productCat: true,
rangeHolder: true,
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
verticalImg: true,
horizontalImg: false,
addToCartHolder: true,
productTitleColor: "text-productTitle",
productExcerptTextColor: "text-productContent",
productCatTextColor: "text-darkCrimsonTextColor",
// برای درصد دادن به عرض رنج
rangeWidth: "72%",
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
productHolderBorder: "border",
productHolderBorderColor: "border-grayBorderColor",
productTitleAlignment: "text-justify",
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
priceDirection: "flex-row",
};

@ -12,8 +12,6 @@
src: url(./assets/fonts/IRANSansWeb_Bold.woff);
}
@import "./components/productDesign/ProductDesign.scss";
body {
font-family: iransans-medium;
direction: rtl;

Loading…
Cancel
Save