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

master
mahdi andalib 2 years ago
parent 8d0b11487c
commit b1f39c05ab
  1. 4
      src/components/Blog/design2/index.js
  2. 362
      src/components/SingleProduct/ProductDesign1/index.js
  3. 4
      src/components/Tag/index.js

@ -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={

@ -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",
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم

@ -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 (

Loading…
Cancel
Save