Merge pull request #388 from mokletdev/development

feat: add NewsSearchFigure component and update search results layout

Author: naufalnrsmitter20

src/app/(main)/berita/search/page.tsx

@@ -1,11 +1,12 @@
-import { NewsFigure } from "@/app/_components/global/NewsFigure";
+import { NewsSearchFigure } from "@/app/_components/global/NewsFigure";
 import { H2 } from "@/app/_components/global/Text";
 import { SmallSectionWrapper } from "@/app/_components/global/Wrapper";
 import { PostWithTagsAndUser } from "@/types/entityRelations";
 import { findPosts } from "@/utils/database/post.query";
 
 import GoBack from "../[slug]/_components/BackButton";
 import { SearchBar } from "../_components/SearchBar";
+import { redirect } from "next/navigation";
 
 export default async function Search({
   searchParams,
@@ -29,10 +30,12 @@ export default async function Search({
             Menampilkan hasil pencarian untuk "
             {searchParams.q?.toString() ?? ""}"
           </H2>
-          <div className="w-full flex gap-x-[3.18%] gap-y-[62px]">
-            {posts.map((post) => (
-              <NewsFigure post={post} key={post.id} />
-            ))}
+          <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-4">
+            {posts.length !== 0
+              ? posts.map((post) => (
+                  <NewsSearchFigure post={post} key={post.id} />
+                ))
+              : redirect("/berita")}
           </div>
         </div>
       </div>

src/app/_components/global/NewsFigure.tsx

@@ -73,3 +73,60 @@ export function NewsFigure({ post }: Readonly<{ post: PostWithTagsAndUser }>) {
     </figure>
   );
 }
+export function NewsSearchFigure({
+  post,
+}: Readonly<{ post: PostWithTagsAndUser }>) {
+  return (
+    <figure className="w-full">
+      <div className="h-[200px] w-full">
+        <Image
+          src={post.thumbnail}
+          alt={post.slug}
+          unoptimized
+          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"}
+              unoptimized
+              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>
+  );
+}