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

update

Browse Source
master
mahdi 3 years ago
parent e219fc859a
commit aef7590ded
6 changed files with 55 additions and 526 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. 15
      package-lock.json
  2. 1
      package.json
  3. 6
      src/App.js
  4. 525
      src/components/productDesign/ProductDesign.js
  5. 28
      src/components/starRating/StarRating.js
  6. 6
      src/components/starRating/StarRating.scss

15
package-lock.json generated
Unescape View File

@ -13,6 +13,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "5.0.0",
"sass": "^1.45.0",
"web-vitals": "^2.1.2"
@ -13137,6 +13138,14 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
},
"node_modules/react-icons": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -25319,6 +25328,12 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
},
"react-icons": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
"requires": {}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
package.json
Unescape View File

@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "5.0.0",
"sass": "^1.45.0",
"web-vitals": "^2.1.2"

6
src/App.js
Unescape View File

@ -1,12 +1,6 @@
import "./App.scss";
import ProductDesign from "./components/productDesign/ProductDesign";
// import { library } from "@fortawesome/fontawesome-svg-core";
// import { fab } from "@fortawesome/free-brands-svg-icons";
// import { faCheckSquare, faCoffee } from "@fortawesome/free-solid-svg-icons";
// library.add(fab, faCheckSquare, faCoffee);
function App() {
return (
<div className="App">

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

@ -1,9 +1,10 @@
import React from "react";
import "./ProductDesign.scss";
import StarRating from "../starRating/StarRating";
import book from "../../assets/images/goldon.png";
import heart from "../../assets/icons/vuesax-linear-heart.svg";
import discountImg from "../../assets/icons/discount.png";
// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const ProductDesign = ({
colors,
@ -89,524 +90,8 @@ const ProductDesign = ({
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<ul className="flex">
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
<span className="text-xs text-productContent font-bold">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items2 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<ul className="flex">
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
<span className="text-xs text-productContent font-bold">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items3 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<ul className="flex">
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
<span className="text-xs text-productContent font-bold">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items4 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<ul className="flex">
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
<span className="text-xs text-productContent font-bold">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items5 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<ul className="flex">
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-productStar">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
<span className="text-xs text-productContent font-bold">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
@ -664,7 +149,7 @@ ProductDesign.defaultProps = {
likeBtn: true,
discount: true,
discountPricePercent: true,
discountPrice: true,
discountPrice: false,
productContent: true,
star: true,
productTags: true,

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

@ -0,0 +1,28 @@
import React, { useState } from "react";
import "./StarRating.scss";
const StarRating = () => {
const [rating, setRating] = useState(0);
const [hover, setHover] = useState(0);
return (
<div className="star-rating">
{[...Array(5)].map((star, index) => {
index += 1;
return (
<button
type="button"
key={index}
className={index <= (hover || rating) ? "on" : "off"}
onClick={() => setRating(index)}
onMouseEnter={() => setHover(index)}
onMouseLeave={() => setHover(rating)}
>
<span className="star">&#9733;</span>
</button>
);
})}
</div>
);
};
export default StarRating;

6
src/components/starRating/StarRating.scss
Unescape View File

@ -0,0 +1,6 @@
.on {
color: #ffbd35;
}
.off {
color: #ccc;
}
Write Preview
Loading…
Cancel
Save