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

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

@ -1,14 +1,17 @@
import React, { useState } from "react"; import React, { useState } from "react";
import ReactTooltip from "react-tooltip"; 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"; import StarRating from "../../Rating/StarRating1";
const Design1 = ({ const Design1 = ({
colors, productHolderClassname,
discountPricePercent,
likeBtn, likeBtn,
discount, discount,
discountPricePercent,
colors,
discountPrice, discountPrice,
productContent, productContent,
star, star,
@ -16,8 +19,6 @@ const Design1 = ({
priceDirection, priceDirection,
productTitleAlignment, productTitleAlignment,
priceHolder, priceHolder,
productHolderBorder,
productHolderBorderColor,
productTitleColor, productTitleColor,
productExcerptTextColor, productExcerptTextColor,
productCat, productCat,
@ -28,185 +29,169 @@ const Design1 = ({
rangeWidth, rangeWidth,
addToCartHolder, addToCartHolder,
}) => { }) => {
const [isHovering, setIsHovering] = useState(false);
return ( return (
<div className="flex flex-wrap sm:flex-nowrap justify-around"> <div className={`w-fit ${productHolderClassname}`}>
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4"> {/* product image */}
<div <div className="w-full relative">
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`} {/* icons on image */}
> <div className="flex flex-col gap-y-2 absolute left-2 top-2">
{/* product image */} {discountPricePercent && (
<div className="w-full relative"> <ButtonDivTag
{/* icons on image */} icon={false}
<div className="absolute left-2 top-2"> text={discountPricePercent + "%"}
{discountPricePercent && ( className="p-2 bg-[#4ACA5322] text-xs text-[#4ACA53] font-sansbold rounded-md"
<div className="bg-discountPriceBg rounded-md px-2"> />
<p className="text-discountPriceTitle font-bold text-xs"> )}
23<span>%</span> {likeBtn && (
</p> <Button
</div> className={"p-2 bg-[#FFF3F3] rounded"}
)} text={false}
{likeBtn && ( icon={"images/SingleProductvuesax-linear-heart.svg"}
<div className="bg-likeBtnBg rounded-md flex justify-center my-2"> iconHolderClassName={""}
<img iconClassName={"w-5"}
src="images/SingleProductvuesax-linear-heart.svg" />
alt="" )}
className="w-5" {discount && (
/> <Button
</div> className={"rounded"}
)} text={false}
{discount && ( icon={"images/SingleProductdiscount.png"}
<div className="rounded-md"> iconHolderClassName={""}
<img iconClassName={"w-10"}
src="images/SingleProductdiscount.png" />
alt="" )}
className="w-full" </div>
/> {/* image */}
</div> <div className="flex-shrink-0">
)} {verticalImg && (
</div> <img
{/* img */} src={verticalImg}
<div className="flex-shrink-0"> alt="product"
{verticalImg && ( className="w-full rounded-lg cursor-pointer"
<img />
src="images/SingleProductgoldon.png" )}
alt="" {horizontalImg && (
className="w-full rounded-lg cursor-pointer" <img
onMouseEnter={() => setIsHovering(true)} src={horizontalImg}
onMouseLeave={() => setIsHovering(false)} alt="product"
/> className="w-full rounded-lg cursor-pointer"
)} />
{horizontalImg && ( )}
<img </div>
src="images/SingleProductwatermelon.png" {/* select Color */}
alt="" {colors && (
className="w-full rounded-lg" <div className="flex items-center absolute right-2 bottom-2">
/> <img
)} src="images/SingleProductyellowDotIcon.svg"
</div> alt=""
{/* select Color */} data-tip="زرد"
{colors && ( className="w-3 h-3 ml-1 cursor-pointer"
<div className="flex items-center absolute right-2 bottom-2"> />
<img <ReactTooltip place="top" type="dark" effect="float" />
src="images/SingleProductyellowDotIcon.svg" <img
alt="" src="images/SingleProductredDotIcon.svg"
data-tip="زرد" alt=""
className="w-3 h-3 ml-1 cursor-pointer" data-tip="قرمز"
/> className="w-3 h-3 ml-1 cursor-pointer"
<ReactTooltip place="top" type="dark" effect="float" /> />
<img <ReactTooltip place="top" type="dark" effect="float" />
src="images/SingleProductredDotIcon.svg" <img
alt="" src="images/SingleProductpurpleDotIcon.svg"
data-tip="قرمز" alt=""
className="w-3 h-3 ml-1 cursor-pointer" data-tip="بنفش"
/> className="w-3 h-3 ml-1 cursor-pointer"
<ReactTooltip place="top" type="dark" effect="float" /> />
<img <ReactTooltip place="top" type="dark" effect="float" />
src="images/SingleProductpurpleDotIcon.svg" <img
alt="" src="images/SingleProductlightBlueDotIcon.svg"
data-tip="بنفش" alt=""
className="w-3 h-3 ml-1 cursor-pointer" data-tip="آبی"
/> className="w-3 h-3 ml-1 cursor-pointer"
<ReactTooltip place="top" type="dark" effect="float" /> />
<img <ReactTooltip place="top" type="dark" effect="float" />
src="images/SingleProductlightBlueDotIcon.svg" </div>
alt="" )}
data-tip="آبی" </div>
className="w-3 h-3 ml-1 cursor-pointer" {/* product content */}
/> <div className="px-2">
<ReactTooltip place="top" type="dark" effect="float" /> <div className="mt-4">
</div> <h2
)} className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
<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" </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> </div>
{/* product content */} )}
<div className="px-2"> {/* price */}
<div className="mt-4"> {priceHolder && (
<h2 <div
className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`} className={`flex items-center justify-between ${priceDirection}`}
> >
نسخه چاپی علموم تجربه هفتم <div className="mt-2">
</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 <div
className={`flex items-center justify-between ${priceDirection}`} className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
> >
<div className="mt-2"> <span className="text-xs text-borderColor ml-2">قیمت</span>
<div {/* price with line on it */}
className={`${ {discountPrice && (
priceDirection.indexOf("col") !== -1 ? "inline" : "flex" <p className="line-through text-xs text-borderColor mr-2">
}`} 145<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>
<p className="text-sm text-productPrice font-semibold inline">
145.000<span>تومان</span>
</p> </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>
)} <p className="text-sm text-productPrice font-semibold inline">
{productTags && ( 145.000<span>تومان</span>
<div className="mt-2 flex flex-wrap"> </p>
{productTags.map((item, index) => ( </div>
<TagDesign1 title={item} key={index} /> {/* add to cart */}
))} {addToCartHolder && (
</div> <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 ${
{rangeHolder && ( priceDirection.indexOf("col") !== -1 ? "w-full" : ""
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> }`}
<div >
className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`} اضافه کردن به سبد خرید
></div> </button>
</div>
)} )}
</div> </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>
</div> </div>
); );
@ -214,22 +199,21 @@ const Design1 = ({
export default Design1; export default Design1;
// text colors i used for product title: Design1.defaultProps = {
// text-darkCrimsonTextColor productHolderClassname: "rounded-lg shadow-sm p-2 border border-[#C3C3C3]",
// text-productTitle
// text color i used for product excerpt: // three buttons on top left side of the holder
// text-productContent 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 // icons on product image
colors: true, colors: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
// product price // product price
discountPrice: true, discountPrice: true,
priceHolder: true, priceHolder: true,
@ -240,10 +224,6 @@ Design1.defaultProps = {
productCat: true, productCat: true,
rangeHolder: true, rangeHolder: true,
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
verticalImg: true,
horizontalImg: false,
addToCartHolder: true, addToCartHolder: true,
productTitleColor: "text-productTitle", productTitleColor: "text-productTitle",
@ -254,8 +234,6 @@ Design1.defaultProps = {
// برای درصد دادن به عرض رنج // برای درصد دادن به عرض رنج
rangeWidth: "w-44", rangeWidth: "w-44",
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
productHolderBorder: "border",
productHolderBorderColor: "border-grayBorderColor",
productTitleAlignment: "text-justify", productTitleAlignment: "text-justify",
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم

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

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

Write Preview
Loading…
Cancel
Save