web/components/Blog/BlogsData/page.jsx

"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";
import Image from "next/image";
import Link from "next/link";

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}`);
  };

  const lates4Blog = data.blogs?.slice(0, 4);

  return (
    <div className="overflow-hidden">
      <Navbar />

      <div className="xs:px-3 md:px-5 md:container md:mx-auto mb-10">
        <div className="grid grid-cols-1 lg:grid-cols-3 rtl ">
          <div className="bg-red-200 xs:h-[205px] lg:h-[410px] col-span-2 rounded-2xl overflow-hidden relative mt-3">
            <Link href={`/blogs/${lates4Blog[0]?.id}/${lates4Blog[0]?.slug}`}>
              <div className="relative">
                <div className=" absolute w-full z-20 top-0 p-5">
                  <h2 className="text-xl font-bold text-white ">
                    {lates4Blog[0]?.title}
                  </h2>
                  <p className="mb-0 text-right text-gray-300 text-[12px]">
                    {" "}
                    {lates4Blog[0]?.summery}
                  </p>

                  <div className="flex">
                    <div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3">
                      <p className="mb-0 text-[10px] text-gray-200">
                        {lates4Blog[0]?.categoryName}
                      </p>
                    </div>

                    <div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3 mx-2">
                      <p className="mb-0 text-[10px] text-gray-200">
                        {" "}
                        نوشته :
                        {lates4Blog[0]?.authorFullName || "ماهان قیصر زاده"}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <Image
                  src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${lates4Blog[0]?.mainImage}`}
                  width={800}
                  height={300}
                  className="w-full object-cover xs:h-[205px] lg:h-[410px] brightness-50"
                />
              </div>
            </Link>
          </div>

          <div className="mx-0 lg:mr-3">
            <div className="bg-red-200 h-[200px]  rounded-2xl overflow-hidden mt-3">
              <Link href={`/blogs/${lates4Blog[1]?.id}/${lates4Blog[1]?.slug}`}>
                <div className="relative">
                  <div className=" absolute w-full z-20 top-0 p-5">
                    <h2 className="text-xl font-bold text-white ">
                      {lates4Blog[1]?.title}
                    </h2>
                    <p className="mb-0 text-right text-gray-300 text-[12px]">
                      {" "}
                      {lates4Blog[1]?.summery}
                    </p>

                    <div className="flex">
                      <div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3">
                        <p className="mb-0 text-[10px] text-gray-200">
                          {lates4Blog[1]?.categoryName}
                        </p>
                      </div>

                      <div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3 mx-2">
                        <p className="mb-0 text-[10px] text-gray-200">
                          {" "}
                          نوشته :
                          {lates4Blog[1]?.authorFullName || "ماهان قیصر زاده"}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <Image
                    src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${lates4Blog[1]?.mainImage}`}
                    width={800}
                    height={300}
                    className="w-full object-cover h-[200px] brightness-50"
                  />
                </div>
              </Link>
            </div>

            <div className="bg-red-200 h-[200px] col-span-2 rounded-2xl overflow-hidden mt-3">
              <Link href={`/blogs/${lates4Blog[2]?.id}/${lates4Blog[2]?.slug}`}>
                <div className="relative">
                  <div className=" absolute w-full z-20 top-0 p-5">
                    <h2 className="text-xl font-bold text-white ">
                      {lates4Blog[2]?.title}
                    </h2>
                    <p className="mb-0 text-right text-gray-300 text-[12px]">
                      {" "}
                      {lates4Blog[2]?.summery}
                    </p>

                    <div className="flex">
                      <div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3">
                        <p className="mb-0 text-[10px] text-gray-200">
                          {lates4Blog[2]?.categoryName}
                        </p>
                      </div>

                      <div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3 mx-2">
                        <p className="mb-0 text-[10px] text-gray-200">
                          {" "}
                          نوشته :
                          {lates4Blog[2]?.authorFullName || "ماهان قیصر زاده"}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <Image
                    src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${lates4Blog[2]?.mainImage}`}
                    width={800}
                    height={300}
                    className="w-full object-cover h-[200px] brightness-50"
                  />
                </div>
              </Link>
            </div>
          </div>
        </div>

        <div className="bg-login !h-fit p-5 rounded-2xl mt-5">
          <div className="grid xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-2 xl:grid-cols-12 rtl">
            <Link href={`/brands/30be42fe-633b-4c43-886b-c946a68dddcc/فولیکا`}>
              <div className="w-[100px] h-[100px] relative rounded-full border-8 border-white shadow-sm  mx-2 hover:bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-white group-hover:text-black  tr03 ">
                  فولیکا
                </p>
              </div>
            </Link>
            <Link href={`/brands/52caf76d-7e36-43ca-b068-2bf6994b0d0e/آردن`}>
              <div className="w-[100px] h-[100px] rounded-full border-8 border-white shadow-sm  mx-2 hover:bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-white group-hover:text-black  tr03 ">
                  آردن
                </p>
              </div>
            </Link>
            <Link href={`/brands/48e6342c-c0a1-41a3-99ae-f240d90db1bd/گلدن-رز`}>
              <div className="w-[100px] h-[100px] rounded-full border-8 border-white shadow-sm  mx-2 hover:bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-white group-hover:text-black  tr03 ">
                  گلدن رز
                </p>
              </div>
            </Link>
            <Link href={`/brands/d1e7fd6b-3f50-4a10-8854-63beb8c793dc/کدکس`}>
              <div className="w-[100px] h-[100px] rounded-full border-8 border-white shadow-sm  mx-2 hover:bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-white group-hover:text-black  tr03 ">
                  کدکس
                </p>
              </div>
            </Link>
            <Link href={`/brands/93a2a376-5a18-49f3-b29c-a3c8ef2ff133/بیول`}>
              <div className="w-[100px] h-[100px] rounded-full border-8 border-white shadow-sm  mx-2 hover:bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-white group-hover:text-black  tr03 ">
                  بیول
                </p>
              </div>
            </Link>
            <Link href={`/brands/9d26a7d0-0c0b-4269-bc78-5f5fbb951119/میبلین`}>
              <div className="w-[100px] h-[100px] rounded-full border-8 border-white shadow-sm  mx-2 hover:bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-white group-hover:text-black  tr03 ">
                  میبلین
                </p>
              </div>
            </Link>
            <Link href={`/brands/4d0a9ed5-dfc9-45e2-8814-68d27f433b60/شون`}>
              <div className="w-[100px] h-[100px] rounded-full border-8 border-white shadow-sm  mx-2 hover:bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-white group-hover:text-black  tr03 ">
                  شون
                </p>
              </div>
            </Link>
            <Link href={`/brands/e80181ef-d91d-4072-aff3-be2fbb00c0eb/مای`}>
              <div className="w-[100px] h-[100px] rounded-full border-8 border-white shadow-sm  mx-2 hover:bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-white group-hover:text-black  tr03 ">
                  مای
                </p>
              </div>
            </Link>
            <Link
              href={`/brands/777ce18d-511b-4f24-9d4f-ade05b86b125/اوردینری`}
            >
              <div className="w-[100px] h-[100px] rounded-full border-8 border-white shadow-sm  mx-2 hover:bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-white group-hover:text-black  tr03 ">
                  اوردینری
                </p>
              </div>
            </Link>
            <Link href={`/`} className="col-span-3">
              <div className="px-5 h-[100px] rounded-full border-8 border-white shadow-sm  mx-2 bg-white tr03 group ">
                <p className="mb-0 font-bold text-center mt-7 text-black tr03 ">
                  مشاهده همه ی برند ها
                </p>
              </div>{" "}
            </Link>
          </div>
        </div>
        <div className="grid xs:grid-cold-1 md:grid-cols-2 lg:grid-cols-4 gap-7 ltr mt-10">
          <div className="xs:col-span-1 md:col-span-2 lg:col-span-3">
            <div className="grid xs:grid-cold-1 md:grid-cols-2 lg: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 md:col-span-2 lg:col-span-1">
            <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;