reza fixed conflict

temp
Reza_ashrafi 3 years ago
commit 984374e466
  1. 15
      src/assets/icons/vuesax-linear-group.svg
  2. 9
      src/assets/icons/vuesax-linear-shield-tick.svg
  3. 9
      src/assets/icons/vuesax-linear-tick-circle.svg
  4. 51
      src/components/AddToCart/index.js
  5. 6
      src/components/Button/index.js
  6. 5
      src/components/Checkbox/index.js
  7. 13
      src/components/VerticalExpandableProductFilter/index.js
  8. 208
      src/views/Product/Desktop/ProductOverAll/index.js
  9. 5
      src/views/Product/Desktop/index.js
  10. 6
      src/views/Product/index.js
  11. 6
      src/views/Products/index.js
  12. 12
      src/views/Products/layouts/Sidebar.js
  13. 12
      tailwind.config.js

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="35.544" height="35.544" viewBox="0 0 35.544 35.544">
<g id="vuesax_linear_group" data-name="vuesax/linear/group" transform="translate(0 0)">
<g id="group" transform="translate(0 0)">
<path id="Vector" d="M14.055,17.772h1.481A2.971,2.971,0,0,0,18.5,14.81V0H5.169A5.918,5.918,0,0,0,0,3.036" transform="translate(3.717 2.962)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,17.772a4.437,4.437,0,0,0,4.443,4.443H5.924a2.962,2.962,0,1,1,5.924,0h5.924a2.962,2.962,0,1,1,5.924,0h1.481a4.437,4.437,0,0,0,4.443-4.443V13.329H25.177A1.485,1.485,0,0,1,23.7,11.848V7.4a1.485,1.485,0,0,1,1.481-1.481h1.91L24.555,1.5A2.986,2.986,0,0,0,21.978,0H19.253V10.367a2.971,2.971,0,0,1-2.962,2.962H14.81" transform="translate(2.962 7.405)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M5.924,2.962A2.962,2.962,0,1,1,2.962,0,2.962,2.962,0,0,1,5.924,2.962Z" transform="translate(8.886 26.658)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M5.924,2.962A2.962,2.962,0,1,1,2.962,0,2.962,2.962,0,0,1,5.924,2.962Z" transform="translate(20.734 26.658)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M5.924,4.443V7.4H1.481A1.485,1.485,0,0,1,0,5.924V1.481A1.485,1.485,0,0,1,1.481,0h1.91Z" transform="translate(26.658 13.329)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H8.886" transform="translate(2.962 11.848)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H5.924" transform="translate(2.962 16.291)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-8" data-name="Vector" d="M0,0H2.962" transform="translate(2.962 20.734)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-9" data-name="Vector" d="M0,0H35.544V35.544H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="35.994" height="35.994" viewBox="0 0 35.994 35.994">
<g id="vuesax_linear_shield-tick" data-name="vuesax/linear/shield-tick" transform="translate(0 0)">
<g id="shield-tick" transform="translate(0 0)">
<path id="Vector" d="M10.618.349,3.134,3.168A5.2,5.2,0,0,0,0,7.682V18.825a7.291,7.291,0,0,0,2.595,5.159L9.043,28.8a6.826,6.826,0,0,0,7.709,0L23.2,23.985A7.291,7.291,0,0,0,25.8,18.825V7.682a5.207,5.207,0,0,0-3.134-4.529L15.177.349A7.626,7.626,0,0,0,10.618.349Z" transform="translate(5.114 2.996)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,4.034,2.415,6.449,8.863,0" transform="translate(13.573 13.768)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H35.994V35.994H0Z" transform="translate(35.994 35.994) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="38.085" height="38.085" viewBox="0 0 38.085 38.085">
<g id="vuesax_linear_tick-circle" data-name="vuesax/linear/tick-circle" transform="translate(0 0)">
<g id="tick-circle" transform="translate(0 0)">
<path id="Vector" d="M15.869,31.738A15.869,15.869,0,1,0,0,15.869,15.915,15.915,0,0,0,15.869,31.738Z" transform="translate(3.174 3.174)" fill="#42e337" stroke="#9eff97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,4.491,4.491,8.982l9-8.982" transform="translate(12.298 14.552)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H38.085V38.085H0Z" fill="#afe7ab" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 824 B

