Reza_ashrafi 2 years ago
commit 99647fb573
  1. 21
      package.json
  2. 1
      src/App.scss
  3. 12
      src/assets/icons/filter-icon.svg
  4. 2
      src/components/Avatar/index.js
  5. 42
      src/components/LeafletMap/index.js
  6. 32
      src/components/Map/index.js
  7. 59
      src/views/Blog/index.js
  8. 2
      src/views/Blogs/layouts/New.js
  9. 1
      src/views/Blogs/layouts/Single.js
  10. 53
      src/views/Blogs/layouts/Target.js
  11. 34
      src/views/Contact/index.js
  12. 11
      src/views/Contact/layouts/Info.js
  13. 2
      src/views/Dashboard/layouts/Main/Addresses/index.js
  14. 180
      src/views/Products/layouts/Desktop/Main.js
  15. 6
      tailwind.config.js
  16. 39
      yarn.lock

@ -12,11 +12,13 @@
"axios": "^0.24.0",
"jalali-moment": "^3.3.10",
"jol-player": "^2.5.0",
"leaflet": "^1.8.0",
"lodash": "^4.17.21",
"mapir-react-component": "^2.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-indiana-drag-scroll": "^2.1.0",
"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
"react-modern-drawer": "^1.0.1",
"react-qr-reader": "^2.2.1",
"react-redux": "^7.2.6",
@ -45,18 +47,11 @@
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
"browserslist":[
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",

@ -1,4 +1,3 @@
@import "./constants/size.scss";
@import "./constants/colors.scss";
@import "./views/Home/Landscape/Page1/index.scss";

@ -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="#06bace" 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="#06bace" 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="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -7,7 +7,7 @@ function Avatar({ source, size, rounded, status }) {
<img
src={source ? source : userImage}
alt="avatar"
style={{ width: size, height: size, objectFit: "contain" }}
style={{ width: size, height: size, objectFit: "cover" }}
/>
{status && (
<span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>

@ -0,0 +1,42 @@
import React from "react";
import { MapContainer, TileLayer, Popup, Marker } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
const bounds = [
[35.7020226, 51.4281064],
[35.7020226, 51.4281064],
];
let DefaultIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow,
});
L.Marker.prototype.options.icon = DefaultIcon;
const LeafletMap = () => {
return (
<MapContainer
center={[35.7020226, 51.4281064]}
zoom={15}
scrollWheelZoom={false}
style={{ width: "100%", height: "99%" }}
>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[35.7020226, 51.4281064]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
);
};
export default LeafletMap;

@ -15,21 +15,23 @@ const Map = Mapir.setToken({
export default function location() {
return (
<Mapir
userLocation={true}
Map={Map}
apiKey={
"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIn0.eyJhdWQiOiIxNDc1OSIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIiwiaWF0IjoxNjI1NjY2NzI2LCJuYmYiOjE2MjU2NjY3MjYsImV4cCI6MTYyODI1ODcyNiwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OIjSLWyNCGALY2C0EFDGPEEUbPqOxL6GxCDkeX1B5C218eTk0qkmlGs8z4E87Y-qL7_PG814UZwcngjdRybVwabMtgfHsJj7DRDtrdBzCW7HRlJXqrSRG7xOuJmFhcn4-HtXRQUOEUn8quQukXPek8zvMtRBoMNsefS5s6es2oAg7Fmv0o5T2uZyDzMnRAfrTb1SKtv52Q_yXWYPtQNZdZcwe9Ed-ZkGeAXuTY2tafow92Oq8mmRxrzaq9Ne3gtu98UqXA3rwzRaQ1ToXU_Tcjh5UCVS6hZAzhI-GQk7KfrLbOOyDCxfd9v7_qXnIkRR6dd3bZ69H-jvlytaxMl51Q"
}
center={[51.401464,35.700815 ]}
>
<Mapir.Marker
coordinates={[51.401464,35.700815 ]}
anchor="top"
// Image={blueMark}
style={{width:20, height: 20}}
<>
{" "}
<Mapir
userLocation={true}
Map={Map}
anchor="bottom"
className="marker"
></Mapir.Marker>
</Mapir>
apiKey={
"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIn0.eyJhdWQiOiIxNDc1OSIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIiwiaWF0IjoxNjI1NjY2NzI2LCJuYmYiOjE2MjU2NjY3MjYsImV4cCI6MTYyODI1ODcyNiwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OIjSLWyNCGALY2C0EFDGPEEUbPqOxL6GxCDkeX1B5C218eTk0qkmlGs8z4E87Y-qL7_PG814UZwcngjdRybVwabMtgfHsJj7DRDtrdBzCW7HRlJXqrSRG7xOuJmFhcn4-HtXRQUOEUn8quQukXPek8zvMtRBoMNsefS5s6es2oAg7Fmv0o5T2uZyDzMnRAfrTb1SKtv52Q_yXWYPtQNZdZcwe9Ed-ZkGeAXuTY2tafow92Oq8mmRxrzaq9Ne3gtu98UqXA3rwzRaQ1ToXU_Tcjh5UCVS6hZAzhI-GQk7KfrLbOOyDCxfd9v7_qXnIkRR6dd3bZ69H-jvlytaxMl51Q"
}
center={[51.401464, 35.700815]}
>
<Mapir.Marker
coordinates={[35.7020089, 51.4281546]}
anchor="bottom"
></Mapir.Marker>
</Mapir>{" "}
</>
);
}

@ -9,6 +9,7 @@ import Header from "../Blogs/layouts/Header";
import Suggest from "../Blogs/layouts/Suggest";
import New from "../Blogs/layouts/New";
import Avatar from "../../components/Avatar";
import moment from "jalali-moment";
//assets
import arrow from "../../assets/icons/dropdown-blue.svg";
@ -30,6 +31,8 @@ export const Blog = ({
getInfo({ id });
}, [id]);
console.log(blog);
return blogs?.length ? (
<div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-10 pb-24">
<div
@ -46,30 +49,34 @@ export const Blog = ({
<div className="flex flex-col justify-end bg-gradient-to-t from-black absolute top-0 left-0 z-10 w-full h-full pb-2 px-2">
<div className="w-full flex justify-between">
<div className="flex">
<Avatar size={40} />
{/* {!blog?.author.picFileId && <Avatar size={40} />}
{blog?.author.picFileId && (
<img
src={`https://dnvn.ir/api/v1/file/${blog?.author.picFileId}`}
alt="author"
className="w-20 rounded"
/>
)} */}
<Avatar
source={
blog?.author?.picFileId
? `https://dnvn.ir/api/v1/file/${blog?.author?.picFileId}`
: null
}
size={40}
/>
<div className="flex flex-col py-2 mr-2 justify-center">
<strong className="text-gray-300 text-tiny font-bold bg-red-400 p-2">
{window.t("نوشته از:" + " " + "کامران ایزدی")}
<strong className="text-gray-300 text-tiny font-bold">
{window.t("نوشته از:") + " " + blog?.author?.name}
</strong>
<p className="text-gray-300 mt-2 text-xs">
{window.t("سردبیر بخش وبلاگ دانوین")}
{blog?.author.role}
</p>
</div>
</div>
<div className="flex flex-col justify-center items-end">
<span className="text-gray-300 text-sm">
{window.t("زمان مطالعه" + " " + "۳۰ دقیقه")}
{window.t("زمان مطالعه:") +
" " +
`${blog?.duration}` +
" " +
window.t("دقیقه")}
</span>
<span className="mt-2 text-gray-300 text-sm font-bold">
{window.t("1400/11/24")}
{moment(blog?.updatedAt).locale("fa").format("YYYY/MM/DD")}
</span>
</div>
</div>
@ -94,23 +101,35 @@ export const Blog = ({
</strong>
{/* desktop */}
<div className="hidden lg:flex flex-col">
<div className="flex">
<Avatar size={60} />
<div className="flex items-start">
<Avatar
rounded={"rounded-full"}
source={
blog?.author?.picFileId
? `https://dnvn.ir/api/v1/file/${blog?.author?.picFileId}`
: null
}
size={40}
/>{" "}
<div className="flex flex-col py-2 mr-2 justify-center">
<strong className="lg:text-base lg:font-black text-gray1">
{window.t("نوشته از:" + " " + "کامران ایزدی")}
{window.t("نوشته از:") + " " + blog?.author?.name}
</strong>
<p className="lg:text-sm lg:font-semibold text-gray70 mt-2">
{window.t("سردبیر بخش وبلاگ دانوین")}
{blog?.author.role}
</p>
</div>
</div>
<div className="flex flex-col justify-center items-end">
<span className="lg:text-tiny text-gray1 lg:font-black">
{window.t("زمان مطالعه" + " " + "۳۰ دقیقه")}
{window.t("زمان مطالعه:") +
" " +
`${blog?.duration}` +
" " +
window.t("دقیقه")}
</span>
<span className="mt-2 lg:text-tiny text-gray1 lg:font-black">
{window.t("1400/11/24")}
{moment(blog?.updatedAt).locale("fa").format("YYYY/MM/DD")}
</span>
</div>
</div>

@ -29,7 +29,7 @@ export const New = ({ blog, isMobile, setActive }) => {
</strong>
<div
className="text-tiny leading-5 lg:leading-7 mb-3 dark:text-gray-200 p-2 text-justify"
className="text-tiny leading-5 lg:leading-7 mb-3 dark:text-gray-200 p-2 line-clamp-3"
dangerouslySetInnerHTML={{ __html: blog?.text }}
/>
<div className="w-full hidden lg;flex justify-between">

@ -60,7 +60,6 @@ export const Single = ({ blog, isMobile }) => {
<h1 className="lg:text-5xl font-bold leading-6 dark:text-gray-200">
{blog?.title}
</h1>
<div
className="text-tiny leading-6 lg:text-tiny text-gray70 dark:text-gray-200 lg:w-4/5 mt-4 lg:mt-6 lg:leading-7"
dangerouslySetInnerHTML={{ __html: blog?.text }}

@ -2,11 +2,12 @@ import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import Avatar from "../../../components/Avatar";
import moment from "jalali-moment";
export const Target = ({ blogs, isMobile }) => {
const Large = ({ blog }) => {
return isMobile ? (
<div className="flex flex-col w-full">
<div className="flex flex-col w-full mb-10">
<div
className="relative w-full rounded-md overflow-hidden"
style={{ height: "calc(100vh / 4.5)" }}
@ -23,22 +24,33 @@ export const Target = ({ blogs, isMobile }) => {
</strong>
<div className="w-full flex justify-between">
<div className="flex">
<Avatar size={45} />
{!blog?.author.picFileId && <Avatar size={60} />}
{blog?.author.picFileId && (
<img
src={`https://dnvn.ir/api/v1/file/${blog?.author.picFileId}`}
alt="author"
className="w-20 rounded"
/>
)}
<div className="flex flex-col py-1 mr-1 justify-center">
<strong className="text-opacity-75 text-tiny text-black dark:text-gray-200">
{window.t("نوشته از:" + " " + "کامران ایزدی")}
{window.t("نوشته از:" + " " + `${blog?.author.name}`)}
</strong>
<p className="text-black text-sm text-opacity-75 mt-2 dark:text-gray-200">
{window.t("سردبیر بخش وبلاگ دانوین")}
{blog?.author.role}
</p>
</div>
</div>
<div className="flex flex-col i justify-center items-end">
<span className="text-gray1 text-sm dark:text-gray-200">
{window.t("زمان مطالعه" + " " + "۳۰ دقیقه")}
<span className="lg:text-tiny text-gray1 lg:font-black">
{window.t("زمان مطالعه:") +
" " +
`${blog?.duration}` +
" " +
window.t("دقیقه")}
</span>
<span className="mt-2 text-gray1 text-sm dark:text-gray-200">
{window.t("1400/11/24")}
<span className="mt-3 lg:text-tiny text-gray1 lg:font-black">
{moment(blog?.updatedAt).locale("fa").format("YYYY/MM/DD")}
</span>
</div>
</div>
@ -60,13 +72,20 @@ export const Target = ({ blogs, isMobile }) => {
</strong>
<div className="w-full flex justify-between">
<div className="flex">
<Avatar size={60} />
{!blog?.author.picFileId && <Avatar size={60} />}
{blog?.author.picFileId && (
<img
src={`https://dnvn.ir/api/v1/file/${blog?.author.picFileId}`}
alt="author"
className="w-20 rounded"
/>
)}
<div className="flex flex-col py-2 mr-2 justify-center">
<strong className="lg:text-tiny lg:font-black text-opacity-75 text-white">
{window.t("نوشته از:" + " " + "کامران ایزدی")}
<strong className="lg:text-tiny lg:font-black text-opacity-75 text-white">
{window.t("نوشته از:" + " " + `${blog?.author.name}`)}
</strong>
<p className="lg:text-sm lg:font-semibold text-white text-opacity-75 mt-2">
{window.t("سردبیر بخش وبلاگ دانوین")}
{blog?.author.role}
</p>
</div>
</div>
@ -103,11 +122,11 @@ export const Target = ({ blogs, isMobile }) => {
<strong className="lg:font-bold lg:text-lg text-tiny my-2 leading-5 dark:text-gray-200">
{blog?.title}
</strong>
<p className="lg:w-4/5 text-gray70 lg:text-tiny text-tiny leading-5 lg:leading-6 dark:text-gray-200">
{window.t(
"هر نفسی که فرو می بریم، مرگی را که مدام به ما دست اندازی میکند پس میزند در نهایت این مرگ"
)}
</p>
<div
className="lg:w-4/5 text-gray70 lg:text-tiny text-tiny leading-5 lg:leading-6 dark:text-gray-200 text-justify"
dangerouslySetInnerHTML={{ __html: blog?.text }}
/>
</div>
</Link>
))}

@ -6,7 +6,7 @@ import Ticket from "./layouts/Ticket";
import Header from "../Activation/components/Header";
import NotFound from "../Faq/components/NotFound";
import Info from "./layouts/Info";
import Map from "../../components/Map";
import LeafletMap from "../../components/LeafletMap";
import Divider from "../../components/Divider";
//assets
@ -26,10 +26,7 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
}, []);
return (
<div
className="w-full flex h-auto flex-col bg-transparent lg:pt-36 lg:pb-24"
// style={{ height: "calc(100vh - 140px)" }}
>
<div className="w-full flex h-auto flex-col bg-transparent lg:pt-36 lg:pb-24">
<Header
bg={isMobile ? contactBgImage : desktopContactBgImage}
title={window.t("تماس با ما")}
@ -69,7 +66,7 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
className="w-1/3 rounded-md overflow-hidden"
style={{ height: "400px" }}
>
<Map />
<LeafletMap />
</div>
</div>
)}
@ -96,13 +93,14 @@ Contact.defaultProps = {
text: window.t(
"همکاران ما در قسمت فروش و پشتیبانی، پاسخگوی شما هستند هر سوالی در مورد کتابهای ما داشتید بپرسید"
),
tel: null,
color: "#766600",
},
link: {
title: window.t("ارتباط با بخش پشتیبانی"),
link: "/support",
color: "#766600",
},
// link: {
// title: window.t("ارتباط با بخش پشتیبانی"),
// link: "/support",
// color: "#766600",
// },
bg: "#D3B70222",
borderColor: "#D3B70255",
},
@ -111,8 +109,9 @@ Contact.defaultProps = {
title: { text: window.t("شماره تماس"), color: "#06A02A" },
description: {
text: window.t(
"در صورت هرگونه سوال شما میتوانید در ساعات اداری 9 الی 17 با شماره ۰۲۱۸۸۸۱۴۶۳۷ تماس حاصل فرمایید"
"در صورت هرگونه سوال شما میتوانید در ساعات اداری 9 الی 17 با شماره 58795 تماس حاصل فرمایید"
),
tel: "58795",
color: "#025816",
},
link: null,
@ -126,13 +125,14 @@ Contact.defaultProps = {
text: window.t(
"نشانی دفتر مرکزی: تهران میدان فردوسی خیابان عباس موسوی پلاک 30"
),
tel: null,
color: "#066A5C",
},
link: {
title: window.t("لیست نمایندگیهای فروش"),
link: "/sell",
color: "#0A7769",
},
// link: {
// title: window.t("لیست نمایندگیهای فروش"),
// link: "/sell",
// color: "#0A7769",
// },
bg: "#0A776922",
borderColor: "#0A776955",
},

@ -11,7 +11,16 @@ function Info({ info, isDark }) {
border: `1px solid ${info.borderColor}`,
}}
>
<img src={info.icon} alt="" />
{info.description.tel !== null ? (
<a
href={`tel:${info.description.tel}`}
className={`text-sm text-primaryText`}
>
<img src={info.icon} alt="" />
</a>
) : (
<img src={info.icon} alt="" />
)}
<div className="flex flex-col flex-1 mr-3">
<strong className="text-base" style={{ color: info.title.color }}>
{info.title.text}

@ -69,7 +69,7 @@ const ProfileAddress = ({
}}
>
&nbsp;
{window.t("یک آدرس جدید اضافه کنید")}
{window.t("یک آدرس جfdsدید اضافه کنید")}
<strong className="text-lg transform translate-y-0.5 mr-1">+</strong>
</button>
</div>

@ -12,6 +12,7 @@ import { book, publicApi } from "../../../../redux/actions";
import moment from "jalali-moment";
import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
import filter from "../../../../assets/icons/filter-icon.svg";
const num = 6;
export const Main = ({
@ -20,7 +21,7 @@ export const Main = ({
sortMethods,
filterOptions,
setFilterOptions,
useless
useless,
}) => {
const [filterLoading, setFilterLoading] = useState(false);
const [page, setPage] = useState(1);
@ -31,82 +32,91 @@ export const Main = ({
}, [filterOptions]);
useEffect(() => {
if(books?.length){
if (books?.length) {
setTotal(books.length);
window.scroll({ top: 0, behavior: "smooth" });
}
}, [books]);
const Items = React.useCallback((type) => {
const { grade, subject, available, sort, productType } = filterOptions;
let byGradeFilter;
let bySubjectFilter;
let byAvailableFilter;
let bySortFilter;
if (grade) {
byGradeFilter = books?.filter((book) => grades[book?.gradeId] === grade);
} else {
byGradeFilter = books;
}
if (subject) {
bySubjectFilter = byGradeFilter?.filter(
(book) =>
book?.product
?.find((product) => product?.productType === type)
?.name?.indexOf(subject) !== -1 ||
book?.name.indexOf(subject) !== -1
);
} else {
bySubjectFilter = byGradeFilter;
}
if (available) {
byAvailableFilter = bySubjectFilter?.filter(
(book) =>
book.product?.find((product) => product?.productType === type)?.price
);
} else {
byAvailableFilter = bySubjectFilter;
}
if (sort) {
if (sort === window.t("ارزان ترین")) {
bySortFilter = byAvailableFilter?.sort(
(a, b) =>
a.product?.find((product) => product?.productType === type)?.price -
b.product?.find((product) => product?.productType === type)?.price
const Items = React.useCallback(
(type) => {
const { grade, subject, available, sort, productType } = filterOptions;
let byGradeFilter;
let bySubjectFilter;
let byAvailableFilter;
let bySortFilter;
if (grade) {
byGradeFilter = books?.filter(
(book) => grades[book?.gradeId] === grade
);
} else if (sort === window.t("محبوب ترین")) {
bySortFilter = byAvailableFilter?.sort(
(a, b) =>
a.product?.find((product) => product?.productType === type)?.rate -
b.product?.find((product) => product?.productType === type)?.rate
} else {
byGradeFilter = books;
}
if (subject) {
bySubjectFilter = byGradeFilter?.filter(
(book) =>
book?.product
?.find((product) => product?.productType === type)
?.name?.indexOf(subject) !== -1 ||
book?.name.indexOf(subject) !== -1
);
} else if (sort === window.t("جدیدترین")) {
bySortFilter = byAvailableFilter?.sort(
(a, b) => moment(a.createdAt) - moment(b.createdAt)
} else {
bySubjectFilter = byGradeFilter;
}
if (available) {
byAvailableFilter = bySubjectFilter?.filter(
(book) =>
book.product?.find((product) => product?.productType === type)
?.price
);
} else {
byAvailableFilter = bySubjectFilter;
}
if (sort) {
if (sort === window.t("ارزان ترین")) {
bySortFilter = byAvailableFilter?.sort(
(a, b) =>
a.product?.find((product) => product?.productType === type)
?.price -
b.product?.find((product) => product?.productType === type)?.price
);
} else if (sort === window.t("محبوب ترین")) {
bySortFilter = byAvailableFilter?.sort(
(a, b) =>
a.product?.find((product) => product?.productType === type)
?.rate -
b.product?.find((product) => product?.productType === type)?.rate
);
} else if (sort === window.t("جدیدترین")) {
bySortFilter = byAvailableFilter?.sort(
(a, b) => moment(a.createdAt) - moment(b.createdAt)
);
} else {
bySortFilter = byAvailableFilter;
}
} else {
bySortFilter = byAvailableFilter;
}
} else {
bySortFilter = byAvailableFilter;
}
return bySortFilter;
},[books, filterOptions, grades]);
return bySortFilter;
},
[books, filterOptions, grades]
);
const elements = React.useMemo(() => {
return Items(2);
},[books, filterOptions]);
}, [books, filterOptions]);
const vods = React.useMemo(() => {
return Items(4);
},[books, filterOptions]);
}, [books, filterOptions]);
const lastPage = React.useMemo(() => {
return Math.floor((elements.length - 1) / num) + 1;
},[books, filterOptions]);
return Math.floor((elements.length - 1) / num) + 1;
}, [books, filterOptions]);
const pages = React.useMemo(() => {
return lastPage > 1 ? [...Array(lastPage)].map((e, i) => i + 1) : [];
},[books, filterOptions]);
}, [books, filterOptions]);
return (
<div
@ -115,63 +125,7 @@ export const Main = ({
>
<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-sm items-center mr-2 ml-4">
<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="rgba(6, 186, 206"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="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="rgba(6, 186, 206"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="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="rgba(6, 186, 206"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
</g>
</g>
</g>
</svg>
<img src={filter} className="w-5" alt="filter" />
<span className="text-tiny text-greenBA font-bold">
{window.t("مرتب سازی") + "" + ":"}
</span>

@ -1,7 +1,5 @@
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
content: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: "class", // or 'media' or 'class'
theme: {
backgroundColor: (theme) => ({
@ -71,14 +69,12 @@ module.exports = {
gray45: "#454545",
red19: "#C01919",
greenB9: "#80B918",
}),
fill: (theme) => ({
...theme("colors"),
blueC0: "#196EC0",
grayDF: "#DFDFDF",
greenBA: "#06BACE",
}),
fontSize: {
xs: "clamp(9px, 2.78vw, 11px)",

@ -1520,6 +1520,11 @@
schema-utils "^2.6.5"
source-map "^0.7.3"
"@react-leaflet/core@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.1.1.tgz#827fd05bb542cf874116176d8ef48d5b12163f81"
integrity sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==
"@rollup/plugin-node-resolve@^7.1.1":
version "7.1.3"
resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz"
@ -7305,6 +7310,11 @@ last-call-webpack-plugin@^3.0.0:
lodash "^4.17.5"
webpack-sources "^1.1.0"
leaflet@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e"
integrity sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==
leven@^3.1.0:
version "3.1.0"
resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"
@ -9681,6 +9691,14 @@ react-dom@^17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-dom@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
dependencies:
loose-envify "^1.1.0"
scheduler "^0.23.0"
react-error-overlay@^6.0.9:
version "6.0.10"
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz"
@ -9705,6 +9723,13 @@ react-is@^17.0.1, react-is@^17.0.2:
resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
"react-leaflet@>=3.1.0 <3.2.0 || ^3.2.1":
version "3.2.5"
resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-3.2.5.tgz#bec0bfab9dd8c2b030ea630f7a0687a60322ca7d"
integrity sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==
dependencies:
"@react-leaflet/core" "^1.1.1"
react-mapbox-gl-draw@^2.0.4:
version "2.0.4"
resolved "https://registry.npmjs.org/react-mapbox-gl-draw/-/react-mapbox-gl-draw-2.0.4.tgz"
@ -9874,6 +9899,13 @@ react@^17.0.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"
react@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
dependencies:
loose-envify "^1.1.0"
read-pkg-up@^7.0.1:
version "7.0.1"
resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz"
@ -10416,6 +10448,13 @@ scheduler@^0.20.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"
scheduler@^0.23.0:
version "0.23.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
dependencies:
loose-envify "^1.1.0"
schema-utils@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz"

Loading…
Cancel
Save