82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
"use client";
|
||
|
||
import Footer from "@comp/Footer/page";
|
||
import Navbar from "@comp/Navbar/page";
|
||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||
import PersianNumber from "plugins/PersianNumber";
|
||
import React from "react";
|
||
import Cart from "../BlogComponents/Cart";
|
||
import PaginationBlogs from "../BlogComponents/PaginationBlogs";
|
||
|
||
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}`);
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<Navbar />
|
||
|
||
<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 ltr mt-10">
|
||
<div className="xs:xol-span-1 lg:col-span-3">
|
||
<div className="grid xs:grid-cold-1 md:grid-cols-3 gap-7 rtl ">
|
||
{data?.blogs?.map((e) => (
|
||
<Cart
|
||
categoryName={e.categoryName}
|
||
title={e.title}
|
||
mainImage={e.mainImage}
|
||
slug={e.slug}
|
||
id={e.id}
|
||
summery={e.summery}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-20">
|
||
<PaginationBlogs totalPage={data?.pager} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-100 rounded-2xl p-5 relative h-fit rtl xs:w-full">
|
||
<h3 className="text-center font-medium mb-5"> دسته بندی ها</h3>
|
||
|
||
<div>
|
||
{dataCaetgories?.map((e) => (
|
||
<div onClick={() => handleGoCategories(e.id)}>
|
||
<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;
|