mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 2 files and delete 4 files

Browse Source
master
mahdi 3 years ago
parent 0a054dd1c3
commit df6a12fea4
6 changed files with 12 additions and 338 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

14
src/components/SingleProduct/ProductDesign1/index.js
Unescape View File

@ -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
src/components/productDesign/ProductDesign.css
Unescape View File

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

9
src/components/productDesign/ProductDesign.css.map
Unescape View File

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

324
src/components/productDesign/ProductDesign.js
Unescape View File

@ -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",
};

0
src/components/productDesign/ProductDesign.scss
Unescape View File

2
src/index.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save