From 9810b08dbe56f840641e05e4546b1815b8a30832 Mon Sep 17 00:00:00 2001
From: naufalnrsmitter20 <x3mnaufalnabilramadhan@gmail.com>
Date: Sun, 11 May 2025 20:05:09 +0700
Subject: [PATCH] feat: add NewsFigureOrganization component for displaying
 organization news

---
 .../[slug]/_components/parts/RelatedNews.tsx  |  6 +-
 src/app/_components/global/NewsFigure.tsx     | 55 +++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/organisasi/[period]/[slug]/_components/parts/RelatedNews.tsx b/src/app/(main)/organisasi/[period]/[slug]/_components/parts/RelatedNews.tsx
index 909fdd7..952f7ed 100644
--- a/src/app/(main)/organisasi/[period]/[slug]/_components/parts/RelatedNews.tsx
+++ b/src/app/(main)/organisasi/[period]/[slug]/_components/parts/RelatedNews.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import { NewsFigure } from "@/app/_components/global/NewsFigure";
+import { NewsFigureOrganization } from "@/app/_components/global/NewsFigure";
 import { UnderlinedTitle, P } from "@/app/_components/global/Text";
 import { SectionWrapper } from "@/app/_components/global/Wrapper";
 import ArrowRight from "@/app/_components/icons/ArrowRight";
@@ -32,7 +32,9 @@ export default function RelatedNews({
         <div className="w-full overflow-x-none">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full justify-start gap-[36px]">
             {data.length !== 0 ? (
-              data.map((post) => <NewsFigure key={post.id} post={post} />)
+              data.map((post) => (
+                <NewsFigureOrganization key={post.id} post={post} />
+              ))
             ) : (
               <P>Belum ada berita apa-apa, nih...</P>
             )}
diff --git a/src/app/_components/global/NewsFigure.tsx b/src/app/_components/global/NewsFigure.tsx
index f469359..e7766c3 100644
--- a/src/app/_components/global/NewsFigure.tsx
+++ b/src/app/_components/global/NewsFigure.tsx
@@ -71,6 +71,61 @@ export function NewsFigure({ post }: Readonly<{ post: PostWithTagsAndUser }>) {
     </figure>
   );
 }
+export function NewsFigureOrganization({
+  post,
+}: Readonly<{ post: PostWithTagsAndUser }>) {
+  return (
+    <figure className="w-full">
+      <div className="h-[200px] w-full">
+        <Image
+          src={post.thumbnail}
+          alt={post.slug}
+          height={200}
+          width={372}
+          className="h-full w-full object-cover rounded-[20px]"
+        />
+      </div>
+      <div className="flex flex-col items-start justify-start gap-[26px]">
+        <div>
+          <div className="mb-[16px] mt-[26px] flex gap-[10px] flex-wrap">
+            {post.tags.map((tag) => (
+              <Tags tag={tag} key={tag.tagName} />
+            ))}
+          </div>
+          <Link
+            href={"/berita/" + post.slug}
+            className="text-black hover:text-primary-400 transition-all duration-500"
+          >
+            <div className="min-h-[52px]">
+              <span className="text-[18px] md:text-xl font-bold">
+                {post.title.length > 52
+                  ? post.title.slice(0, 48) + "..."
+                  : post.title}
+              </span>
+            </div>
+          </Link>
+        </div>
+        <div className="flex w-full justify-between">
+          <div className="flex items-center gap-2">
+            <Image
+              src={post.user.user_pic}
+              alt={post.user.name + "'s Pfp"}
+              height={28}
+              width={28}
+              className="h-7 w-7 object-cover rounded-full"
+            />
+            <span className="text-base text-black">
+              {trimName(post.user.name)}
+            </span>
+          </div>
+          <span className="text-neutral-500">
+            {post.published_at && stringifyDate(post.published_at)}
+          </span>
+        </div>
+      </div>
+    </figure>
+  );
+}
 export function NewsSearchFigure({
   post,
 }: Readonly<{ post: PostWithTagsAndUser }>) {