From c1aec7f31617cccc9229cb79d04a62b780c4d292 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Tue, 5 Aug 2025 22:54:26 +0700
Subject: [PATCH] fixing

---
 components/landing-page/navbar.tsx      |  28 ++--
 components/landing-page/new-content.tsx | 206 +++++++++++++++---------
 2 files changed, 144 insertions(+), 90 deletions(-)

diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 00c8f3e1..834fa234 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -250,34 +250,38 @@ const Navbar = () => {
                 </PopoverTrigger>
 
                 <PopoverContent className="flex flex-col gap-2 w-fit px-6 py-4 rounded-md shadow-md bg-white dark:bg-black">
-                  <button
-                    onClick={() => router.push(prefixPath + "/image/filter")}
+                  <Link
+                    href={prefixPath + "/image/filter"}
+                    // onClick={() => router.push(prefixPath + "/image/filter")}
                     className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                   >
                     <FiImage className="mr-2" />
                     {t("image", { defaultValue: "Image" })}
-                  </button>
-                  <button
-                    onClick={() => router.push(prefixPath + "/video/filter")}
+                  </Link>
+                  <Link
+                    href={prefixPath + "/video/filter"}
+                    // onClick={() => router.push(prefixPath + "/video/filter")}
                     className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                   >
                     <FiYoutube className="mr-2" />
                     {t("video", { defaultValue: "Video" })}
-                  </button>
-                  <button
-                    onClick={() => router.push(prefixPath + "/document/filter")}
+                  </Link>
+                  <Link
+                    href={prefixPath + "/document/filter"}
+                    // onClick={() => router.push(prefixPath + "/document/filter")}
                     className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                   >
                     <FiFile className="mr-2" />
                     {t("text", { defaultValue: "Text" })}
-                  </button>
-                  <button
-                    onClick={() => router.push(prefixPath + "/audio/filter")}
+                  </Link>
+                  <Link
+                    href={prefixPath + "/audio/filter"}
+                    // onClick={() => router.push(prefixPath + "/audio/filter")}
                     className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                   >
                     <FiMusic className="mr-2" />
                     {t("audio", { defaultValue: "Audio" })}
-                  </button>
+                  </Link>
                 </PopoverContent>
               </Popover>
 
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index 3bbc213a..cfbe8fb7 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -128,7 +128,10 @@ const NewContent = (props: { group: string; type: string }) => {
           <h2 className="flex items-center text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523]  uppercase">
             {pathname?.split("/")[1] == "in" ? (
               <>
-                <span className="text-[#bb3523] ">{t("content", { defaultValue: "Content" })}</span>&nbsp;
+                <span className="text-[#bb3523] ">
+                  {t("content", { defaultValue: "Content" })}
+                </span>
+                &nbsp;
                 {props.type == "popular"
                   ? "Terpopuler"
                   : props.type == "latest"
@@ -153,10 +156,22 @@ const NewContent = (props: { group: string; type: string }) => {
             <Tabs value={selectedTab} onValueChange={setSelectedTab}>
               <TabsList className="flex gap-2 bg-transparent p-0">
                 {[
-                  { label: t("image", { defaultValue: "Image" }), value: "image" },
-                  { label: t("video", { defaultValue: "Video" }), value: "video" },
-                  { label: t("text", { defaultValue: "Text" }), value: "document" },
-                  { label: t("audio", { defaultValue: "Audio" }), value: "audio" },
+                  {
+                    label: t("image", { defaultValue: "Image" }),
+                    value: "image",
+                  },
+                  {
+                    label: t("video", { defaultValue: "Video" }),
+                    value: "video",
+                  },
+                  {
+                    label: t("text", { defaultValue: "Text" }),
+                    value: "document",
+                  },
+                  {
+                    label: t("audio", { defaultValue: "Audio" }),
+                    value: "audio",
+                  },
                 ].map((tab) => (
                   <TabsTrigger
                     key={tab.value}
@@ -194,12 +209,12 @@ const NewContent = (props: { group: string; type: string }) => {
                           className="md:basis-1/2 lg:basis-1/3"
                         >
                           <div
-                            onClick={() =>
-                              router.push(
-                                prefixPath + `/image/detail/${image?.slug}`
-                              )
-                            }
-                            className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
+                            // onClick={() =>
+                            //   router.push(
+                            //     prefixPath + `/image/detail/${image?.slug}`
+                            //   )
+                            // }
+                            className="relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
                           >
                             {/* Image with motion effect */}
                             <motion.div
@@ -207,17 +222,24 @@ const NewContent = (props: { group: string; type: string }) => {
                               whileHover={{ scale: 0.95 }}
                               transition={{ duration: 0.3 }}
                             >
-                              <Image
-                                priority={true} 
-                                placeholder={`data:image/svg+xml;base64,${toBase64(
-                                  shimmer(700, 475)
-                                )}`}
-                                width={2560}
-                                height={1440}
-                                alt="image"
-                                src={image?.smallThumbnailLink}
-                                className="w-full h-full object-cover"
-                              />
+                              <Link
+                                href={
+                                  prefixPath + `/image/detail/${image?.slug}`
+                                }
+                              >
+                                {" "}
+                                <Image
+                                  priority={true}
+                                  placeholder={`data:image/svg+xml;base64,${toBase64(
+                                    shimmer(700, 475)
+                                  )}`}
+                                  width={2560}
+                                  height={1440}
+                                  alt="image"
+                                  src={image?.smallThumbnailLink}
+                                  className="w-full h-full object-cover"
+                                />
+                              </Link>
                             </motion.div>
 
                             {/* Badge category */}
@@ -248,15 +270,15 @@ const NewContent = (props: { group: string; type: string }) => {
                                   {image?.categoryName?.toUpperCase() ??
                                     "Giat Pimpinan"}
                                 </p>
-                                <p
-                                  className="
-        text-sm lg:text-base font-semibold text-black dark:text-white
-        line-clamp-4         /* LIMIT to 2 lines if plugin available */
-        /* or use min-h-[3rem] as fallback */
-      "
+                                <Link
+                                  href={
+                                    prefixPath + `/image/detail/${image?.slug}`
+                                  }
                                 >
-                                  {image?.title}
-                                </p>
+                                  <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
+                                    {image?.title}
+                                  </p>
+                                </Link>
                               </div>
                               {/* Optional metadata area (uncomment if needed) */}
                               {/* 
@@ -271,7 +293,7 @@ const NewContent = (props: { group: string; type: string }) => {
                       ))}
                     </CarouselContent>
 
-                    <div className="flex justify-center mt-4">
+                    <div className="flex justify-center mt-2">
                       {Array.from({ length: count }).map((_, index) => (
                         <button
                           key={index}
@@ -290,7 +312,7 @@ const NewContent = (props: { group: string; type: string }) => {
                 ) : (
                   <p className="flex items-center justify-center">
                     <Image
-                      priority={true} 
+                      priority={true}
                       width={1920}
                       height={1080}
                       src="/assets/empty-data.png"
@@ -308,13 +330,14 @@ const NewContent = (props: { group: string; type: string }) => {
                           key={audio?.id}
                           className="md:basis-1/2 lg:basis-1/3"
                         >
-                          <div
-                            onClick={() =>
-                              router.push(
-                                prefixPath + `/audio/detail/${audio?.slug}`
-                              )
-                            }
-                            className="cursor-pointer bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"
+                          <Link
+                            href={prefixPath + `/audio/detail/${audio?.slug}`}
+                            // onClick={() =>
+                            //   router.push(
+                            //     prefixPath + `/audio/detail/${audio?.slug}`
+                            //   )
+                            // }
+                            className="bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"
                           >
                             {/* Icon Background */}
                             <div className="flex items-center justify-center bg-[#bb3523] w-full h-[170px] text-white">
@@ -347,7 +370,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                 <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}
                               </p> */}
                             </div>
-                          </div>
+                          </Link>
                         </CarouselItem>
                       ))}
                     </CarouselContent>
@@ -371,7 +394,7 @@ const NewContent = (props: { group: string; type: string }) => {
                 ) : (
                   <p className="flex items-center justify-center">
                     <Image
-                      priority={true} 
+                      priority={true}
                       width={1920}
                       height={1080}
                       src="/assets/empty-data.png"
@@ -390,12 +413,12 @@ const NewContent = (props: { group: string; type: string }) => {
                           className="md:basis-1/2 lg:basis-1/3"
                         >
                           <div
-                            onClick={() =>
-                              router.push(
-                                prefixPath + `/video/detail/${video?.slug}`
-                              )
-                            }
-                            className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
+                            // onClick={() =>
+                            //   router.push(
+                            //     prefixPath + `/video/detail/${video?.slug}`
+                            //   )
+                            // }
+                            className="relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
                           >
                             {/* Image with motion effect */}
                             <motion.div
@@ -403,17 +426,23 @@ const NewContent = (props: { group: string; type: string }) => {
                               whileHover={{ scale: 0.95 }}
                               transition={{ duration: 0.3 }}
                             >
-                              <Image
-                                priority={true} 
-                                placeholder={`data:image/svg+xml;base64,${toBase64(
-                                  shimmer(700, 475)
-                                )}`}
-                                alt="video"
-                                width={2560}
-                                height={1440}
-                                src={video?.smallThumbnailLink}
-                                className="w-full h-full object-cover"
-                              />
+                              <Link
+                                href={
+                                  prefixPath + `/video/detail/${video?.slug}`
+                                }
+                              >
+                                <Image
+                                  priority={true}
+                                  placeholder={`data:image/svg+xml;base64,${toBase64(
+                                    shimmer(700, 475)
+                                  )}`}
+                                  alt="video"
+                                  width={2560}
+                                  height={1440}
+                                  src={video?.smallThumbnailLink}
+                                  className="w-full h-full object-cover"
+                                />
+                              </Link>
                             </motion.div>
 
                             {/* Badge category */}
@@ -444,10 +473,15 @@ const NewContent = (props: { group: string; type: string }) => {
                                   {video?.categoryName?.toUpperCase() ??
                                     "Giat Pimpinan"}
                                 </p>
-                                <p
-                                  className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
-                                  {video?.title}
-                                </p>
+                                <Link
+                                  href={
+                                    prefixPath + `/video/detail/${video?.slug}`
+                                  }
+                                >
+                                  <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
+                                    {video?.title}
+                                  </p>
+                                </Link>
                               </div>
                               {/* Optional metadata area (uncomment if needed) */}
                               {/* 
@@ -482,7 +516,7 @@ const NewContent = (props: { group: string; type: string }) => {
                 ) : (
                   <p className="flex items-center justify-center">
                     <Image
-                      priority={true} 
+                      priority={true}
                       width={1920}
                       height={1080}
                       src="/assets/empty-data.png"
@@ -500,15 +534,18 @@ const NewContent = (props: { group: string; type: string }) => {
                         className="md:basis-1/2 lg:basis-1/3"
                       >
                         <div
-                          onClick={() =>
-                            router.push(
-                              prefixPath + `/document/detail/${text?.slug}`
-                            )
-                          }
-                          className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
+                          // onClick={() =>
+                          //   router.push(
+                          //     prefixPath + `/document/detail/${text?.slug}`
+                          //   )
+                          // }
+                          className="rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
                         >
                           {/* Ikon di tengah dengan latar kuning */}
-                          <div className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white">
+                          <Link
+                            href={prefixPath + `/document/detail/${text?.slug}`}
+                            className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white"
+                          >
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
                               width="150"
@@ -520,7 +557,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                 d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"
                               />
                             </svg>
-                          </div>
+                          </Link>
 
                           {/* Konten bawah */}
                           <div className="p-4 flex flex-col gap-2">
@@ -530,10 +567,15 @@ const NewContent = (props: { group: string; type: string }) => {
                             </div>
 
                             {/* Judul */}
-                            <div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
-                              {text?.title}
-                            </div>
-
+                            <Link
+                              href={
+                                prefixPath + `/document/detail/${text?.slug}`
+                              }
+                            >
+                              <p className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
+                                {text?.title}
+                              </p>
+                            </Link>
                             {/* Meta info */}
                             {/* <div className="text-gray-500 flex items-center text-xs gap-2">
                               <span>
@@ -579,7 +621,7 @@ const NewContent = (props: { group: string; type: string }) => {
               ) : (
                 <p className="flex items-center justify-center">
                   <Image
-                    priority={true} 
+                    priority={true}
                     width={1920}
                     height={1080}
                     src="/assets/empty-data.png"
@@ -592,9 +634,17 @@ const NewContent = (props: { group: string; type: string }) => {
           )}
         </div>
         <div className="flex items-center flex-row justify-center mt-3">
-          <div onClick={() => router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)} className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523] hover:text-white hover:bg-[#bb3523]">
+          <Link
+            href={prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`}
+            // onClick={() =>
+            //   router.push(
+            //     prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`
+            //   )
+            // }
+            className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523] hover:text-white hover:bg-[#bb3523]"
+          >
             {t("seeAll", { defaultValue: "See All" })}
-          </div>
+          </Link>
         </div>
       </Reveal>
     </div>