@ -0,0 +1,51 @@
import React from "react";
import circleTick from '../../assets/icons/vuesax-linear-tick-circle.svg';
import shieldTick from '../../assets/icons/vuesax-linear-shield-tick.svg';
import linearGroup from '../../assets/icons/vuesax-linear-group.svg';
const AddToCartCard = ({
numberOfSuggest,
sendingTime,
button,
price,
profit
}) =>{
const specialities = [
{
icon: circleTick,
description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
},
{
icon: linearGroup,
description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
},
{
icon: shieldTick,
description: `گارانتی اصالت و سلامت فیزیکی`,
}
];
return(
<div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center">
{specialities.map((item, index) => (
<div className="flex items-center p-2 w-full border-0 border-b border-solid border-gray-300">
{item.icon && <img src={item.icon} className="pl-3" />}
<p className="text-sm text-blue52 text-right">{item.description}</p>
</div>
))}
<div className="w-full flex flex-col items-center justify-center p-4">
<h1 className="text-xl text-gray-500">
<span className=" text-blueC0"> {price} </span>
تومان </h1>
{ profit && <h5 className="text-xs p-2 pb-0 text-blue52">با خرید این کالا {profit} تومان سود کنید</h5>}
</div>
<div className="w-full flex justify-center">
{button}
</div>
</div>
);
};
export default AddToCartCard;

