pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Product Component Made

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 5ff6ac0a9b
commit 78dd3fe364
3 changed files with 86 additions and 235 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. 215
      src/components/Product/index.js
  2. 102
      src/view/services/index.js
  3. 4
      tailwind.config.js

215
src/components/Product/index.js
Unescape View File

@ -1,16 +1,6 @@
import React, { useState } from "react";
// import Tag from "../Tag";
// import ReactTooltip from "react-tooltip";
import book from "./goldon.png";
import watermelon from "./watermelon.png";
import heart from "./vuesax-linear-heart.svg";
import discountImg from "./discount.png";
import YellowDotIcon from "./yellowDotIcon.svg";
import RedDotIcon from "./redDotIcon.svg";
import PurpleDotIcon from "./purpleDotIcon.svg";
import LightBlueDotIcon from "./lightBlueDotIcon.svg";
const ProductDesign = ({
@ -43,197 +33,56 @@ const ProductDesign = ({
numberOfRegards,
productHolderHoverBorder,
hoverMode,
big,
starRate
teacher
}) => {
const [isHovering, setIsHovering] = useState(false);
return (
<div className={`flex flex-wrap sm:flex-nowrap justify-around ${big ? 'm' : 'w-48 m-2'} `}
style={big ? {width: '300px'} : {}}
<div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP`}
style={ {width: '400px', direction:'rtl'}}
>
<div className="w-full flex flex-wrap items-center justify-around my-5 px-4" >
<div
className={`w-full sm:w-60 md:w-72 ${big ? '' : 'mx-5'} rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-grayF4' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder} hover:` }
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
{/* product image */}
<div className="w-full relative">
{/* icons on image */}
<div className="absolute left-0 top-10">
{discountPricePercent && (
<div className="bg-discountPriceBg bg-white w-full p-2 px-3">
<p className="text-discountPriceTitle font-bold text-md text-blueC0">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="bg-likeBtnBg rounded-md flex justify-center my-2">
<img src={heart} alt="" className="w-5" />
</div>
)}
{discount && (
<div className="rounded-md">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
</div>
{/* img */}
<div className={`w-full ${big ? 'h-60' : 'h-48'} flex bg-grayF4 p-0 justify-center rounded-lg`}>
{verticalImg && (
<img
src={productImg}
alt=""
className="h-full rounded-lg cursor-pointer py-5"
/>
)}
{horizontalImg && (
<img src={watermelon} alt="" className="w-full rounded-lg" />
)}
</div>
{/* select Color */}
{/* {colors && (
<div className="flex items-center absolute right-2 bottom-2">
<img
src={YellowDotIcon}
alt=""
data-tip="زرد"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={RedDotIcon}
alt=""
data-tip="قرمز"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={PurpleDotIcon}
alt=""
data-tip="بنفش"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={LightBlueDotIcon}
alt=""
data-tip="آبی"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
</div>
)} */}
<div className="border-b border-red82OP pb-2 px-4">
<h1 className="text-red52 text-lg font-bold">{productName}</h1>
<p className="text-red26 text-sm my-2">
در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد
</p>
</div>
</div>
{/* product content */}
<div className="px-2">
<div className="mt-4">
<h2
className={`leading-4 text-xl font-black py-2 ${productTitleColor} ${productTitleAlignment}`}
>
{productName}
</h2>
{productContent && (
<p
className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
{productCat && (
<span className={`text-md py-1 font-light ${productCatTextColor}`}>
{productCat}
</span>
)}
<div className="flex border-b border-red82OP px-4 py-2">
<div>
<h1 className="font-bold text-red26">
استاد : {teacher}
</h1>
</div>
{/* star */}
{/* price */}
{priceHolder && (
<div
className={`flex items-center justify-between ${priceDirection}`}
>
<div className="mt-2">
<div
className={`${priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
{writeGHEIMAT && <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-xl text-productPrice font-semibold inline text-blue5F">
{productPrice} <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>
)}
{hoverMode == 'blue' ?<div className="w-full flex justify-center mt-4">
<div
className={`bg-blueC0 text-white rounded p-4 text-xs justify-center ${isHovering ? "" : "hidden"
}`}
</div>
<div className="flex border-b border-red82OP px-4 py-2 text-red26">
<h1>نوع گروه : A</h1>
</div>
<div className="flex p-4 justify-between items-center">
<h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
<div
className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center
`}
>
<button>افزودن به سبد خرید</button>
</div>
</div> : null}
{/* {productTags && (
<div className="mt-2 flex flex-wrap">
{
productTags.map((item, index) => <Tag 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>
</div>
);
};
export default ProductDesign;
// text colors i used for product title:
// text-darkCrimsonTextColor
// text-productTitle
// text color i used for product excerpt:
// text-productContent
// text color i used for product cat:
// text-darkCrimsonTextColor
ProductDesign.defaultProps = {
// icons on product image
@ -271,6 +120,6 @@ ProductDesign.defaultProps = {
productTitleAlignment: "text-justify",
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
priceDirection: "flex-row",
productImg: book,
// productImg: book,
writeGHEIMAT: false
};

102
src/view/services/index.js
Unescape View File

@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react";
import React, { useEffect, useState } from "react";
import Class from "../../components/products/classes";
import { book, publicApi } from "../../redux/actions";
import { connect } from 'react-redux';
@ -14,52 +14,53 @@ const Services = ({ isMobile,
setHeaderOptions,
headerOptions,
videos,
}) => {
}) => {
const [filter, setFilter] = useState({
search: "",
grade: "",
productsType: "کتاب",
});
const onChange = (name, value) => {
setFilter({ ...filter, [name]: value });
};
useEffect(() => {
getList();
setHeaderOptions(headerOptions);
}, []);
useEffect(() => {
gradeFilter(filter.grade);
}, [filter]);
const [filter, setFilter] = useState({
search: "",
grade: "",
productsType: "کتاب",
});
return(
<div className="flex" style={{width: '93.5%', marginRight: '6.5%', marginTop: '8.5%'}}>
<button onClick={() => console.log(book)}>asdasd</button>
{ books?.map((product, index) => (
<Link to={"/products/" + product?.id}>
<Product
key={index}
productsType={filter.productsType}
product={product}
index={Number(index)}
productName={`کتاب ${product?.name}`}
productCat={`پایه ${grades[product?.gradeId]}`}
productPrice={100000}
productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards={160}
productHolderBorder=''
productHolderHoverBorder='shadow-md'
/>
</Link>
))}
const onChange = (name, value) => {
setFilter({ ...filter, [name]: value });
};
useEffect(() => {
getList();
setHeaderOptions(headerOptions);
}, []);
useEffect(() => {
gradeFilter(filter.grade);
}, [filter]);
return (
<div className="" style={{ width: '93.5%', marginRight: '6.5%', marginTop: '8.5%' }}>
<div>
{books?.map((product, index) => (
<Link to={"/class/" + product?.id}>
<Product
key={index}
productsType={filter.productsType}
product={product}
index={Number(index)}
productName={`${product?.name}`}
productCat={`پایه ${grades[product?.gradeId]}`}
productPrice={100000}
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards={160}
productHolderBorder=''
productHolderHoverBorder='shadow-md'
teacher={product.vodTeacher}
/>
</Link>
))}
</div>
</div>
);
};
@ -71,13 +72,12 @@ const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
gradeFilterBooks: state.book.gradeFilterBooks,
selectedGrade: state.book.selectedGrade,
});
const mapDispatchToProps = {
});
const mapDispatchToProps = {
getList: book.list,
gradeFilter: book.gradeFilter,
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Services);
};
export default connect(mapStateToProps, mapDispatchToProps)(Services);

4
tailwind.config.js
Unescape View File

@ -26,7 +26,9 @@ module.exports = {
red26: '#521326',
red52: '#df1452',
red46OP: 'rgba(255, 246, 246, 0.8)',
grayEC: '#ececec'
grayEC: '#ececec',
red82OP: 'rgba(223, 20, 82, 0.08)',
pinkF5: '#fff1f5'
},
},
screens: {

Write Preview
Loading…
Cancel
Save