fix:navbar, feat:news ticker landing, seo score

app/(admin)/admin/article/create/page.tsx

@@ -1,10 +1,10 @@
-import FormArticle from '@/components/form/form-article'
+import FormArticle from "@/components/form/form-article";
-import { Card } from '@nextui-org/react'
+import { Card } from "@nextui-org/react";
 
 export default function CreateArticle() {
   return (
-        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+    <Card className="h-[96vh] rounded-md border bg-transparent">
       <FormArticle />
     </Card>
-    )
+  );
 }

app/(admin)/admin/article/detail/[id]/page.tsx

@@ -1,10 +1,10 @@
-import FormDetailArticle from '@/components/form/form-detail-article'
+import FormDetailArticle from "@/components/form/form-detail-article";
-import { Card } from '@nextui-org/react'
+import { Card } from "@nextui-org/react";
 
 export default function DetailArticlePage() {
   return (
-        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+    <Card className="h-[96vh] rounded-md border bg-transparent">
       <FormDetailArticle />
     </Card>
-    )
+  );
 }

components/form/form-detail-article.tsx

@@ -1,15 +1,28 @@
-'use client'
+"use client";
-import { getArticleById } from '@/service/article';
+import { error } from "@/config/swal";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { getArticleById } from "@/service/article";
-import { Button, Card, Chip, Input, Select, SelectItem } from '@nextui-org/react';
+import { getSeoScore } from "@/service/generate-article";
-import JoditEditor from 'jodit-react';
+import { zodResolver } from "@hookform/resolvers/zod";
-import Link from 'next/link';
+import {
-import { usePathname } from 'next/navigation';
+  Accordion,
-import { useEffect, useRef, useState } from 'react';
+  AccordionItem,
-import { useForm } from 'react-hook-form';
+  Button,
-import Swal from 'sweetalert2';
+  Card,
-import withReactContent from 'sweetalert2-react-content';
+  Chip,
+  CircularProgress,
+  Input,
+  Select,
+  SelectItem,
+} from "@nextui-org/react";
+import JoditEditor from "jodit-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 import * as z from "zod";
+import { TimesIcon } from "../icons";
 
 const articleSchema = z.object({
   title: z.string().min(1, { message: "Required" }),
@@ -17,9 +30,19 @@ const articleSchema = z.object({
   slug: z.string().min(1, { message: "Required" }),
   tags: z.string().min(0, { message: "Required" }).optional(),
   description: z.string().min(1, { message: "Required" }).optional(),
-
 });
 
+const TypeId = [
+  {
+    key: "1",
+    label: "Article",
+  },
+  {
+    key: "2",
+    label: "Magazine",
+  },
+];
+
 export default function FormDetailArticle() {
   // const [id, setId] = useState<any>();
   const [title, setTitle] = useState<string>("");
@@ -27,14 +50,14 @@ export default function FormDetailArticle() {
   const [tags, setTags] = useState<string[]>([]);
   const [newTags, setNewTags] = useState<string>("");
   const editor = useRef(null);
-    const [content, setContent] = useState('');
+  const [content, setContent] = useState("");
   const MySwal = withReactContent(Swal);
   const [article, setArticle] = useState<any>();
-    const [typeArticle, setTypeArticle] = useState<any>([]);
+  const [typeArticle, setTypeArticle] = useState("");
   const pathname = usePathname();
-    const splitPathname = pathname.split('/');
+  const splitPathname = pathname.split("/");
   const id = splitPathname[splitPathname.length - 1];
-    console.log(id, "pathnamesplit")
+  console.log(id, "pathnamesplit");
 
   const formOptions = { resolver: zodResolver(articleSchema) };
   type MicroIssueSchema = z.infer<typeof articleSchema>;
@@ -48,29 +71,7 @@ export default function FormDetailArticle() {
 
   const editorConfig = {
     readonly: true,
-    }
+  };
-
-    const TypeId = [
-        {
-            key: 1,
-            label: "Article"
-        },
-        {
-            key: 2,
-            label: "Magazine"
-        },
-    ]
-
-    const CategoryArticle = [
-        {
-            key: 1,
-            label: "Article"
-        },
-        {
-            key: 2,
-            label: "Magazine"
-        },
-    ]
 
   const handleClose = (tagsToRemove: string) => {
     setTags(tags.filter((tag) => tag !== tagsToRemove));
@@ -93,32 +94,63 @@ export default function FormDetailArticle() {
     }
   };
 
-
   useEffect(() => {
     async function initState() {
       const res = await getArticleById(id);
       setArticle(res.data?.data);
-            setTitle(res.data?.data?.title)
+      setTitle(res.data?.data?.title);
-            setTypeArticle(res.data.data?.type_id)
+      setTypeArticle(String(res.data.data?.typeId));
-            const tagsArray = res.data.data?.tags ? res.data.data.tags.split(",") : [];
+      console.log("ii", String(res.data.data?.typeId));
+      const tagsArray = res.data.data?.tags
+        ? res.data.data.tags.split(",")
+        : [];
       setTags(tagsArray);
 
       console.log("Data Aritcle", tagsArray);
     }
 
     initState();
+    fetchSeoScore();
   }, []);
 
+  const [totalScoreSEO, setTotalScoreSEO] = useState();
+  const [errorSEO, setErrorSEO] = useState<any>([]);
+  const [warningSEO, setWarningSEO] = useState<any>([]);
+  const [optimizedSEO, setOptimizedSEO] = useState<any>([]);
 
-    async function save(data: any,) {
+  const fetchSeoScore = async () => {
+    const res = await getSeoScore("1931");
+    if (res.error) {
+      error(res.message);
+      return false;
+    }
+    setTotalScoreSEO(res.data.data?.seo_analysis?.score || 0);
+    let errorList: any[] = [
+      ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.error,
+      ...res.data.data?.seo_analysis?.analysis?.content_quality?.error,
+    ];
+    setErrorSEO(errorList);
+    let warningList: any[] = [
+      ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.warning,
+      ...res.data.data?.seo_analysis?.analysis?.content_quality?.warning,
+    ];
+    setWarningSEO(warningList);
+    let optimizedList: any[] = [
+      ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.optimized,
+      ...res.data.data?.seo_analysis?.analysis?.content_quality?.optimized,
+    ];
+    setOptimizedSEO(optimizedList);
+  };
+
+  async function save(data: any) {
     const formData = {
       id: id,
       title: title,
       typeId: parseInt(String(Array.from(article)[0])),
       slug: slug,
-            tags: tags.join(','),
+      tags: tags.join(","),
       description: content,
-            htmlDescription: content
+      htmlDescription: content,
     };
 
     console.log("Form Data:", formData);
@@ -128,7 +160,7 @@ export default function FormDetailArticle() {
     //     error(response.message);
     //     return false;
     // }
-    };
+  }
 
   async function onSubmit(data: any) {
     MySwal.fire({
@@ -146,9 +178,103 @@ export default function FormDetailArticle() {
     });
   }
   return (
-        <div className='mx-5 my-5 overflow-y-auto'>
+    <div className="mx-5 my-5 overflow-y-auto">
+      <div className="text-black px-3 flex flex-col rounded-md gap-3">
+        <p className="font-semibold text-lg"> SEO Score</p>
+        <div className="flex flex-row gap-5 w-full">
+          <CircularProgress
+            aria-label=""
+            color="warning"
+            showValueLabel={true}
+            size="lg"
+            value={Number(totalScoreSEO) * 100}
+          />
+          <div>
+            {/* <ApexChartDonut value={Number(totalScoreSEO) * 100} /> */}
+          </div>
+          <div className="flex flex-row gap-5">
+            <div className="px-2 py-1 border radius-md flex flex-row gap-2 items-center border-red-500 rounded-lg">
+              {/* <TimesIcon size={15} className="text-danger" /> */}
+              Error : {errorSEO.length || 0}
+            </div>
+            <div className="px-2 py-1 border radius-md flex flex-row gap-2 items-center border-yellow-500 rounded-lg">
+              {/* <p className="text-warning w-[15px] h-[15px] text-center mt-[-10px]">
+                !
+              </p> */}
+              Warning : {warningSEO.length || 0}
+            </div>
+            <div className="px-2 py-1 border radius-md flex flex-row gap-2 items-center border-green-500 rounded-lg">
+              {/* <CheckIcon size={15} className="text-success" /> */}
+              Optimize : {optimizedSEO.length || 0}
+            </div>
+          </div>
+        </div>
+        <Accordion
+          variant="splitted"
+          itemClasses={{
+            base: "!bg-transparent",
+            title: "text-black",
+          }}
+        >
+          <AccordionItem
+            key="1"
+            aria-label="Error"
+            // startContent={<TimesIcon size={20} className="text-danger" />}
+            title={`${errorSEO?.length || 0} Errors`}
+          >
+            <div className="flex flex-col gap-2">
+              {errorSEO?.map((item: any) => (
+                <p
+                  key={item}
+                  className="w-full border border-red-500 rounded-md h-[40px] text-left flex flex-col justify-center px-3"
+                >
+                  {item}
+                </p>
+              ))}
+            </div>
+          </AccordionItem>
+          <AccordionItem
+            key="2"
+            aria-label="Warning"
+            // startContent={
+            //   <p className="text-warning w-[20px] h-[20px] text-center mt-[-10px]">
+            //     !
+            //   </p>
+            // }
+            title={`${warningSEO?.length || 0} Warnings`}
+          >
+            <div className="flex flex-col gap-2">
+              {warningSEO?.map((item: any) => (
+                <p
+                  key={item}
+                  className="w-full border border-yellow-500 rounded-md h-[40px] text-left flex flex-col justify-center px-3"
+                >
+                  {item}
+                </p>
+              ))}
+            </div>
+          </AccordionItem>
+          <AccordionItem
+            key="3"
+            aria-label="Optimized"
+            // startContent={<CheckIcon size={20} className="text-success" />}
+            title={`${optimizedSEO?.length || 0} Optimized`}
+          >
+            <div className="flex flex-col gap-2">
+              {optimizedSEO?.map((item: any) => (
+                <p
+                  key={item}
+                  className="w-full border border-green-500 rounded-md h-[40px] text-left flex flex-col justify-center px-3"
+                >
+                  {item}
+                </p>
+              ))}
+            </div>
+          </AccordionItem>
+        </Accordion>
+      </div>
       <form method="POST" onSubmit={handleSubmit(onSubmit)}>
-                <Card className='rounded-md p-5 space-y-5'>
+        <Card className="rounded-md p-5 space-y-5">
           <div>
             <Input
               type="title"
@@ -157,13 +283,12 @@ export default function FormDetailArticle() {
               value={title}
               onValueChange={setTitle}
               label="Judul"
-                            variant='bordered'
+              variant="bordered"
               placeholder="Enter Text"
-                            labelPlacement='outside'
+              labelPlacement="outside"
             />
             <div className="text-sm text-red-500">
-                            {(title.length === 0 && errors.title) && errors.title.message}
+              {title.length === 0 && errors.title && errors.title.message}
-
             </div>
           </div>
           <div>
@@ -171,11 +296,11 @@ export default function FormDetailArticle() {
               label="Jenis Artikel"
               {...register("article")}
               variant="bordered"
-                            labelPlacement='outside'
+              labelPlacement="outside"
               placeholder="Select"
-                            // selectedKeys={typeArticle}
+              selectedKeys={[typeArticle]}
               className="max-w-xs"
-                        // onSelectionChange={setArticle}
+              onChange={(e) => setTypeArticle(e.target.value)}
             >
               {TypeId.map((data) => (
                 <SelectItem key={data.key} value={data.key}>
@@ -196,16 +321,16 @@ export default function FormDetailArticle() {
               value={article?.slug}
               onChange={(e) => setSlug(e.target.value)}
               label="Slug"
-                            variant='bordered'
+              variant="bordered"
               placeholder="Enter Text"
-                            labelPlacement='outside'
+              labelPlacement="outside"
             />
             <div className="text-sm text-red-500">
-                            {(slug.length === 0 && errors.slug) && errors.slug.message}
+              {slug.length === 0 && errors.slug && errors.slug.message}
             </div>
           </div>
           <div>
-                        <p className='text-sm'>Tags</p>
+            <p className="text-sm">Tags</p>
             {/* <Input
                             label="Tags (Optional)"
                             {...register("tags")}
@@ -217,78 +342,45 @@ export default function FormDetailArticle() {
                             placeholder="Tambahkan tag baru dan tekan Enter"
                         /> */}
             <div className="text-sm text-red-500">
-                            {(tags.length === 0 && errors.tags) && errors.tags.message}
+              {tags.length === 0 && errors.tags && errors.tags.message}
             </div>
             <div className="flex gap-2 border border-inherit mt-2 rounded-md p-1 items-center h-11">
               {tags.map((tag, index) => (
-                                <Chip key={index} color='primary' onClose={() => handleClose('')}>
+                <Chip
+                  key={index}
+                  color="primary"
+                  onClose={() => handleClose("")}
+                >
                   {tag}
                 </Chip>
               ))}
             </div>
           </div>
           <div>
-                        <p className='pb-2'>Description</p>
+            <p className="pb-2">Description</p>
             <JoditEditor
               ref={editor}
               value={article?.description}
               // config={editorConfig}
               onChange={(newContent) => setContent(newContent)}
               className="dark:text-black"
-
             />
             <div className="text-sm text-red-500">
-                            {(content.length === 0 && errors.description) && errors.description.message}
+              {content.length === 0 &&
+                errors.description &&
+                errors.description.message}
             </div>
           </div>
-                    <div>
+
-                        <p>Attachment (Opsional)</p>
+          <div className="flex justify-end gap-3">
-                        <div className="flex items-center justify-center w-full pt-2 ">
-                            <label
-                                htmlFor="dropzone-file"
-                                className="flex flex-col items-center justify-center w-full h-36 border border-gray-100 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-200"
-                            >
-                                <div className="flex flex-col items-center justify-center pt-5 pb-6 ">
-                                    <svg
-                                        className="w-10 h-10 mb-3 text-gray-400"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth="2"
-                                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                                        ></path>
-                                    </svg>
-                                    <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
-                                        Drag and drop files here
-                                    </p>
-                                    <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
-                                        {/* or{" "} */}
-                                        <span className="font-semibold underline text-amber-800">
-                                            Click to upload
-                                        </span>
-                                    </p>
-                                </div>
-                                <input id="dropzone-file" type="file" />
-                            </label>
-                        </div>
-                    </div>
-                    <div className='flex justify-end gap-3'>
             <Link href={`/admin/master-role`}>
-                            <Button
+              <Button color="danger" variant="ghost">
-                                color='danger'
-                                variant="ghost"
-                            >
                 Cancel
               </Button>
             </Link>
             <Button
               // type="submit"
-                            color='primary'
+              color="primary"
               variant="solid"
             >
               Publish
@@ -297,5 +389,5 @@ export default function FormDetailArticle() {
         </Card>
       </form>
     </div>
-    )
+  );
 }

components/form/form-edit-article.tsx

@@ -27,6 +27,17 @@ const articleSchema = z.object({
   description: z.string().min(1, { message: "Required" }).optional(),
 });
 
+const TypeId = [
+  {
+    key: "1",
+    label: "Article",
+  },
+  {
+    key: "2",
+    label: "Magazine",
+  },
+];
+
 export default function FormUpdateArticle() {
   // const [id, setId] = useState<any>();
   const [title, setTitle] = useState<string>("");
@@ -57,28 +68,6 @@ export default function FormUpdateArticle() {
     readonly: true,
   };
 
-  const TypeId = [
-    {
-      key: 1,
-      label: "Article",
-    },
-    {
-      key: 2,
-      label: "Magazine",
-    },
-  ];
-
-  const CategoryArticle = [
-    {
-      key: 1,
-      label: "Article",
-    },
-    {
-      key: 2,
-      label: "Magazine",
-    },
-  ];
-
   const handleClose = (tagsToRemove: string) => {
     setTags(tags.filter((tag) => tag !== tagsToRemove));
     if (tags.length === 1) {
@@ -105,7 +94,7 @@ export default function FormUpdateArticle() {
       const res = await getArticleById(id);
       setArticle(res.data?.data);
       setTitle(res.data?.data?.title);
-      setTypeId(res.data?.data?.typeId);
+      setTypeId(String(res.data?.data?.typeId));
       setSlug(res.data?.data?.slug);
       const tagsArray = res.data.data?.tags
         ? res.data.data.tags.split(",")
@@ -248,7 +237,7 @@ export default function FormUpdateArticle() {
                 errors.description.message}
             </div>
           </div>
-          <div>
+          <div className="w-full">
             <p>Attachment (Opsional)</p>
             <div className="flex items-center justify-center w-full pt-2 ">
               <label
@@ -274,12 +263,18 @@ export default function FormUpdateArticle() {
                     Drag and drop files here
                   </p>
                   <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                    {/* or{" "} */}
                     <span className="font-semibold underline text-amber-800">
                       Click to upload
                     </span>
                   </p>
                 </div>
-                <input id="dropzone-file" type="file" />
+                <input
+                  id="dropzone-file"
+                  type="file"
+                  className="hidden"
+                  //   onChange={handleImageChange}
+                />
               </label>
             </div>
           </div>

components/landing/NewsTicker.tsx

@@ -0,0 +1,79 @@
+"use client";
+import { useEffect, useState } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons";
+import { getListArticle } from "@/service/article";
+import { convertDateFormat } from "@/utils/global";
+
+export default function NewsTicker() {
+  const [article, setArticle] = useState<any>([]);
+  const [currentNewsIndex, setCurrentNewsIndex] = useState(0);
+  const [animate, setAnimate] = useState(false);
+
+  useEffect(() => {
+    async function getArticle() {
+      const req = { page: 1, search: "", limit: "10" };
+      const response = await getListArticle(req);
+      setArticle(response?.data?.data);
+    }
+    getArticle();
+  }, []);
+
+  const triggerAnimation = (newIndex: number) => {
+    setAnimate(true);
+    setTimeout(() => {
+      setCurrentNewsIndex(newIndex);
+      setAnimate(false);
+    }, 300);
+  };
+
+  const handlePrev = () => {
+    const newIndex = (currentNewsIndex - 1 + article.length) % article.length;
+    triggerAnimation(newIndex);
+  };
+
+  const handleNext = () => {
+    const newIndex = (currentNewsIndex + 1) % article.length;
+    triggerAnimation(newIndex);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      triggerAnimation((currentNewsIndex + 1) % article.length);
+    }, 7000);
+
+    return () => clearInterval(interval);
+  }, [article.length]);
+
+  return (
+    <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between bg-stone-800">
+      <div className="relative px-4 py-2 font-semibold text-sm flex items-center bg-amber-500 text-white w-[10%]">
+        <span className="mr-2 "></span> BREAKING NEWS
+        <div className="absolute right-0 top-0 h-full w-4 bg-amber-500 transform translate-x-full clip-path-triangle"></div>
+      </div>
+      <div
+        className={`w-full text-white px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
+          animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
+        }`}
+      >
+        <p>{article[currentNewsIndex]?.title}</p>
+        <p className="text-xs">
+          {convertDateFormat(article[currentNewsIndex]?.createdAt)}
+        </p>
+      </div>
+      <div className="flex flex-row text-white h-full gap-[1px]">
+        <a
+          className="bg-amber-500 h-full flex items-center"
+          onClick={() => handlePrev()}
+        >
+          <ChevronLeftIcon />
+        </a>
+        <a
+          className="bg-amber-500 h-full flex items-center"
+          onClick={() => handleNext()}
+        >
+          <ChevronRightIcon />
+        </a>
+      </div>
+    </div>
+  );
+}

components/layout/humas-layout.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import NavbarHumas from "./navbar/NavbarHumas";
 import Footer from "../landing/Footer";
+import NewsTicker from "../landing/NewsTicker";
 
 interface Props {
   children: React.ReactNode;
@@ -10,6 +11,8 @@ export const HumasLayout = ({ children }: Props) => {
   return (
     <section className="flex flex-col">
       <NavbarHumas />
+      <NewsTicker />
+
       {children}
       <Footer />
     </section>

components/layout/navbar/NavbarHumas.tsx

@@ -110,80 +110,9 @@ export default function NavbarHumas() {
       classNames={{ wrapper: "px-0" }}
     >
       <div className="w-full h-full flex">
-        <div className="w-full hidden md:flex flex-col pt-3">
+        <div className="w-full hidden md:flex flex-row pt-3">
-          <div className="flex items-center justify-end gap-1 md:gap-5 px-[50px]">
-            <div className="flex gap-1 lg:gap-3 items-center">
-              <Link
-                href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
-                target="_blank"
-              >
-                <div className="bg-white p-1.5 rounded-md">
-                  <FbIconNav size={16} />
-                </div>
-              </Link>
-              <Link
-                href="https://www.instagram.com/divisihumaspolri/"
-                target="_blank"
-              >
-                <IgIcon size={27} />
-              </Link>
-              <Link
-                href="https://www.youtube.com/user/pidhumaspolri"
-                target="_blank"
-              >
-                <YtIcon size={27} />
-              </Link>
-              <Link href="https://twitter.com/DivHumas_Polri" target="_blank">
-                <TwIcon size={27} />
-              </Link>
-              <Link
-                href="https://www.tiktok.com/@divhumas_polri"
-                target="_blank"
-              >
-                <TtIcon size={27} />
-              </Link>
-              {token ? (
-                // <Button className="bg-[#DD8306]" onPress={onLogout}>
-                //   Logout
-                // </Button>
-                <Dropdown>
-                  <DropdownTrigger>
-                    <Button variant="bordered">Menu</Button>
-                  </DropdownTrigger>
-                  <DropdownMenu aria-label="Static Actions">
-                    <DropdownItem
-                      key="dashboard"
-                      onPress={() => router.push("/admin/dashboard")}
-                    >
-                      Dashboard
-                    </DropdownItem>
-                    <DropdownItem key="dashboard">Profile</DropdownItem>
-
-                    <DropdownItem
-                      key="logout"
-                      className="text-danger"
-                      color="danger"
-                      onPress={onLogout}
-                    >
-                      Logout
-                    </DropdownItem>
-                  </DropdownMenu>
-                </Dropdown>
-              ) : (
-                <Link href="/auth">
-                  <Button
-                    variant="bordered"
-                    className="font-bold text-black border-black dark:border-white dark:text-white px-0 pl-2 rounded-md py-0"
-                    endContent={<ChevronRightIcon />}
-                  >
-                    {t("masuk")}
-                  </Button>
-                </Link>
-              )}
-            </div>
-          </div>
           <div
-            className={`flex flex-wrap items-center justify-between px-[50px] ${
+            className={`flex flex-wrap items-center justify-between px-[50px] w-full ${
               isOpen ? "bg-white dark:bg-[#1F1A17]" : "bg-transparent"
             }`}
           >
@@ -1053,6 +982,76 @@ export default function NavbarHumas() {
                 </DropdownItem>
               </DropdownMenu>
             </Dropdown>
+            <div className="flex flex-col gap-2">
+              <div className="flex gap-1 lg:gap-3 items-center">
+                <Link
+                  href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
+                  target="_blank"
+                >
+                  <div className="bg-white p-1.5 rounded-md">
+                    <FbIconNav size={16} />
+                  </div>
+                </Link>
+                <Link
+                  href="https://www.instagram.com/divisihumaspolri/"
+                  target="_blank"
+                >
+                  <IgIcon size={27} />
+                </Link>
+                <Link
+                  href="https://www.youtube.com/user/pidhumaspolri"
+                  target="_blank"
+                >
+                  <YtIcon size={27} />
+                </Link>
+                <Link href="https://twitter.com/DivHumas_Polri" target="_blank">
+                  <TwIcon size={27} />
+                </Link>
+                <Link
+                  href="https://www.tiktok.com/@divhumas_polri"
+                  target="_blank"
+                >
+                  <TtIcon size={27} />
+                </Link>
+                {token ? (
+                  // <Button className="bg-[#DD8306]" onPress={onLogout}>
+                  //   Logout
+                  // </Button>
+                  <Dropdown>
+                    <DropdownTrigger>
+                      <Button variant="bordered">Menu</Button>
+                    </DropdownTrigger>
+                    <DropdownMenu aria-label="Static Actions">
+                      <DropdownItem
+                        key="dashboard"
+                        onPress={() => router.push("/admin/dashboard")}
+                      >
+                        Dashboard
+                      </DropdownItem>
+                      <DropdownItem key="dashboard">Profile</DropdownItem>
+
+                      <DropdownItem
+                        key="logout"
+                        className="text-danger"
+                        color="danger"
+                        onPress={onLogout}
+                      >
+                        Logout
+                      </DropdownItem>
+                    </DropdownMenu>
+                  </Dropdown>
+                ) : (
+                  <Link href="/auth">
+                    <Button
+                      variant="bordered"
+                      className="font-bold text-black border-black dark:border-white dark:text-white px-0 pl-2 rounded-md py-0"
+                      endContent={<ChevronRightIcon />}
+                    >
+                      {t("masuk")}
+                    </Button>
+                  </Link>
+                )}
+              </div>
               <div className="flex items-center gap-3">
                 <div className="hidden lg:block">{searchInput}</div>
 
@@ -1070,6 +1069,7 @@ export default function NavbarHumas() {
               </div>
             </div>
           </div>
+        </div>
         <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
           <ThemeSwitch />
           <NavbarMenuToggle />

styles/globals.css

@@ -2,13 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-
 /* 
 *{
   border:1px solid green;
 }      */
 
-
 .custom-scrollbar::-webkit-scrollbar {
   width: 1px;
 }
@@ -34,3 +32,8 @@
   --scroll-shadow-size: 40px;
 }
 
+@layer utilities {
+  .clip-path-triangle {
+    clip-path: polygon(0 0, 100% 50%, 0 100%);
+  }
+}