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

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

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

Loading…
Cancel
Save