feat: add share button in detail content

app/[locale]/(public)/audio/detail/[slug]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import NewContent from "@/components/landing-page/new-content";
@@ -10,7 +10,11 @@ import { BarWave } from "react-cssfx-loading";
 import { useToast } from "@/components/ui/use-toast";
 import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { close, error, loading } from "@/config/swal";
+import { close, error, loading, successCallback } from "@/config/swal";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 const DetailAudio = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -29,8 +33,17 @@ const DetailAudio = () => {
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
   const [imageSizeSelected, setImageSizeSelected] = useState("l");
-
   const userId = getCookiesDecrypt("uie");
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
+  const [width, setWidth] = useState<any>();
+  const [content, setContent] = useState<any>([]);
+  const userRoleId = getCookiesDecrypt("urie");
+
+  let typeString = "video";
 
   useEffect(() => {
     initFetch();
@@ -41,6 +54,8 @@ const DetailAudio = () => {
     const response = await getDetail(String(slug));
     console.log("detailAudio", response);
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
+    setWidth(window.innerWidth);
+    setContent(response?.data.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -216,6 +231,59 @@ const DetailAudio = () => {
     { label: "XS", value: "800 x 450 px" },
   ];
 
+  const handleShare = (type: any, url: any) => {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      sendActivityLog(2);
+      sendActivityLog(4);
+      if (type == "wa" && width <= 768) {
+        window.open(`whatsapp://send?${url}`, "_blank");
+      } else if (type == "wa" && width > 768) {
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+      } else {
+        window.open(url);
+      }
+    }
+  };
+
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
   return (
     <>
       <div className="min-h-screen px-4 md:px-24 py-4">
@@ -310,6 +378,39 @@ const DetailAudio = () => {
               </svg>
               Download
             </button>
+
+            {/* Tombol Bagikan */}
+            <div className="flex flex-row py-3">
+              <p className="text-base font-semibold">Bagikan</p>
+              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
+                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              </a>
+              <Popover>
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col">
+                    <h1 className="mb-2">Share Ke Email</h1>
+                    <div className="flex flex-col mb-2">
+                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                    </div>
+                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                      Kirim
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
           </div>
         </div>
       </div>

app/[locale]/(public)/document/detail/[slug]/page.tsx

@@ -1,15 +1,19 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import NewContent from "@/components/landing-page/new-content";
 import { Textarea } from "@/components/ui/textarea";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
-import { close, error, loading } from "@/config/swal";
+import { close, error, loading, successCallback } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
 import { Link, useRouter } from "@/i18n/routing";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 const DetailDocument = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -29,8 +33,17 @@ const DetailDocument = () => {
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
   const [imageSizeSelected, setImageSizeSelected] = useState("l");
-
   const userId = getCookiesDecrypt("uie");
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
+  const [width, setWidth] = useState<any>();
+  const [content, setContent] = useState<any>([]);
+  const userRoleId = getCookiesDecrypt("urie");
+
+  let typeString = "video";
 
   useEffect(() => {
     initFetch();
@@ -41,6 +54,8 @@ const DetailDocument = () => {
     const response = await getDetail(String(slug));
     console.log("detailDocument", response);
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
+    setWidth(window.innerWidth);
+    setContent(response?.data.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -216,6 +231,59 @@ const DetailDocument = () => {
     xhr.send();
   };
 
+  const handleShare = (type: any, url: any) => {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      sendActivityLog(2);
+      sendActivityLog(4);
+      if (type == "wa" && width <= 768) {
+        window.open(`whatsapp://send?${url}`, "_blank");
+      } else if (type == "wa" && width > 768) {
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+      } else {
+        window.open(url);
+      }
+    }
+  };
+
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
   return (
     <>
       <div className="px-4 md:px-24 py-4">
@@ -307,6 +375,39 @@ const DetailDocument = () => {
               </svg>
               Download
             </button>
+
+            {/* Tombol Bagikan */}
+            <div className="flex flex-row py-3">
+              <p className="text-base font-semibold">Bagikan</p>
+              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
+                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              </a>
+              <Popover>
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col">
+                    <h1 className="mb-2">Share Ke Email</h1>
+                    <div className="flex flex-col mb-2">
+                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                    </div>
+                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                      Kirim
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
           </div>
         </div>
       </div>

app/[locale]/(public)/image/detail/[slug]/page.tsx

@@ -1,15 +1,19 @@
 "use client";
 
 import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import NewContent from "@/components/landing-page/new-content";
 import { useToast } from "@/components/ui/use-toast";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { close, error, loading } from "@/config/swal";
+import { close, error, loading, successCallback } from "@/config/swal";
 import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
 import { Link, useRouter } from "@/i18n/routing";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 
 const DetailInfo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -29,8 +33,17 @@ const DetailInfo = () => {
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
   const [imageSizeSelected, setImageSizeSelected] = useState("l");
-
   const userId = getCookiesDecrypt("uie");
+  const [content, setContent] = useState<any>([]);
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
+  const [width, setWidth] = useState<any>();
+  const userRoleId = getCookiesDecrypt("urie");
+
+  let typeString = "video";
 
   useEffect(() => {
     initFetch();
@@ -41,6 +54,8 @@ const DetailInfo = () => {
     const response = await getDetail(String(slug));
     console.log("detailImage", response);
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
+    setWidth(window.innerWidth);
+    setContent(response?.data.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -219,6 +234,59 @@ const DetailInfo = () => {
     xhr.send();
   };
 
+  const handleShare = (type: any, url: any) => {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      sendActivityLog(2);
+      sendActivityLog(4);
+      if (type == "wa" && width <= 768) {
+        window.open(`whatsapp://send?${url}`, "_blank");
+      } else if (type == "wa" && width > 768) {
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+      } else {
+        window.open(url);
+      }
+    }
+  };
+
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
   return (
     <>
       <div className="min-h-screen px-4 md:px-24 py-4">
@@ -296,7 +364,7 @@ const DetailInfo = () => {
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
                   <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={(e) => setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -321,6 +389,39 @@ const DetailInfo = () => {
               </svg>
               Download
             </button>
+
+            {/* Tombol Bagikan */}
+            <div className="flex flex-row py-3">
+              <p className="text-base font-semibold">Bagikan</p>
+              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
+                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              </a>
+              <Popover>
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col">
+                    <h1 className="mb-2">Share Ke Email</h1>
+                    <div className="flex flex-col mb-2">
+                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                    </div>
+                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                      Kirim
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
           </div>
         </div>
       </div>

app/[locale]/(public)/video/detail/[slug]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
@@ -9,8 +9,13 @@ import NewContent from "@/components/landing-page/new-content";
 import { Link, useRouter } from "@/i18n/routing";
 import { Textarea } from "@/components/ui/textarea";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { close, error, loading } from "@/config/swal";
+import { close, error, loading, successCallback } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
 
 const DetailVideo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -28,8 +33,17 @@ const DetailVideo = () => {
   const [isFromSPIT, setIsFromSPIT] = useState(false);
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
-
   const userId = getCookiesDecrypt("uie");
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
+  const [width, setWidth] = useState<any>();
+  const [content, setContent] = useState<any>([]);
+  const userRoleId = getCookiesDecrypt("urie");
+
+  let typeString = "video";
 
   useEffect(() => {
     initFetch();
@@ -40,6 +54,8 @@ const DetailVideo = () => {
     const response = await getDetail(String(slug));
     console.log("detailVideo", response);
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
+    setWidth(window.innerWidth);
+    setContent(response?.data.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -216,6 +232,59 @@ const DetailVideo = () => {
     xhr.send();
   };
 
+  const handleShare = (type: any, url: any) => {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      sendActivityLog(2);
+      sendActivityLog(4);
+      if (type == "wa" && width <= 768) {
+        window.open(`whatsapp://send?${url}`, "_blank");
+      } else if (type == "wa" && width > 768) {
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+      } else {
+        window.open(url);
+      }
+    }
+  };
+
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
   return (
     <>
       <div className="px-4 md:px-24 py-4">
@@ -318,6 +387,39 @@ const DetailVideo = () => {
               </svg>
               Download
             </button>
+
+            {/* Tombol Bagikan */}
+            <div className="flex flex-row py-3">
+              <p className="text-base font-semibold">Bagikan</p>
+              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
+                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              </a>
+              <Popover>
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col">
+                    <h1 className="mb-2">Share Ke Email</h1>
+                    <div className="flex flex-col mb-2">
+                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                    </div>
+                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                      Kirim
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
           </div>
         </div>
       </div>

components/landing-page/navbar.tsx

@@ -37,6 +37,7 @@ type Detail = {
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false);
+  const [inboxOpen, setInboxOpen] = useState(false);
   const router = useRouter();
   const params = useParams();
   const locale = params?.locale;
@@ -118,7 +119,7 @@ const Navbar = () => {
       const response = await getInfoProfile();
       if (!response?.error) {
         const details = response?.data?.data;
-
+        setInboxOpen(details);
         setDetail(details);
         console.log("data", details);
       }
@@ -211,9 +212,9 @@ const Navbar = () => {
                     {t("content")}
                   </a>
                 </NavigationMenuTrigger>
-                <NavigationMenuContent className="rounded-md overflow-hidden">
+                <NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden ">
-                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-40">
+                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36">
-                    <p className="text-slate-600  dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                    <p className="text-slate-600  dark:text-white hover:text-[#bb3523] flex flex-row items-center py-2 cursor-pointer">
                       <FiImage className="mr-2" />
                       {t("image")}
                     </p>
@@ -221,32 +222,28 @@ const Navbar = () => {
                   <NavigationMenuLink onClick={() => router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 ">
                     {pathname?.split("/")[1] == "in" ? (
                       <>
-                        <p className="text-slate-600 text-left text-sm dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-0 py-2 cursor-pointer">
+                        <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                           <FiYoutube className="mr-2" />
                           {t("video")}
                         </p>
                       </>
                     ) : (
                       <>
-                        <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                        <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                           <FiYoutube className="mr-2" />
                           {t("video")}
                         </p>
                       </>
                     )}
-                    {/* <p className="text-slate-600 text-sm dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-0 py-2 cursor-pointer">
-                      <FiYoutube className="mr-2" />
-                      {t("video")}
-                    </p> */}
                   </NavigationMenuLink>
                   <NavigationMenuLink onClick={() => router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2">
-                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                       <FiFile className="mr-2" />
                       {t("text")}
                     </p>
                   </NavigationMenuLink>
                   <NavigationMenuLink onClick={() => router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 ">
-                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                       <FiMusic className="mr-2" />
                       {t("audio")}{" "}
                     </p>
@@ -327,97 +324,6 @@ const Navbar = () => {
             </span>
           </div>
 
-          {/* Inbox */}
-          <Popover>
-            <PopoverTrigger asChild>
-              <a className="cursor-pointer" onClick={() => test()}>
-                {" "}
-                <Icon icon="basil:envelope-outline" color="black" width="30" />
-              </a>
-            </PopoverTrigger>
-            <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
-              <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
-                <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
-                  <TabsTrigger value="notif-tab">
-                    <a
-                      className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
-                      id="notif-tab"
-                      data-toggle="tab"
-                      role="tab"
-                      aria-controls="notif"
-                      aria-selected="true"
-                      onClick={() => setIsMessageActive(true)}
-                    >
-                      Pesan Masuk
-                    </a>
-                  </TabsTrigger>
-                  <TabsTrigger value="notifupdate-tab">
-                    <a
-                      className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`}
-                      id="notifupdate-tab"
-                      data-toggle="tab"
-                      role="tab"
-                      aria-controls="notifupdate"
-                      aria-selected="false"
-                      onClick={() => setIsMessageActive(false)}
-                    >
-                      Update(
-                      {notificationsUpdate?.length})
-                    </a>
-                  </TabsTrigger>
-                </TabsList>
-              </Tabs>
-              <div className={`flex justify-center my-3 ${isMessageActive ? "active" : ""}`}>
-                {notifications?.map((list: any) => (
-                  <a className="" href={list.redirectUrl} key={list.id}>
-                    <div className="">
-                      <img src="/assets/img/avatar-profile.png" alt="..." className="" />
-                    </div>
-                    <div className="">
-                      <div className="text-wrap text-left">{list?.message}</div>
-                      <div>
-                        <small>
-                          {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
-                        </small>
-                      </div>
-                    </div>
-                  </a>
-                ))}
-                <Link href="/inbox" legacyBehavior>
-                  <p className="text-[15px] py-2" role="button">
-                    Lihat semua
-                  </p>
-                </Link>
-              </div>
-            </PopoverContent>
-            {/* <PopoverContent>
-              <div className={`tab-pane fade ${isMessageActive ? "active" : ""}`}>
-                <div>
-                  {notifications?.map((list: any) => (
-                    <a className="" href={list.redirectUrl} key={list.id}>
-                      <div className="">
-                        <img src="/assets/img/avatar-profile.png" alt="..." className="" />
-                      </div>
-                      <div className="">
-                        <div className="text-wrap text-left">{list?.message}</div>
-                        <div>
-                          <small>
-                            {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  ))}
-                  <Link href="/inbox" legacyBehavior>
-                    <p className="text-[15px] py-2" role="button">
-                      Lihat semua
-                    </p>
-                  </Link>
-                </div>
-              </div>
-            </PopoverContent> */}
-          </Popover>
-
           {/* <div className="flex items-center space-x-2">
             {fullName ? (
               <>
@@ -464,112 +370,248 @@ const Navbar = () => {
           </div> */}
 
           {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? (
-            <DropdownMenu>
+            <>
-              <DropdownMenuTrigger asChild className="cursor-pointer">
+              {/* Inbox */}
-                {detail !== undefined ? (
+              <Popover>
-                  <div className="flex items-center gap-3 text-default-800">
+                <PopoverTrigger asChild>
-                    <Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
+                  <a className="cursor-pointer" onClick={() => test()}>
-                    <div>
+                    {" "}
-                      <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
+                    <Icon icon="basil:envelope-outline" color="black" width="30" />
-                      <p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
+                  <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
+                    <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
+                      <TabsTrigger value="notif-tab">
+                        <a
+                          className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
+                          id="notif-tab"
+                          data-toggle="tab"
+                          role="tab"
+                          aria-controls="notif"
+                          aria-selected="true"
+                          onClick={() => setIsMessageActive(true)}
+                        >
+                          Pesan Masuk
+                        </a>
+                      </TabsTrigger>
+                      <TabsTrigger value="notifupdate-tab">
+                        <a
+                          className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`}
+                          id="notifupdate-tab"
+                          data-toggle="tab"
+                          role="tab"
+                          aria-controls="notifupdate"
+                          aria-selected="false"
+                          onClick={() => setIsMessageActive(false)}
+                        >
+                          Update(
+                          {notificationsUpdate?.length})
+                        </a>
+                      </TabsTrigger>
+                    </TabsList>
+                  </Tabs>
+                  <div className={`flex justify-center my-3 ${isMessageActive ? "active" : ""}`}>
+                    {notifications?.map((list: any) => (
+                      <a className="" href={list.redirectUrl} key={list.id}>
+                        <div className="">
+                          <img src="/assets/avatar-profile.png" alt="..." className="" />
+                        </div>
+                        <div className="">
+                          <div className="text-wrap text-left">{list?.message}</div>
+                          <div>
+                            <small>
+                              {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                                list?.createdAt
+                              ).getMinutes()}`}{" "}
+                            </small>
+                          </div>
+                        </div>
+                      </a>
+                    ))}
+                    <Link href="/inbox" legacyBehavior>
+                      <p className="text-[15px] py-2" role="button">
+                        Lihat semua
+                      </p>
+                    </Link>
+                  </div>
+                </PopoverContent>
+              </Popover>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="cursor-pointer">
+                  {detail !== undefined ? (
+                    <div className="flex items-center gap-3 text-default-800">
+                      <Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
+                      <div>
+                        <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
+                        <p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
+                      </div>
+                      <span className="text-base me-2.5 lg:inline-block hidden">
+                        <Icon icon="heroicons-outline:chevron-down"></Icon>
+                      </span>
                     </div>
-                    <span className="text-base me-2.5 lg:inline-block hidden">
+                  ) : (
-                      <Icon icon="heroicons-outline:chevron-down"></Icon>
+                    ""
-                    </span>
+                  )}
-                  </div>
+                </DropdownMenuTrigger>
-                ) : (
+                <DropdownMenuContent className="w-56 p-0" align="end">
-                  ""
+                  <DropdownMenuGroup>
-                )}
+                    {[
-              </DropdownMenuTrigger>
+                      {
-              <DropdownMenuContent className="w-56 p-0" align="end">
+                        name: "Profile & Settings",
-                <DropdownMenuGroup>
+                        icon: "heroicons:user",
-                  {[
+                        href: "/profile",
-                    {
+                      },
-                      name: "Profile & Settings",
+                      {
-                      icon: "heroicons:user",
+                        name: "Kelola Konten",
-                      href: "/profile",
+                        icon: "stash:save-ribbon-duotone",
-                    },
+                        href: "/content-management/galery",
-                    {
+                      },
-                      name: "Kelola Konten",
+                    ].map((item, index) => (
-                      icon: "stash:save-ribbon-duotone",
+                      <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
-                      href: "/content-management/galery",
+                        <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
-                    },
+                          <Icon icon={item.icon} className="w-4 h-4" />
-                  ].map((item, index) => (
+                          {item.name}
-                    <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
+                        </DropdownMenuItem>
-                      <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
+                      </Link>
-                        <Icon icon={item.icon} className="w-4 h-4" />
+                    ))}
-                        {item.name}
+                  </DropdownMenuGroup>
-                      </DropdownMenuItem>
+                  <DropdownMenuSeparator />
-                    </Link>
+                  <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
-                  ))}
+                    <div>
-                </DropdownMenuGroup>
+                      <Link href={"/"}>
-                <DropdownMenuSeparator />
+                        <button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
-                <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
+                          <Icon icon="heroicons:power" className="w-4 h-4" />
-                  <div>
+                          {t("logOut")}
-                    <Link href={"/"}>
+                        </button>
-                      <button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
+                      </Link>
-                        <Icon icon="heroicons:power" className="w-4 h-4" />
+                    </div>
-                        {t("logOut")}
+                  </DropdownMenuItem>
-                      </button>
+                </DropdownMenuContent>
-                    </Link>
+              </DropdownMenu>
-                  </div>
+            </>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
           ) : roleId === "2" || roleId === "3" || roleId === "4" || roleId === "9" || roleId === "10" || roleId === "11" || roleId === "12" || roleId === "13" ? (
-            // Dropdown menu for roleId === 3
+            <>
-            <DropdownMenu>
+              {/* Inbox */}
-              <DropdownMenuTrigger asChild className="cursor-pointer">
+              <Popover>
-                {detail !== undefined ? (
+                <PopoverTrigger asChild>
-                  <div className="flex items-center gap-3 text-default-800">
+                  <a className="cursor-pointer" onClick={() => test()}>
-                    <Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
+                    {" "}
-                    <div>
+                    <Icon icon="basil:envelope-outline" color="black" width="30" />
-                      <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
+                  </a>
-                      <p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
+                </PopoverTrigger>
+                <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
+                  <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
+                    <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
+                      <TabsTrigger value="notif-tab">
+                        <a
+                          className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
+                          id="notif-tab"
+                          data-toggle="tab"
+                          role="tab"
+                          aria-controls="notif"
+                          aria-selected="true"
+                          onClick={() => setIsMessageActive(true)}
+                        >
+                          Pesan Masuk
+                        </a>
+                      </TabsTrigger>
+                      <TabsTrigger value="notifupdate-tab">
+                        <a
+                          className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`}
+                          id="notifupdate-tab"
+                          data-toggle="tab"
+                          role="tab"
+                          aria-controls="notifupdate"
+                          aria-selected="false"
+                          onClick={() => setIsMessageActive(false)}
+                        >
+                          Update(
+                          {notificationsUpdate?.length})
+                        </a>
+                      </TabsTrigger>
+                    </TabsList>
+                  </Tabs>
+                  <div className={`flex justify-center my-3 ${isMessageActive ? "active" : ""}`}>
+                    {notifications?.map((list: any) => (
+                      <a className="" href={list.redirectUrl} key={list.id}>
+                        <div className="">
+                          <img src="/assets/avatar-profile.png" alt="..." className="" />
+                        </div>
+                        <div className="">
+                          <div className="text-wrap text-left">{list?.message}</div>
+                          <div>
+                            <small>
+                              {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                                list?.createdAt
+                              ).getMinutes()}`}{" "}
+                            </small>
+                          </div>
+                        </div>
+                      </a>
+                    ))}
+                    <Link href="/inbox" legacyBehavior>
+                      <p className="text-[15px] py-2" role="button">
+                        Lihat semua
+                      </p>
+                    </Link>
+                  </div>
+                </PopoverContent>
+              </Popover>
+              // Dropdown menu for roleId === 3
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="cursor-pointer">
+                  {detail !== undefined ? (
+                    <div className="flex items-center gap-3 text-default-800">
+                      <Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
+                      <div>
+                        <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
+                        <p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
+                      </div>
+                      <span className="text-base me-2.5 lg:inline-block hidden">
+                        <Icon icon="heroicons-outline:chevron-down"></Icon>
+                      </span>
                     </div>
-                    <span className="text-base me-2.5 lg:inline-block hidden">
+                  ) : (
-                      <Icon icon="heroicons-outline:chevron-down"></Icon>
+                    ""
-                    </span>
+                  )}
-                  </div>
+                </DropdownMenuTrigger>
-                ) : (
+                <DropdownMenuContent className="w-56 p-0" align="end">
-                  ""
+                  <DropdownMenuGroup>
-                )}
+                    {[
-              </DropdownMenuTrigger>
+                      {
-              <DropdownMenuContent className="w-56 p-0" align="end">
+                        name: "Profile & Settings",
-                <DropdownMenuGroup>
+                        icon: "heroicons:user",
-                  {[
+                        href: "/profile",
-                    {
+                      },
-                      name: "Profile & Settings",
+                      {
-                      icon: "heroicons:user",
+                        name: "Dashboard",
-                      href: "/profile",
+                        icon: "material-symbols:dashboard",
-                    },
+                        href: "/dashboard",
-                    {
+                      },
-                      name: "Dashboard",
+                    ].map((item, index) => (
-                      icon: "material-symbols:dashboard",
+                      <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
-                      href: "/dashboard",
+                        <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
-                    },
+                          <Icon icon={item.icon} className="w-4 h-4" />
-                  ].map((item, index) => (
+                          {item.name}
-                    <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
+                        </DropdownMenuItem>
-                      <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
+                      </Link>
-                        <Icon icon={item.icon} className="w-4 h-4" />
+                    ))}
-                        {item.name}
+                  </DropdownMenuGroup>
-                      </DropdownMenuItem>
+                  <DropdownMenuSeparator />
-                    </Link>
+                  <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
-                  ))}
+                    <div>
-                </DropdownMenuGroup>
+                      <Link href={"/"}>
-                <DropdownMenuSeparator />
+                        <button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
-                <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
+                          <Icon icon="heroicons:power" className="w-4 h-4" />
-                  <div>
+                          {t("logOut")}
-                    <Link href={"/"}>
+                        </button>
-                      <button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
+                      </Link>
-                        <Icon icon="heroicons:power" className="w-4 h-4" />
+                    </div>
-                        {t("logOut")}
+                  </DropdownMenuItem>
-                      </button>
+                </DropdownMenuContent>
-                    </Link>
+              </DropdownMenu>
-                  </div>
+            </>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
           ) : (
             // Masuk and Daftar buttons for roleId === null
             <div className="flex justify-center items-center mx-3 gap-5">