@ -10,6 +10,10 @@ export default function Button({
onClick,
selectable,
active,
borderType,
twPaddings,
customStyle,
radius
}) {
return (
<button
@ -21,7 +25,7 @@ export default function Button({
style={{
border: `${
selectable ? (active ? "2px" : border.width) : border.width
} solid ${
} ${borderType ? borderType : 'solid'} ${
selectable ? (active ? "#196EC0" : border.color) : border.color
}`,
width: width,

@ -2,6 +2,7 @@ import React from "react";
import './index.css';
export default function Checkbox(props) {
console.log(props)
return (
<div>
<svg className="checkbox-symbol">
@ -16,8 +17,8 @@ export default function Checkbox(props) {
</svg>
<div className="checkbox-container">
<input className="checkbox-input" name={String("name")} id="apples" type="checkbox" checked={props.checked} />
<label className="checkbox" htmlFor="apples">
<input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} onChange={props.onChange}/>
<label className="checkbox" htmlFor={"ch"+props.name}>
<span>
<svg width="12px" height="10px">
<use xlinkHref="#check"></use>

@ -11,6 +11,8 @@ const langDetector = (lang = "fa", option1, option2) => {
export default function VerticalExpandableProductFilter(props) {
const [text, setText] = useState("");
const [searchResult, setSearchResult] = useState([]);
const [checkedBox, setChecked] = useState([]);
const name = props.name||Math.random()
useEffect(() => {
let fakeSearchResult;
fakeSearchResult = props.list.filter(
@ -54,14 +56,21 @@ export default function VerticalExpandableProductFilter(props) {
<ul className="w-full list-none flex flex-col divide-y divide-gray-100">
{(searchResult.length > 0 ? searchResult : props.list)?.map(
(item1, i) => (
<li
key={i}
className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2"
>
{console.log(i)}
<div className="flex flex-row items-center">
<Checkbox />
<Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
checkedBox[i] = !checkedBox[i]
setChecked(checkedBox)
}} onChange={() => props.onChange(name , item1.name)} />
<strong className="text-xs font-light text-gray-500">
{item1.name}
{props.preName ? props.preName + ' ' + item1.name : item1.name}
</strong>
</div>

@ -0,0 +1,208 @@
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { toast } from "react-toastify";
import { book, userProduct, publicApi } from "../../../../redux/actions";
import proxy from "../../../../redux/proxy";
import location from "../../../../utils/location";
import Button from "../../../../components/Button";
import Header from "../../../../components/Header";
import Comment from "../../Comment";
import Rate from "../../Rate";
import StarRating from "../../../../components/StarRating";
import AddToCartCard from "../../../../components/AddToCart";
export const ProductOverAll = ({
productType,
getInfo,
book,
grades,
isDark,
userId,
pushToCart,
headerOptions,
setHeaderOptions,
}) => {
const [type, setType] = useState("physical");
return (
<div>
<header
className={`w-full flex justify-between`}
>
<img
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
alt=""
style={{ height: '320px' }}
className="-md py-8 px-16 bg-grayF4 mx-4"
/>
<div className="flex flex-col flex-1 ">
<div className="flex flex-col pr-2 py-2 border-0 border-b border-solid border-gray-100">
<h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
{type === "digital"
? book?.product[0]?.name
: book?.product[1]?.name}
</h1>
<div className="text-blueC0 text-xs dark:text-greenBA">
{"پایه" + " " + grades[book?.gradeId]}
</div>
<div className="flex float-left justify-end">
<div className="p-2">
<StarRating />
</div>
<div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
بیش از 160 نفر امتیاز داده اند
</div>
</div>
</div>
<div className="py-4 border-0 border-b border-solid border-gray-100">
<div className="flex items-center py-2">
<h1>نوع کتاب</h1>
<p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p>
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
title="نسخه فیزیکی"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
color={isDark ? "text-white" : "text-blueC0"}
active={type === "physical"}
selectable={true}
onClick={() => setType("physical")}
borderType='dashed'
customStyle=''
twPaddings='py-4 px-12'
radius={false}
/>
<Button
title="نسخه دیجیتال"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
selectable={true}
active={type === "digital"}
color={isDark ? "text-white" : "text-blueC0"}
onClick={() => setType("digital")}
radius={false}
twPaddings='py-4 px-12'
/>
<Button
title="مشاهده نمونه"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }}
radius={false}
twPaddings='py-4 px-6'
color={isDark ? "text-white" : "text-red19"}
/>
</div>
</div>
<div className="flex justify-center py-6">
<Button
title="مشاهده دوره ویدیویی این محصول >"
backgroundColor={isDark ? "bg-transparent" : "bg-blueC0'"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "2px" }}
color={isDark ? "text-white" : "text-blue52"}
selectable={true}
onClick={() => setType("physical")}
customStyle='bg-black bg-opacity-10'
twPaddings='py-4 px-32'
radius={false}
/>
</div>
</div>
<div>
<AddToCartCard
price={type === "digital" ? book?.product[0]?.price : book?.product[1]?.price}
sendingTime={20}
numberOfSuggest={160}
profit={12000}
button={
<Button
onClick={() =>
proxy.status()
? pushToCart({
productId:
type === "digital"
? book?.product[0]?.id
: book?.product[1]?.id,
userId: userId,
count: 1,
})
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
title='افزودن به سبد خرید'
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
twPaddings='py-4'
/>
}
/>
</div>
</header>
<ul
className="list-none flex flex-row divide-x items-center mt-4"
style={{ direction: "ltr" }}
>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.pagesNum} <br /> صفحه
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{"فیزیکی - دیجیتالی"} <br /> در دسترس
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.rate} <br /> امتیاز
</li>
</ul>
<h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
نسخه محصول را انتخاب کنید
</h2>
<div className="w-full flex flex-row justify-between items-center mt-4">
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
title="مشاهده دوره ویدئویی این محصول"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
bgOpacity="bg-opacity-10"
width="100%"
color={isDark ? "text-white" : "text-blueC0"}
/>
</div>
<div className="w-full flex flex-col justify-between items-center mt-4">
<Header title="توضیحات" link="#" />
<p className="text-xs text-gray1 mt-2 dark:text-white">
خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ
ﺩﺯﺩﯼ ﻧﮑﻦ ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ
ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ
ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ
ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ
ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ
ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
</p>
</div>
</div>
)
}
const mapStateToProps = (state) => ({
book: state.book.info,
grades: state.publicApi.grades,
isDark: state.publicApi.isDark,
userId: state.user.status.id,
});
const mapDispatchToProps = {
getInfo: book.info,
pushToCart: userProduct.add,
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductOverAll);

@ -1,9 +1,10 @@
import React from "react";
import ProductOverAll from "./ProductOverAll";
const DesktopProductLayout = () =>{
return (
<div className="w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3">
Desktop
<div className="w-4/5 flex flex-row gap-10 px-5 overflow-y-hidden mt-3 mb-64">
<ProductOverAll />
</div>
);
};

@ -174,7 +174,10 @@ export const Product = ({
<Comment key={index} />
))}
</div>
</div>) : <DesktopProductLayout />}
</div>) :<div className="flex flex-col items-center justify-center">
<DesktopProductLayout />
</div>
}
</>
);
};
@ -182,6 +185,7 @@ export const Product = ({
const mapStateToProps = (state) => ({
book: state.book.info,
grades: state.publicApi.grades,
isMobile: state.publicApi.isMobile,
isDark: state.publicApi.isDark,
userId: state.user.status.id,
});

@ -33,6 +33,10 @@ export const Products = ({
const onChange = (name, value) => {
setFilter({ ...filter, [name]: value });
};
const onchange1 = (name, value) =>{
console.log(name)
console.log(value)
}
useEffect(() => {
getList();
@ -158,7 +162,7 @@ export const Products = ({
className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`}
// style={{ height: 1500 }}
>
<Sidebar />
<Sidebar onChange={onChange}/>
<Main />
</div>
)}

@ -3,12 +3,12 @@ import { connect } from "react-redux";
import Checkbox from "../../../components/Checkbox";
import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter";
export const Sidebar = ({}) => {
export const Sidebar = ({onChange}) => {
const filteronGrade = [
{
id:0,
name: "پایه اول",
name: "اول",
expaneded: false,
subList: [{
id:1,
@ -17,7 +17,7 @@ export const Sidebar = ({}) => {
},
{
id:1,
name: "پایه دوم",
name: "دوم",
expaneded: false,
subList: [{
id:1,
@ -26,7 +26,7 @@ export const Sidebar = ({}) => {
},
{
id:2,
name: "پایه سوم",
name: "سوم",
expaneded: false,
subList: [],
},
@ -59,8 +59,8 @@ export const Sidebar = ({}) => {
},
]
return <div className="flex flex-col w-1/4 p-4">
<VerticalExpandableProductFilter btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
<VerticalExpandableProductFilter list={categories} title="دسته بندی" searchAble={false}/>
<VerticalExpandableProductFilter onChange={onChange} name="grade" preName='پایه' btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
<VerticalExpandableProductFilter name="category" list={categories} title="دسته بندی" searchAble={false}/>
</div>;
};

@ -16,6 +16,7 @@ module.exports = {
blueFFOP : "rgba(6, 146, 255, 0.36)",
redFF: "#FFE6E6",
redFF1: "#FF2020",
red19: "#C01919",
yellow2: "#FDFFDA",
yellow3: "#EFFF00",
gray36: "#363636",
@ -32,6 +33,7 @@ module.exports = {
grayEE: "#EEEEEE",
grayF9: "#F9F9F9",
grayF4: "#EBF0F4",
grayF7: "#F7F7F7"
}),
textColor: (theme) => ({
...theme("colors"),
@ -45,11 +47,20 @@ module.exports = {
green71: "#067182",
greenBA: "#06BACE",
red5F: "#5F1A05",
red19: "#C01919",
yellow1: "#5F5F05",
gray1: "#333333",
gray70: "#707070",
grayDB: "#DBDBDB",
}),
// height: (theme) =>( {
// sm: '8px',
// md: '16px',
// lg: '24px',
// xl: '48px',
// h420 : '320px',
// full: '100%',
// }),
borderColor: (theme) => ({
...theme("colors"),
blueC0: "#196EC0",
@ -59,6 +70,7 @@ module.exports = {
blueB9: '#86A0B9',
grayDB: "#DBDBDB",
gray45: "#454545",
red19: "#C01919",
}),
fill: (theme) => ({

Loading…
Cancel
Save