fix blog page
parent
101d650a2e
commit
2331fcce65
|
|
@ -7,6 +7,8 @@ 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 }) => {
|
||||
console.log("data", data);
|
||||
|
|
@ -25,14 +27,218 @@ const BlogsData = ({ dataCaetgories, data }) => {
|
|||
router.push(`${pathname}?${params}`);
|
||||
};
|
||||
|
||||
const lates4Blog = data.blogs?.slice(0, 4);
|
||||
|
||||
console.log(lates4Blog);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="overflow-hidden">
|
||||
<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 ">
|
||||
<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/482ab9fa-01b7-435a-9877-f1fad9759a9e/الستر`}>
|
||||
<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/93a18c0c-c468-4f76-bf6b-8b41d636a433/فیری`}>
|
||||
<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/cec2ba58-fac7-4090-bd0d-c43572224d42/سراوی`}>
|
||||
<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/2fd16c58-81c1-4f1c-9666-77a4b9b482b5/پیکسی`}>
|
||||
<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/ee8a60d6-4b5f-4db8-abbe-dd5da391b61c/سیمپل`}>
|
||||
<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/2c5ff965-cee0-4b0f-9075-1818b1d852f9/مرحبا`}>
|
||||
<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/779c0873-5e1f-49f5-9005-41bbcb26cb04/نارس`}>
|
||||
<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/c355764e-811c-4b4b-a256-401d6e7bd59e/توکوبو`}>
|
||||
<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}
|
||||
|
|
@ -50,7 +256,7 @@ const BlogsData = ({ dataCaetgories, data }) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-100 rounded-2xl p-5 relative h-fit rtl xs:w-full">
|
||||
<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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue