reza merged something

temp
Reza_ashrafi 3 years ago
commit 156ab159e0
  1. 16848
      package-lock.json
  2. 12
      src/assets/images/vuesax-linear-filter-tick.svg
  3. 97
      src/components/Checkbox/index.css
  4. 30
      src/components/Checkbox/index.js
  5. BIN
      src/components/Product/discount.png
  6. BIN
      src/components/Product/goldon.png
  7. 268
      src/components/Product/index.js
  8. 3
      src/components/Product/lightBlueDotIcon.svg
  9. 3
      src/components/Product/purpleDotIcon.svg
  10. 3
      src/components/Product/redDotIcon.svg
  11. 8
      src/components/Product/vuesax-linear-heart.svg
  12. BIN
      src/components/Product/watermelon.png
  13. 3
      src/components/Product/yellowDotIcon.svg
  14. BIN
      src/components/VerticalExpandableProductFilter/arrow-top.png
  15. 173
      src/components/VerticalExpandableProductFilter/index.js
  16. BIN
      src/components/VerticalExpandableProductFilter/search.png
  17. 4
      src/views/Products/index.js
  18. 110
      src/views/Products/layouts/Main.js
  19. 60
      src/views/Products/layouts/Sidebar.js
  20. 3
      tailwind.config.js

