refactor: enhance blog functionality with related blogs fetching, improved loading states, and tag filtering

This commit is contained in:
hamed
2025-11-19 11:32:09 +03:30
parent 235a64c378
commit e26d342c90
10 changed files with 251 additions and 130 deletions
+34 -21
View File
@@ -1,39 +1,52 @@
import { convertTimestampToJalali } from "@/helper";
function Head({ data }) {
const firstTag = data?.tag?.[0];
const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
return (
<div>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
بلاگ {">"}
</p>
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
پوست و مو {">"}
</p>
{firstTag && (
<>
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
{firstTag.name} {">"}
</p>
</>
)}
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
روش های خانگی محافظت از پوست در تابستان
{data?.title}
</p>
</div>
<div>
<h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
روش های خانگی محافظت از پوست در تابستان
{data?.title}
</h1>
</div>
<div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
تاریخ انتشار:
</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data?.date_of_release}
</p>
</div>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
زمان مطالعه:
</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data?.time}
</p>
</div>
{data?.author && (
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
نویسنده:
</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data.author}
</p>
</div>
)}
{createdDate && (
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
تاریخ انتشار:
</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{createdDate}
</p>
</div>
)}
</div>
</div>
);