update

components/details/details-content.tsx

@@ -56,6 +56,8 @@ export default function DetailContent() {
     null
   );
 
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
   const [tabArticles, setTabArticles] = useState<Article[]>([]);
 
   const [activeTab, setActiveTab] = useState<TabKey>("trending");
@@ -193,6 +195,14 @@ export default function DetailContent() {
     close();
   }
 
+  if (!articleDetail?.files || articleDetail.files.length === 0) {
+    return (
+      <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
+        <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
+      </div>
+    );
+  }
+
   return (
     <>
       <div className="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8">
@@ -243,19 +253,41 @@ export default function DetailContent() {
           </div>
 
           <div className="w-full h-auto mb-6">
-            {articleDetail?.files?.[0]?.fileUrl ? (
+            {/* Gambar utama */}
+            <div className="w-full">
               <Image
-                src={articleDetail.files[0].fileUrl}
-                alt="Berita"
+                src={articleDetail.files[selectedIndex].fileUrl}
+                alt={articleDetail.files[selectedIndex].fileAlt || "Berita"}
                 width={800}
                 height={400}
                 className="rounded-lg w-full object-cover"
               />
-            ) : (
-              <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
-                <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
-              </div>
-            )}
+            </div>
+
+            {/* Thumbnail */}
+            <div className="flex gap-2 mt-3 overflow-x-auto">
+              {articleDetail.files.map((file: any, index: number) => (
+                <button
+                  key={file.id || index}
+                  onClick={() => setSelectedIndex(index)}
+                  className={`border-2 rounded-lg overflow-hidden ${
+                    selectedIndex === index
+                      ? "border-red-500"
+                      : "border-transparent"
+                  }`}
+                >
+                  <Image
+                    src={file.fileUrl}
+                    alt={file.fileAlt || "Thumbnail"}
+                    width={100}
+                    height={80}
+                    className="object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+
+            {/* Slug */}
             <p className="text-sm text-gray-500 mt-2 text-end">
               {articleDetail?.slug}
             </p>
@@ -327,13 +359,13 @@ export default function DetailContent() {
               </Link>
             </div>
             <div className="flex-1 overflow-y-auto">
-              <p className="text-gray-700 leading-relaxed text-justify">
+              <div className="text-gray-700 leading-relaxed text-justify">
                 <div
                   dangerouslySetInnerHTML={{
                     __html: articleDetail?.htmlDescription || "",
                   }}
                 />
-              </p>
+              </div>
               <Author />
               <div className="flex flex-row gap-2 items-center">
                 <span className="font-semibold text-sm text-gray-700">

components/table/article-table.tsx

@@ -173,11 +173,11 @@ export default function ArticleTable() {
     initState();
   };
 
-  const copyUrlArticle = async (id: number, slug: string) => {
+  const copyUrlArticle = async (id: number) => {
     const url =
       `${window.location.protocol}//${window.location.host}` +
-      "/news/detail/" +
-      `${id}-${slug}`;
+      "/detail/" +
+      `${id}`;
     try {
       await navigator.clipboard.writeText(url);
       successToast("Success", "Article Copy to Clipboard");
@@ -228,9 +228,7 @@ export default function ArticleTable() {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56">
-                  <DropdownMenuItem
-                    onClick={() => copyUrlArticle(article.id, article.slug)}
-                  >
+                  <DropdownMenuItem onClick={() => copyUrlArticle(article.id)}>
                     <CopyIcon className="mr-2 h-4 w-4" />
                     Copy Url Article
                   </DropdownMenuItem>