16848
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_filter-tick" data-name="vuesax/linear/filter-tick" transform="translate(-620 -700)">
<g id="filter-tick">
<path id="Vector" d="M9.5,4.75A4.678,4.678,0,0,1,8.82,7.2,4.735,4.735,0,0,1,4.75,9.5a4.62,4.62,0,0,1-2.56-.77A4.481,4.481,0,0,1,.69,7.2,4.686,4.686,0,0,1,0,4.75,4.754,4.754,0,0,1,4.75,0,4.421,4.421,0,0,1,5.79.12,4.74,4.74,0,0,1,9.5,4.75Z" transform="translate(632.13 710)" fill="none" stroke="#05335f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,1.17,1.17,2.34,3.7,0" transform="translate(635.03 713.58)" fill="none" stroke="#05335f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(644 724) rotate(180)" fill="none" opacity="0"/>
<g id="Group">
<path id="Vector-4" data-name="Vector" d="M17.38,2.02V4.24a3.825,3.825,0,0,1-1.01,2.33L14.61,8.12A4.421,4.421,0,0,0,13.57,8a4.754,4.754,0,0,0-4.75,4.75,4.686,4.686,0,0,0,.69,2.45,4.481,4.481,0,0,0,1.5,1.53v.34a2.23,2.23,0,0,1-.91,1.72l-1.41.91a2.058,2.058,0,0,1-3.13-1.72V12.63a3.91,3.91,0,0,0-.81-2.12L.91,6.47A3.407,3.407,0,0,1,0,4.45V2.12A2.051,2.051,0,0,1,2.02,0H15.36A2.027,2.027,0,0,1,17.38,2.02Z" transform="translate(623.31 702)" fill="none" stroke="#05335f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -0,0 +1,97 @@
.checkbox-symbol {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
user-select: none;
}
.checkbox-container {
box-sizing: border-box;
color: #222;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
.checkbox-container * {
box-sizing: border-box;
}
.checkbox-input {
position: absolute;
visibility: hidden;
}
.checkbox {
user-select: none;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
}
.checkbox:not(:last-child) {
margin-right: 6px;
}
.checkbox:hover {
background: inherit;
}
.checkbox span {
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.checkbox span:first-child {
position: relative;
flex: 0 0 18px;
width: 18px;
height: 18px;
border-radius: 4px;
transform: scale(1);
border: 1px solid #cccfdb;
transition: all 0.3s ease;
}
.checkbox span:first-child svg {
position: absolute;
top: 3px;
left: 2px;
fill: none;
stroke: #fff;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transform: translate3d(0, 0, 0);
}
.checkbox span:last-child {
padding-left: 8px;
line-height: 18px;
}
.checkbox:hover span:first-child {
border-color: #0077ff;
}
.checkbox-input:checked + .checkbox span:first-child {
background: #0077ff;
border-color: #0077ff;
animation: zoom-in-out 0.3s ease;
}
.checkbox-input:checked + .checkbox span:first-child svg {
stroke-dashoffset: 0;
}
@keyframes zoom-in-out {
50% {
transform: scale(0.9);
}
}

@ -0,0 +1,30 @@
import React from "react";
import './index.css';
export default function Checkbox(props) {
return (
<div>
<svg className="checkbox-symbol">
<symbol id="check" viewBox="0 0 12 10">
<polyline
points="1.5 6 4.5 9 10.5 1"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
></polyline>
</symbol>
</svg>
<div className="checkbox-container">
<input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} />
<label className="checkbox" htmlFor="apples">
<span>
<svg width="12px" height="10px">
<use xlinkHref="#check"></use>
</svg>
</span>
</label>
</div>
</div>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 868 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

@ -0,0 +1,268 @@
import React, { useState } from "react";
import StarRating from "../StarRating";
// 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 = ({
colors,
likeBtn,
discount,
discountPricePercent,
discountPrice,
productContent,
star,
productTags,
priceDirection,
productTitleAlignment,
priceHolder,
productHolderBorder,
productHolderBorderColor,
productTitleColor,
productExcerptTextColor,
productCat,
productCatTextColor,
rangeHolder,
verticalImg,
horizontalImg,
rangeWidth,
addToCartHolder,
productName,
productPrice,
productImg,
writeGHEIMAT,
numberOfRegards,
productHolderHoverBorder
}) => {
const [isHovering, setIsHovering] = useState(false);
return (
<div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3">
<div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4">
<div
className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
>
{/* 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={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 h-48 flex bg-grayF4 p-0 justify-center rounded-lg">
{verticalImg && (
<img
src={productImg}
alt=""
className="h-full rounded-lg cursor-pointer py-8"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
/>
)}
{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={`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"
}`}
>
{/* <button>افزودن به سبد خرید</button> */}
</div>
</div>
{/* product content */}
<div className="px-2">
<div className="mt-4">
<h2
className={`leading-4 text-xs ${productTitleColor} ${productTitleAlignment}`}
>
{productName}
</h2>
{productContent && (
<p
className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
{productCat && (
<span className={`text-sm font-light ${productCatTextColor}`}>
{productCat}
</span>
)}
</div>
{/* star */}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-sm-1 text-productContent font-bold mr-2">
بر اساس {numberOfRegards} بررسی
</span>
</div>
)}
{/* 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-sm 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>
)}
{/* {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>
);
};
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
colors: false,
likeBtn: false,
discount: false,
discountPricePercent: false,
// product price
discountPrice: false,
priceHolder: true,
productContent: false,
star: true,
productTags: [],
productCat: true,
rangeHolder: true,
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
verticalImg: true,
horizontalImg: false,
addToCartHolder: false,
productTitleColor: "text-productTitle",
productExcerptTextColor: "text-productContent",
productCatTextColor: "text-darkCrimsonTextColor",
// برای درصد دادن به عرض رنج
rangeWidth: "w-44",
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
productHolderBorder: "border",
productHolderBorderColor: "border-grayBorderColor",
productTitleAlignment: "text-justify",
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
priceDirection: "flex-row",
productImg: book,
writeGHEIMAT: false
};

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<circle id="Ellipse_18" data-name="Ellipse 18" cx="8" cy="8" r="8" fill="#89ecff"/>
</svg>

After

Width:  |  Height:  |  Size: 177 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<circle id="Ellipse_17" data-name="Ellipse 17" cx="8" cy="8" r="8" fill="#924eeb"/>
</svg>

After

Width:  |  Height:  |  Size: 177 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<circle id="Ellipse_19" data-name="Ellipse 19" cx="8" cy="8" r="8" fill="#fc5353"/>
</svg>

After

Width:  |  Height:  |  Size: 177 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_heart" data-name="vuesax/linear/heart" transform="translate(-236 -188)">
<g id="heart">
<path id="Vector" d="M10.62,17.71a2.181,2.181,0,0,1-1.24,0C6.48,16.72,0,12.59,0,5.59A5.574,5.574,0,0,1,5.56,0,5.515,5.515,0,0,1,10,2.24,5.547,5.547,0,0,1,20,5.59C20,12.59,13.52,16.72,10.62,17.71Z" transform="translate(238 191.1)" fill="none" stroke="#e11010" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(236 188)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 675 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<circle id="Ellipse_20" data-name="Ellipse 20" cx="8" cy="8" r="8" fill="#fcf653"/>
</svg>

After

Width:  |  Height:  |  Size: 177 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 B

@ -0,0 +1,173 @@
import React, { useState, useEffect } from "react";
import searchIcon from "./search.png";
import _ from "lodash";
import Checkbox from "../Checkbox";
import arrowIcon from "./arrow-top.png";
const langDetector = (lang = "fa", option1, option2) => {
return lang === "fa" ? option1 : option2;
};
export default function VerticalExpandableProductFilter(props) {
const [text, setText] = useState("");
const [searchResult, setSearchResult] = useState([]);
useEffect(() => {
let fakeSearchResult;
fakeSearchResult = props.list.filter(
(item1) => item1.name.indexOf(text) !== -1
);
setSearchResult(fakeSearchResult);
}, [text]);
return (
<div className="flex flex-col w-full border border-solid border-gray-100 rounded-md pt-6 bg-transparent max-h-screen bg-white my-3">
<strong className="text-md text-gray-500 w-full mb-3 text-right px-3">
{props.title}
</strong>
{props.searchAble && <form className="relative w-full px-3 mb-3">
<input
type="text"
placeholder={_.join(
[langDetector(props.lang, "جستجو...", "Search...")],
" "
)}
className="border rounded-md py-1 px-2 w-full placeholder-gray-300 outline-none text-gray-500"
onChange={(e) => setText(e.target.value)}
/>
<span
className={_.join(
[
"absolute inset-y-0 flex items-center",
langDetector(props.lang, "left-4", "right-4"),
],
" "
)}
>
<button
type="submit"
className="p-1 focus:outline-none focus:shadow-outline"
>
<img src={searchIcon} className="w-5 h-5" alt="" />
</button>
</span>
</form>}
<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"
>
<div className="flex flex-row items-center">
<Checkbox />
<strong className="text-xs font-light text-gray-500">
{item1.name}
</strong>
</div>
{item1.subList?.length > 0 && (
<img
src={arrowIcon}
alt=""
className={_.join(
[
"cursor-pointer w-5 transform transition-all duration-300",
item1.expaneded ? "" : "rotate-180",
],
" "
)}
/>
)}
</li>
)
)}
</ul>
{props.btnTitle && <div className="flex align-center justify-center">
<button className="my-4 bg-blueFFOP text-sm bg-opacity-40 transition-all w-4/5 py-3 px-6 rounded text-blueC0 hover:text-white hover:bg-blueC0" onClick={props.btnClicked}>{props.btnTitle}</button>
</div>}
</div>
);
}
VerticalExpandableProductFilter.defaultProps = {
list: [
{
id: 0,
name: "وسایل آشپزخانه",
expaneded: false,
subList: [],
},
{
id: 3,
name: "ماشین و موتور سیکلت",
expaneded: false,
subList: [
{
id: 4,
name: "ماشین",
},
{
id: 5,
name: "موتور",
},
],
},
{
id: 6,
name: "اتاق خواب",
expaneded: false,
subList: [
{
id: 7,
name: "کمد",
},
{
id: 8,
name: "تخت خواب",
},
],
},
{
id: 9,
name: "دکوراسیون و چیدمان",
expaneded: false,
subList: [],
},
{
id: 10,
name: "وسایل بهداشت شخصی",
expaneded: false,
subList: [
{
id: 11,
name: "مسواک",
},
{
id: 12,
name: "حوله",
},
],
},
{
id: 13,
name: "وسایل بهداشت شخصی",
expaneded: false,
subList: [
{
id: 14,
name: "مسواک",
},
{
id: 15,
name: "حوله",
},
],
},
{
id: 16,
name: "وسایل بهداشت شخصی",
expaneded: false,
subList: [],
},
],
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 857 B

@ -155,8 +155,8 @@ export const Products = ({
</> </>
) : ( ) : (
<div <div
className={`w-full flex flex-row gap-10 px-5`} className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`}
style={{ height: 1500 }} // style={{ height: 1500 }}
> >
<Sidebar /> <Sidebar />
<Main /> <Main />

@ -1,14 +1,114 @@
import React from 'react'; import React, { useState, useEffect, useCallback } from "react";
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link } from "react-router-dom";
import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg';
export const Main = ({}) => { import Product from '../../../components/Product'
return <div className="flex flex-col w-3/4 p-4 bg-green-300"> import { book, publicApi } from "../../../redux/actions";
export const Main = ({ isMobile,
books,
getList,
grades,
gradeFilter,
selectedGrade,
gradeFilterBooks,
setHeaderOptions,
headerOptions, }) => {
const [filter, setFilter] = useState({
search: "",
grade: "",
productsType: "کتاب",
});
const [desktopContentTransform, setDesktopContentTransform] = useState(false);
const onChange = (name, value) => {
setFilter({ ...filter, [name]: value });
};
const filteringNavItems = [
{
title: 'بیشترین بازدید'
},
{
title: 'پرفروش ترین'
},
{
title: 'کمترین قیمت'
},
{
title: 'بیشترین قیمت'
},
{
title: 'محبوب ترین'
},
];
return <div className="flex flex-col w-3/4 p-4">
<div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
<div className='flex text-xs items-center mx-4'>
<img src={filterIcon} />
<span>
مرتب سازی بر اساس
</span>
</div>
<ul className='flex justify-between w-3/4 px-4 py-0 '>
{
filteringNavItems.map(e => (
<li className='text-sm rounded py-2 px-6 transition-all hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li>
))
}
</ul>
</div>
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-center">
{selectedGrade
? gradeFilterBooks?.map((product, index) => (
<Product
key={index}
productsType={filter.productsType}
product={product}
index={Number(index)}
grades={grades}
/>
))
: 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}
productTitleColor='text-blue5F'
productCatTextColor='text-blueC0'
productHolderBorder=''
productHolderHoverBorder='shadow-md'
/>
</Link>
))}
</div>
</div>; </div>;
}; };
const mapStateToProps = (state) => ({}); const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
books: state.book.list,
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)(Main); export default connect(mapStateToProps, mapDispatchToProps)(Main);

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

@ -13,6 +13,7 @@ module.exports = {
blueFF1: "#E9F0FF", blueFF1: "#E9F0FF",
blueFD: "#F6F9FD", blueFD: "#F6F9FD",
blueFD1 : "#F4F8FD", blueFD1 : "#F4F8FD",
blueFFOP : "rgba(6, 146, 255, 0.36)",
redFF: "#FFE6E6", redFF: "#FFE6E6",
redFF1: "#FF2020", redFF1: "#FF2020",
yellow2: "#FDFFDA", yellow2: "#FDFFDA",
@ -29,6 +30,7 @@ module.exports = {
grayE3: "#E3E3E3", grayE3: "#E3E3E3",
grayEE: "#EEEEEE", grayEE: "#EEEEEE",
grayF9: "#F9F9F9", grayF9: "#F9F9F9",
grayF4: "#EBF0F4",
}), }),
textColor: (theme) => ({ textColor: (theme) => ({
...theme("colors"), ...theme("colors"),
@ -77,6 +79,7 @@ module.exports = {
'5xl': '3rem', '5xl': '3rem',
'6xl': '4rem', '6xl': '4rem',
'7xl': '5rem', '7xl': '5rem',
'sm-1': '0.5rem'
}, },
extend: { extend: {
borderRadius: { borderRadius: {

Loading…
Cancel
Save