page home responsive & change component element & page blog item

2024-08-15 10:10:57 +03:30
parent 1341253384
commit fd3b82143b
44 changed files with 4149 additions and 103 deletions
@@ -0,0 +1,31 @@
+import Image from "next/image";
+import Link from "next/link";
+
+function Item({ data }) {
+    return (
+        <li className="flex relative items-center justify-start gap-[8px] py-[20px]">
+            <Link href={`/blog/${data.id}`}>
+                <Image
+                    className="w-[97px] 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">
+                <Link href={`/blog/${data.id}`}>
+                    <p
+                        className="text-[#3B3B3B] text-[16px] text-nowrap font-bold"
+                    >{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>
+        </li>
+    )
+}
+
+export default Item
@@ -0,0 +1,24 @@
+import AnimationTextHead from '@/app/component/AnimationTextHead'
+import UnderlineLG from '@/components/icons/UnderlineLG'
+import React from 'react'
+import Item from './Item'
+
+function RelatedContent({ data }) {
+  return (
+    <div className='p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
+      <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
+        <UnderlineLG />
+      </AnimationTextHead>
+      <ul className='flex w-fit flex-col justify-start items-start'>
+        {data.map(item => (
+          <Item
+            data={item}
+            key={item.id}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default RelatedContent