fix:detail news space y, temporary filtered duplicate image

app/news/detail/[id]/page.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 export async function generateMetadata({ params }: any): Promise<Metadata> {
-  const res = await getArticleById(params.id?.split("-")[0]);
+  const res = await getArticleById(params?.id?.split("-")[0]);
   const article = res?.data?.data;
   return {
     title: article.title,
@@ -22,7 +22,7 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
 }
 
 export default async function NewsPage({ params }: any) {
-  const articleId = params.id?.split("-")[0];
+  const articleId = params?.id?.split("-")[0];
   const res = await getArticleById(articleId);
   const article = res?.data?.data;
   return (

components/page/detail-news.tsx

@@ -39,6 +39,32 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
   const params = useParams();
   const id: any = params?.id;
   const shareText = "Humas Polri";
+  const [filteredFiles, setFilteredFiles] = useState<any>([]);
+
+  useEffect(() => {
+    getUniqueBaseFiles(data?.files);
+  }, [data]);
+
+  function extractBaseName(fileName: string): string {
+    const match = fileName.match(/^(.+?)_\w+\.(jpg|jpeg|png|webp)$/i);
+    return match ? match[1] : fileName;
+  }
+
+  const getUniqueBaseFiles = (files: any) => {
+    if (files && files.length > 0) {
+      const seen = new Set<string>();
+      const result: any = [];
+
+      for (const file of files) {
+        const baseName = extractBaseName(file.file_name);
+        if (!seen.has(baseName)) {
+          seen.add(baseName);
+          result.push(file);
+        }
+      }
+      setFilteredFiles(result);
+    }
+  };
 
   const handleShare = async (platform: string) => {
     let shareLink = "";
@@ -157,9 +183,9 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         </p>
       </div>
       <div className="flex justify-center my-2 lg:my-5">
-        {data?.files ? (
+        {filteredFiles ? (
-          data?.files[0]?.file_name.split(".")[1].includes("doc") ||
+          filteredFiles[0]?.file_name.split(".")[1].includes("doc") ||
-          data?.files[0]?.file_name.split(".")[1].includes("pdf") ? (
+          filteredFiles[0]?.file_name.split(".")[1].includes("pdf") ? (
             <Image
               classNames={{
                 wrapper: "!w-full !max-w-full",
@@ -170,14 +196,14 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
               className="object-cover w-[100%] rounded-md"
             />
           ) : (
-            data?.files?.length > 0 && (
+            filteredFiles?.length > 0 && (
               <Image
                 // classNames={{
                 //   wrapper: "!w-full !max-w-full",
                 //   img: "!w-full",
                 // }}
                 alt="Main Image"
-                src={data?.files[imageNow]?.file_url}
+                src={filteredFiles[imageNow]?.file_url}
                 className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
               />
             )
@@ -186,10 +212,10 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           ""
         )}
       </div>
-      {data?.files?.length > 0 &&
+      {filteredFiles?.length > 0 &&
-        (data.files[0].file_name.split(".")[1].includes("doc") ||
+        (filteredFiles[0].file_name.split(".")[1].includes("doc") ||
-        data.files[0].file_name.split(".")[1].includes("pdf") ? (
+        filteredFiles[0].file_name.split(".")[1].includes("pdf") ? (
-          data.files?.map((file: any, index: number) => (
+          filteredFiles?.map((file: any, index: number) => (
             <Accordion key={file?.id} variant="splitted" className="px-0">
               <AccordionItem
                 key={file?.id}
@@ -242,7 +268,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           ))
         ) : (
           <div className="flex flex-row gap-3 flex-nowrap overflow-x-auto">
-            {data?.files?.map((file: any, index: number) => (
+            {filteredFiles?.map((file: any, index: number) => (
               <a
                 key={file.id}
                 onClick={() => setImageNow(index)}
@@ -261,7 +287,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         dangerouslySetInnerHTML={removeImgTags(
           formatTextToHtmlTag(data?.htmlDescription)
         )}
-        className="text-sm lg:text-xl lg:leading-8 text-justify space-y-4"
+        className="text-sm lg:text-xl lg:leading-8 text-justify"
       />
 
       <div className="bg-gray-50 dark:bg-black text-black dark:text-white rounded-lg justify-center items-center p-4 flex flex-col gap-3">