fix responsive all pages & change style page list blog and blog item & add date picker

This commit is contained in:
Ehsan
2024-08-23 18:57:28 +03:30
parent c62fb78f8c
commit 9701547d1f
35 changed files with 19276 additions and 225 deletions
+12 -6
View File
@@ -1,29 +1,35 @@
import Image from "next/image";
import Link from "next/link";
function Item({ data }) {
function Item({ data, idx }) {
return (
<li className="flex relative items-center justify-start gap-[8px] py-[20px]">
<li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
<Link href={`/blog/${data.id}`}>
<Image
className="w-[97px] h-[88px] rounded-[8px] overflow-hidden object-cover"
className="
min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px]
min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px]
rounded-[8px] overflow-hidden object-cover
"
src={data.src}
alt="article"
height={88}
width={97}
/>
</Link>
<div className="flex flex-col gap-[24px] items-start justify-between">
<div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
<Link href={`/blog/${data.id}`}>
<p
className="text-[#3B3B3B] text-[16px] text-nowrap font-bold"
className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
>{data.title}</p>
</Link>
<p
className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
>تاریخ انتشار: {data.date_of_release}</p>
</div>
<span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
{data.id > idx + 1 && (
<span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
)}
</li>
)
}