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

update

Browse Source
master
mahdi 3 years ago
parent ced446378a
commit 4a5e471df0
6 changed files with 99 additions and 63 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. 6
      src/App.js
  2. 2
      src/components/bookDesign/BookDesign.js
  3. 14
      src/components/counterDesign/CounterDesign.js
  4. 25
      src/components/productDesign/ProductDesign.js
  5. 2
      src/components/starRating/StarRating.js
  6. 113
      src/components/vodProductDesign/VodProductDesign.js

6
src/App.js
Unescape View File

@ -16,12 +16,12 @@ import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<ProductDesign /> {/* <ProductDesign /> */}
<VodProductDesign /> {/* <VodProductDesign /> */}
{/* <BookDesign /> */} {/* <BookDesign /> */}
{/* <ButtonDesign /> */} {/* <ButtonDesign /> */}
{/* <ProductTags /> */} {/* <ProductTags /> */}
{/* <CounterDesign /> */} <CounterDesign />
{/* <BlogDesign1 /> */} {/* <BlogDesign1 /> */}
{/* <BlogDesign2 /> */} {/* <BlogDesign2 /> */}
{/* <BlogDesign3 /> */} {/* <BlogDesign3 /> */}

2
src/components/bookDesign/BookDesign.js
Unescape View File

@ -28,7 +28,7 @@ export const BookDesign = ({ bookBackCoverBg }) => {
<img <img
src={book} src={book}
alt="" alt=""
className="rounded-md z-40 transform -translate-x-3 w-full sm:w-72 h-full" className="rounded-md z-40 transform -translate-x-4 w-full sm:w-72 h-full"
/> />
<img src={bookCover} alt="" className="z-30 h-full" /> <img src={bookCover} alt="" className="z-30 h-full" />
<div <div

14
src/components/counterDesign/CounterDesign.js
Unescape View File

@ -34,19 +34,20 @@ const CounterDesign = ({
است. است.
</p> </p>
</div> </div>
{/* counter design */}
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center">
{likeBtn && ( {likeBtn && (
<div className="flex items-center"> <div className="flex items-center">
<img <img
src={blackLikeIcon} src={blackLikeIcon}
alt="" alt=""
className="w-8 mb-4" className="w-8 mb-4 cursor-pointer pointer transition delay-150 duration-300 ease-in-out hover:-translate-y-2"
onClick={() => setCount(count + 1)} onClick={() => setCount(count + 1)}
/> />
<img <img
src={blackDisLikeIcon} src={blackDisLikeIcon}
alt="" alt=""
className="w-8 mb-4" className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:translate-y-2"
onClick={() => setCount(count - 1)} onClick={() => setCount(count - 1)}
/> />
</div> </div>
@ -55,20 +56,21 @@ const CounterDesign = ({
<img <img
src={incrementCounterIcon} src={incrementCounterIcon}
alt="" alt=""
className="w-8 mb-4" className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:-translate-y-2"
onClick={() => setCount(count + 1)} onClick={() => setCount(count + 1)}
/> />
)} )}
<p <p
className={` text-sm sm:text-base md:text-2xl font-bold ${counterColor} `} className={`text-sm sm:text-base md:text-2xl font-bold text-counterColor`}
style={count > 0 ? { color: "green" } : { color: "red" }}
> >
{count}{" "} {count}
</p> </p>
{counterDecreaseBtn && ( {counterDecreaseBtn && (
<img <img
src={decrementCounterIcon} src={decrementCounterIcon}
alt="" alt=""
className="w-8 mt-4" className="w-8 mt-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:translate-y-2"
onClick={() => setCount(count - 1)} onClick={() => setCount(count - 1)}
/> />
)} )}

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

@ -32,6 +32,7 @@ const ProductDesign = ({
rangeHolder, rangeHolder,
verticalImg, verticalImg,
horizontalImg, horizontalImg,
rangeWidth,
}) => { }) => {
return ( return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -109,10 +110,10 @@ const ProductDesign = ({
{/* select Color */} {/* select Color */}
{colors && ( {colors && (
<div className="flex items-center absolute right-2 bottom-2"> <div className="flex items-center absolute right-2 bottom-2">
<img src={YellowDotIcon} alt="" className="w-3 h-3" /> <img src={YellowDotIcon} alt="" className="w-3 h-3 ml-1" />
<img src={RedDotIcon} alt="" className="w-3 h-3" /> <img src={RedDotIcon} alt="" className="w-3 h-3 ml-1" />
<img src={PurpleDotIcon} alt="" className="w-3 h-3" /> <img src={PurpleDotIcon} alt="" className="w-3 h-3 ml-1" />
<img src={LightBlueDotIcon} alt="" className="w-3 h-3" /> <img src={LightBlueDotIcon} alt="" className="w-3 h-3 ml-1" />
</div> </div>
)} )}
</div> </div>
@ -169,7 +170,7 @@ const ProductDesign = ({
</div> </div>
{/* add to cart */} {/* add to cart */}
<button <button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${ 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" : "" priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`} }`}
> >
@ -192,7 +193,9 @@ const ProductDesign = ({
)} )}
{rangeHolder && ( {rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div className="bg-rangeFillBgColor h-3 w-44 rounded"></div> <div
className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
></div>
</div> </div>
)} )}
</div> </div>
@ -221,13 +224,21 @@ ProductDesign.defaultProps = {
priceHolder: true, priceHolder: true,
productCat: true, productCat: true,
rangeHolder: true, rangeHolder: true,
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
verticalImg: true, verticalImg: true,
horizontalImg: false, horizontalImg: false,
productTitleColor: "text-darkCrimsonTextColor", productTitleColor: "text-darkCrimsonTextColor",
// برای درصد دادن به عرض رنج
rangeWidth: "w-44",
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
productHolderBorder: "border", productHolderBorder: "border",
productHolderBorderColor: "border-grayBorderColor", productHolderBorderColor: "border-grayBorderColor",
productTitleAlignment: "text-justify",
productTitleAlignment: "text-justify",
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
priceDirection: "flex-row", priceDirection: "flex-row",
}; };

2
src/components/starRating/StarRating.js
Unescape View File

@ -17,7 +17,7 @@ const StarRating = () => {
onMouseEnter={() => setHover(index)} onMouseEnter={() => setHover(index)}
onMouseLeave={() => setHover(rating)} onMouseLeave={() => setHover(rating)}
> >
<span className="star">&#9733;</span> <span className="star text-lg">&#9733;</span>
</button> </button>
); );
})} })}

