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

update src/components/Blog/design2/index.js, src/components/SingleProduct/ProductDesign1/index.js and src/components/Tag/index.js

Browse Source
master
mahdi andalib 3 years ago
parent 8d0b11487c
commit b1f39c05ab
3 changed files with 174 additions and 196 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. 4
      src/components/Blog/design2/index.js
  2. 362
      src/components/SingleProduct/ProductDesign1/index.js
  3. 4
      src/components/Tag/index.js

4
src/components/Blog/design2/index.js
Unescape View File

@ -1,7 +1,7 @@
import React from "react";
import Button from "../../ButtonDesign/Button";
import CommentIcon from "../../MiniComponents/CommentIcon";
import NewTagDesign from "../../NewTagDesign";
import TagDesign1 from "../../Tag/TagDesign1";
const BlogDesign2 = ({
blogTitle,
@ -34,7 +34,7 @@ const BlogDesign2 = ({
/>
)}
{tagButton && (
<NewTagDesign
<TagDesign1
title={"تگ"}
icon={false}
tagClassName={

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

@ -1,14 +1,17 @@
import React, { useState } from "react";
import ReactTooltip from "react-tooltip";
import TagDesign1 from "../Tag/TagDesign1";
import TagDesign1 from "../../Tag/TagDesign1";
import ButtonDivTag from "../../ButtonDesign/ButtonDivTag";
import Button from "../../ButtonDesign/Button";
import StarRating from "../../Rating/StarRating1";
const Design1 = ({
colors,
productHolderClassname,
discountPricePercent,
likeBtn,
discount,
discountPricePercent,
colors,
discountPrice,
productContent,
star,
@ -16,8 +19,6 @@ const Design1 = ({
priceDirection,
productTitleAlignment,
priceHolder,
productHolderBorder,
productHolderBorderColor,
productTitleColor,
productExcerptTextColor,
productCat,
@ -28,185 +29,169 @@ const Design1 = ({
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"
}`}
<div className={`w-fit ${productHolderClassname}`}>
{/* product image */}
<div className="w-full relative">
{/* icons on image */}
<div className="flex flex-col gap-y-2 absolute left-2 top-2">
{discountPricePercent && (
<ButtonDivTag
icon={false}
text={discountPricePercent + "%"}
className="p-2 bg-[#4ACA5322] text-xs text-[#4ACA53] font-sansbold rounded-md"
/>
)}
{likeBtn && (
<Button
className={"p-2 bg-[#FFF3F3] rounded"}
text={false}
icon={"images/SingleProductvuesax-linear-heart.svg"}
iconHolderClassName={""}
iconClassName={"w-5"}
/>
)}
{discount && (
<Button
className={"rounded"}
text={false}
icon={"images/SingleProductdiscount.png"}
iconHolderClassName={""}
iconClassName={"w-10"}
/>
)}
</div>
{/* image */}
<div className="flex-shrink-0">
{verticalImg && (
<img
src={verticalImg}
alt="product"
className="w-full rounded-lg cursor-pointer"
/>
)}
{horizontalImg && (
<img
src={horizontalImg}
alt="product"
className="w-full rounded-lg cursor-pointer"
/>
)}
</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>
{/* 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}`}
>
<button>افزودن به سبد خرید</button>
</div>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</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>
{/* 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 && (
)}
{/* price */}
{priceHolder && (
<div
className={`flex items-center justify-between ${priceDirection}`}
>
<div className="mt-2">
<div
className={`flex items-center justify-between ${priceDirection}`}
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<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>
<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>
{/* 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>
<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>
</div>
)}
{productTags && (
<div className="mt-2 flex flex-wrap gap-2">
{productTags.map((item, index) => (
<TagDesign1 icon={false} 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>
);
@ -214,22 +199,21 @@ const Design1 = ({
export default Design1;
// text colors i used for product title:
// text-darkCrimsonTextColor
// text-productTitle
Design1.defaultProps = {
productHolderClassname: "rounded-lg shadow-sm p-2 border border-[#C3C3C3]",
// text color i used for product excerpt:
// text-productContent
// three buttons on top left side of the holder
discountPricePercent: "23",
likeBtn: true,
discount: true,
// text color i used for product cat:
// text-darkCrimsonTextColor
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
verticalImg: "images/SingleProductgoldon.png",
horizontalImg: false,
// "images/SingleProductwatermelon.png"
Design1.defaultProps = {
// icons on product image
colors: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
// product price
discountPrice: true,
priceHolder: true,
@ -240,10 +224,6 @@ Design1.defaultProps = {
productCat: true,
rangeHolder: true,
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
verticalImg: true,
horizontalImg: false,
addToCartHolder: true,
productTitleColor: "text-productTitle",
@ -254,8 +234,6 @@ Design1.defaultProps = {
// برای درصد دادن به عرض رنج
rangeWidth: "w-44",
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
productHolderBorder: "border",
productHolderBorderColor: "border-grayBorderColor",
productTitleAlignment: "text-justify",
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم

4
src/components/Tag/index.js
Unescape View File

@ -1,10 +1,10 @@
import React, { useState } from "react";
import Design1 from "./TagDesign1";
import TagDesign1 from "./TagDesign1";
function Tag() {
const list = {
1: <Design1 />,
1: <TagDesign1 />,
};
const [type, setType] = useState(1);
return (

Write Preview
Loading…
Cancel
Save