114 lines
3.8 KiB
React
114 lines
3.8 KiB
React
|
"use client";
|
|||
|
|
|
|||
|
|
import Footer from "@comp/Footer/page";
|
|||
|
|
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
|
|||
|
|
import Cart from "@comp/Pages/BlogComponents/Cart";
|
|||
|
|
import PaginationCategoory from "@comp/PaginationCategoory/page";
|
|||
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|||
|
|
import PersianNumber from "@plug/PersianNumber";
|
|||
|
|
import React from "react";
|
|||
|
|
|
|||
|
|
const BlogsData = ({ dataCaetgories, data }) => {
|
|||
|
|
const pathname = usePathname();
|
|||
|
|
const searchParams = useSearchParams();
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
const searchParamsCurrentId = searchParams.get("blogCategoryId");
|
|||
|
|
const handleGoCategories = (id) => {
|
|||
|
|
// CTX.setIsChecked(!isChecked);
|
|||
|
|
const params = new URLSearchParams(searchParams.toString());
|
|||
|
|
|
|||
|
|
params.set("blogCategoryId", id);
|
|||
|
|
|
|||
|
|
params.set("page", "0");
|
|||
|
|
router.push(`${pathname}?${params}`);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// console.log("dataCaetgories", dataCaetgories);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div className="bg-contact-us pb-10 ">
|
|||
|
|
<div className=" lg:pb-20">
|
|||
|
|
<NavbarTransparent />
|
|||
|
|
|
|||
|
|
<div className="relative">
|
|||
|
|
<svg
|
|||
|
|
class="absolute hidden lg:block ltr:right-80 ltr:left-auto left-80 top-20 ltr:mr-6 ltr:ml-0 ml-6 z-10 opacity-10 mt-[110px]"
|
|||
|
|
width="38"
|
|||
|
|
height="51"
|
|||
|
|
viewBox="0 0 38 50"
|
|||
|
|
fill="none"
|
|||
|
|
xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
d="M36.7412 1.94352L17.4742 6.5023L22.033 25.7693L2.76602 30.3281L7.3248 49.5951"
|
|||
|
|
stroke="white"
|
|||
|
|
stroke-width="5"
|
|||
|
|
></path>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="xs:mt-[50px] lg:mt-[100px] px-20 flex rtl justify-center ">
|
|||
|
|
<div className=" ">
|
|||
|
|
<h1 className="text-white font-bold text-right xs:text-[20px] lg:text-[40px]">
|
|||
|
|
{!!searchParamsCurrentId
|
|||
|
|
? data.blogs[0].categoryName
|
|||
|
|
: " مجله حامیان عدالت"}
|
|||
|
|
</h1>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="xs:px-3 md:px-5 md:container md:mx-auto mb-10">
|
|||
|
|
<div className="grid xs:grid-cold-1 md:grid-cols-4 gap-7 rtl mt-10 ltr">
|
|||
|
|
<div className="lg:col-span-3 rtl">
|
|||
|
|
<div className="grid xs:grid-cold-1 md:grid-cols-3 gap-7 rtl ">
|
|||
|
|
{data?.blogs?.map((e, index) => (
|
|||
|
|
<Cart
|
|||
|
|
categoryName={e.categoryName}
|
|||
|
|
title={e.title}
|
|||
|
|
mainImage={e.mainImage}
|
|||
|
|
slug={e.slug}
|
|||
|
|
id={e.id}
|
|||
|
|
key={index}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="mt-20">
|
|||
|
|
<PaginationCategoory totalPage={data?.pager} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white shadow rounded-2xl p-5 relative h-fit rtl">
|
|||
|
|
<h3 className="text-center font-medium mb-5"> دسته بندی ها</h3>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
{dataCaetgories?.map((e, index) => (
|
|||
|
|
<div onClick={() => handleGoCategories(e.id)} key={index}>
|
|||
|
|
<div className="flex p-2">
|
|||
|
|
<div className="w-3 h-3 rounded-full bg-secondary-900 mt-1 ml-2"></div>
|
|||
|
|
<p className="mb-0"> {e.name}</p>
|
|||
|
|
<small className="text-sm mx-2 mt-[2px]">
|
|||
|
|
(
|
|||
|
|
<PersianNumber
|
|||
|
|
number={e.blogCount}
|
|||
|
|
style="text-primary-900 "
|
|||
|
|
/>
|
|||
|
|
)
|
|||
|
|
</small>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Footer />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default BlogsData;
|