113
src/components/vodProductDesign/VodProductDesign.js
Unescape View File

@ -32,6 +32,9 @@ const VodProductDesign = ({
productTitleColor, productTitleColor,
productCat, productCat,
rangeHolder, rangeHolder,
priceTitle,
productPriceAmountTitle,
addToCartHolder,
verticalImg, verticalImg,
horizontalImg, horizontalImg,
}) => { }) => {
@ -55,6 +58,7 @@ const VodProductDesign = ({
<div <div
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`} className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
> >
{/* img */}
<div <div
className="w-full relative flex items-center justify-center cursor-pointer" className="w-full relative flex items-center justify-center cursor-pointer"
style={{ style={{
@ -79,7 +83,8 @@ const VodProductDesign = ({
)} )}
</div> </div>
<div className="px-2"> <div className="px-2">
<div className="mt-4"> {/* content */}
<div className="mt-4 flex justify-between items-center">
<h2 <h2
className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`} className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
> >
@ -97,48 +102,59 @@ const VodProductDesign = ({
</span> </span>
)} )}
</div> </div>
{star && ( {/* price */}
<div className="flex items-center mt-2"> <div className="flex items-center justify-between mt-2">
<StarRating /> {priceHolder && (
<span className="text-xs text-productContent font-bold mr-2"> <div
39 className={`flex items-center justify-between ${priceDirection}`}
</span> >
</div> {/* price */}
)} <div className="mt-2">
{priceHolder && ( <div
<div className={`${
className={`flex items-center justify-between ${priceDirection}`} priceDirection.indexOf("col") !== -1
> ? "inline"
{/* price */} : "flex"
<div className="mt-2"> }`}
<div >
className={`${ {priceTitle && (
priceDirection.indexOf("col") !== -1 ? "inline" : "flex" <span className="text-xs text-borderColor ml-2">
}`} قیمت
> </span>
<span className="text-xs text-borderColor ml-2"> )}
قیمت {discountPrice && (
</span> <p className="line-through text-xs text-borderColor mr-2">
{discountPrice && ( 145<span>تومان</span>
<p className="line-through text-xs text-borderColor mr-2"> </p>
145<span>تومان</span> )}
</p> </div>
)} <p
className={`text-sm font-semibold inline ${productPriceAmountTitle}`}
>
145.000<span>تومان</span>
</p>
</div> </div>
<p className="text-sm text-productPrice font-semibold inline"> {/* add to cart */}
145.000<span>تومان</span> {addToCartHolder && (
</p> <button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
)}
</div> </div>
{/* add to cart */} )}
<button {star && (
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${ <div className="flex items-center mt-2">
priceDirection.indexOf("col") !== -1 ? "w-full" : "" <StarRating />
}`} <span className="text-xs text-productContent font-bold mr-2">
> 39
اضافه کردن به سبد خرید </span>
</button> </div>
</div> )}
)} </div>
{productTags && ( {productTags && (
<div className="mt-2 flex flex-wrap"> <div className="mt-2 flex flex-wrap">
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
@ -153,7 +169,7 @@ const VodProductDesign = ({
</div> </div>
)} )}
{rangeHolder && ( {rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> <div className="bg-rangeBgColor h-3 w-full rounded mt-4">
<div className="bg-rangeFillBgColor h-3 w-44 rounded"></div> <div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
</div> </div>
)} )}
@ -167,6 +183,9 @@ const VodProductDesign = ({
export default VodProductDesign; export default VodProductDesign;
// text colors i used:
// text-productPrice
VodProductDesign.defaultProps = { VodProductDesign.defaultProps = {
colors: false, colors: false,
likeBtn: false, likeBtn: false,
@ -174,15 +193,19 @@ VodProductDesign.defaultProps = {
discountPricePercent: false, discountPricePercent: false,
discountPrice: false, discountPrice: false,
productContent: false, productContent: false,
star: false, star: true,
productTags: false, productTags: false,
priceHolder: false, priceHolder: true,
priceTitle: false,
productCat: true, productCat: true,
rangeHolder: true, rangeHolder: true,
verticalImg: false, verticalImg: false,
horizontalImg: true, horizontalImg: true,
addToCartHolder: false,
productTitleColor: "text-darkCrimsonTextColor", productTitleColor: "text-darkCrimsonTextColor",
productHolderBorder: "border-0", productPriceAmountTitle: "text-productPrice",
productHolderBorder: "border",
productHolderBorderColor: "border-grayBorderColor", productHolderBorderColor: "border-grayBorderColor",
productTitleAlignment: "text-justify", productTitleAlignment: "text-justify",

Write Preview
Loading…
Cancel
Save