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 (
+  return (
-        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+    <Card className="h-[96vh] rounded-md border bg-transparent">
-            <FormArticle />
+      <FormArticle />
-        </Card>
+    </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 (
+  return (
-        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+    <Card className="h-[96vh] rounded-md border bg-transparent">
-            <FormDetailArticle />
+      <FormDetailArticle />
-        </Card>
+    </Card>
-    )
+  );
 }

components/form/form-detail-article.tsx

@@ -1,212 +1,337 @@
-'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" }),
+  title: z.string().min(1, { message: "Required" }),
-    article: z.string().min(1, { message: "Required" }),
+  article: z.string().min(1, { message: "Required" }),
-    slug: z.string().min(1, { message: "Required" }),
+  slug: z.string().min(1, { message: "Required" }),
-    tags: z.string().min(0, { message: "Required" }).optional(),
+  tags: z.string().min(0, { message: "Required" }).optional(),
-    description: z.string().min(1, { 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 [id, setId] = useState<any>();
-    const [title, setTitle] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
-    const [slug, setSlug] = useState<string>("");
+  const [slug, setSlug] = useState<string>("");
-    const [tags, setTags] = useState<string[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
-    const [newTags, setNewTags] = useState<string>("");
+  const [newTags, setNewTags] = useState<string>("");
-    const editor = useRef(null);
+  const editor = useRef(null);
-    const [content, setContent] = useState('');
+  const [content, setContent] = useState("");
-    const MySwal = withReactContent(Swal);
+  const MySwal = withReactContent(Swal);
-    const [article, setArticle] = useState<any>();
+  const [article, setArticle] = useState<any>();
-    const [typeArticle, setTypeArticle] = useState<any>([]);
+  const [typeArticle, setTypeArticle] = useState("");
-    const pathname = usePathname();
+  const pathname = usePathname();
-    const splitPathname = pathname.split('/');
+  const splitPathname = pathname.split("/");
-    const id = splitPathname[splitPathname.length - 1];
+  const id = splitPathname[splitPathname.length - 1];
-    console.log(id, "pathnamesplit")
+  console.log(id, "pathnamesplit");
 
-    const formOptions = { resolver: zodResolver(articleSchema) };
+  const formOptions = { resolver: zodResolver(articleSchema) };
-    type MicroIssueSchema = z.infer<typeof articleSchema>;
+  type MicroIssueSchema = z.infer<typeof articleSchema>;
-    const {
+  const {
-        register,
+    register,
-        control,
+    control,
-        handleSubmit,
+    handleSubmit,
-        setValue,
+    setValue,
-        formState: { errors },
+    formState: { errors },
-    } = useForm<MicroIssueSchema>(formOptions);
+  } = useForm<MicroIssueSchema>(formOptions);
 
-    const editorConfig = {
+  const editorConfig = {
-        readonly: true,
+    readonly: true,
+  };
+
+  const handleClose = (tagsToRemove: string) => {
+    setTags(tags.filter((tag) => tag !== tagsToRemove));
+    if (tags.length === 1) {
+      setTags([]);
+    }
+  };
+
+  const handleAddTags = (e: any) => {
+    if (newTags.trim() !== "") {
+      setTags([...tags, newTags.trim()]);
+      setNewTags("");
+      e.preventDefault();
+    }
+  };
+
+  const handleKeyDown = (event: any) => {
+    if (event.key === "Enter") {
+      handleAddTags(event);
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      const res = await getArticleById(id);
+      setArticle(res.data?.data);
+      setTitle(res.data?.data?.title);
+      setTypeArticle(String(res.data.data?.typeId));
+      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);
     }
 
-    const TypeId = [
+    initState();
-        {
+    fetchSeoScore();
-            key: 1,
+  }, []);
-            label: "Article"
-        },
-        {
-            key: 2,
-            label: "Magazine"
-        },
-    ]
 
-    const CategoryArticle = [
+  const [totalScoreSEO, setTotalScoreSEO] = useState();
-        {
+  const [errorSEO, setErrorSEO] = useState<any>([]);
-            key: 1,
+  const [warningSEO, setWarningSEO] = useState<any>([]);
-            label: "Article"
+  const [optimizedSEO, setOptimizedSEO] = useState<any>([]);
-        },
-        {
-            key: 2,
-            label: "Magazine"
-        },
-    ]
 
-    const handleClose = (tagsToRemove: string) => {
+  const fetchSeoScore = async () => {
-        setTags(tags.filter((tag) => tag !== tagsToRemove));
+    const res = await getSeoScore("1931");
-        if (tags.length === 1) {
+    if (res.error) {
-            setTags([]);
+      error(res.message);
-        }
+      return false;
-    };
-
-    const handleAddTags = (e: any) => {
-        if (newTags.trim() !== "") {
-            setTags([...tags, newTags.trim()]);
-            setNewTags("");
-            e.preventDefault();
-        }
-    };
-
-    const handleKeyDown = (event: any) => {
-        if (event.key === "Enter") {
-            handleAddTags(event);
-        }
-    };
-
-
-    useEffect(() => {
-        async function initState() {
-            const res = await getArticleById(id);
-            setArticle(res.data?.data);
-            setTitle(res.data?.data?.title)
-            setTypeArticle(res.data.data?.type_id)
-            const tagsArray = res.data.data?.tags ? res.data.data.tags.split(",") : [];
-            setTags(tagsArray);
-
-            console.log("Data Aritcle", tagsArray);
-        }
-
-        initState();
-    }, []);
-
-
-    async function save(data: any,) {
-        const formData = {
-            id: id,
-            title: title,
-            typeId: parseInt(String(Array.from(article)[0])),
-            slug: slug,
-            tags: tags.join(','),
-            description: content,
-            htmlDescription: content
-        };
-
-        console.log("Form Data:", formData);
-        // const response = await createArticle(formData);
-
-        // if (response?.error) {
-        //     error(response.message);
-        //     return false;
-        // }
-    };
-
-    async function onSubmit(data: any) {
-        MySwal.fire({
-            title: "Simpan Data",
-            text: "",
-            icon: "warning",
-            showCancelButton: true,
-            cancelButtonColor: "#d33",
-            confirmButtonColor: "#3085d6",
-            confirmButtonText: "Simpan",
-        }).then((result) => {
-            if (result.isConfirmed) {
-                save(data);
-            }
-        });
     }
-    return (
+    setTotalScoreSEO(res.data.data?.seo_analysis?.score || 0);
-        <div className='mx-5 my-5 overflow-y-auto'>
+    let errorList: any[] = [
-            <form method="POST" onSubmit={handleSubmit(onSubmit)}>
+      ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.error,
-                <Card className='rounded-md p-5 space-y-5'>
+      ...res.data.data?.seo_analysis?.analysis?.content_quality?.error,
-                    <div>
+    ];
-                        <Input
+    setErrorSEO(errorList);
-                            type="title"
+    let warningList: any[] = [
-                            {...register("title")}
+      ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.warning,
-                            isReadOnly
+      ...res.data.data?.seo_analysis?.analysis?.content_quality?.warning,
-                            value={title}
+    ];
-                            onValueChange={setTitle}
+    setWarningSEO(warningList);
-                            label="Judul"
+    let optimizedList: any[] = [
-                            variant='bordered'
+      ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.optimized,
-                            placeholder="Enter Text"
+      ...res.data.data?.seo_analysis?.analysis?.content_quality?.optimized,
-                            labelPlacement='outside'
+    ];
-                        />
+    setOptimizedSEO(optimizedList);
-                        <div className="text-sm text-red-500">
+  };
-                            {(title.length === 0 && errors.title) && errors.title.message}
 
-                        </div>
+  async function save(data: any) {
-                    </div>
+    const formData = {
-                    <div>
+      id: id,
-                        <Select
+      title: title,
-                            label="Jenis Artikel"
+      typeId: parseInt(String(Array.from(article)[0])),
-                            {...register("article")}
+      slug: slug,
-                            variant="bordered"
+      tags: tags.join(","),
-                            labelPlacement='outside'
+      description: content,
-                            placeholder="Select"
+      htmlDescription: content,
-                            // selectedKeys={typeArticle}
+    };
-                            className="max-w-xs"
+
-                        // onSelectionChange={setArticle}
+    console.log("Form Data:", formData);
-                        >
+    // const response = await createArticle(formData);
-                            {TypeId.map((data) => (
+
-                                <SelectItem key={data.key} value={data.key}>
+    // if (response?.error) {
-                                    {data.label}
+    //     error(response.message);
-                                </SelectItem>
+    //     return false;
-                            ))}
+    // }
-                        </Select>
+  }
-                        <div className="text-sm text-red-500">
+
-                            {errors.article?.message}
+  async function onSubmit(data: any) {
-                        </div>
+    MySwal.fire({
-                        {/* <p>{article}</p> */}
+      title: "Simpan Data",
-                    </div>
+      text: "",
-                    <div>
+      icon: "warning",
-                        <Input
+      showCancelButton: true,
-                            isReadOnly
+      cancelButtonColor: "#d33",
-                            type="text"
+      confirmButtonColor: "#3085d6",
-                            {...register("slug")}
+      confirmButtonText: "Simpan",
-                            value={article?.slug}
+    }).then((result) => {
-                            onChange={(e) => setSlug(e.target.value)}
+      if (result.isConfirmed) {
-                            label="Slug"
+        save(data);
-                            variant='bordered'
+      }
-                            placeholder="Enter Text"
+    });
-                            labelPlacement='outside'
+  }
-                        />
+  return (
-                        <div className="text-sm text-red-500">
+    <div className="mx-5 my-5 overflow-y-auto">
-                            {(slug.length === 0 && errors.slug) && errors.slug.message}
+      <div className="text-black px-3 flex flex-col rounded-md gap-3">
-                        </div>
+        <p className="font-semibold text-lg"> SEO Score</p>
-                    </div>
+        <div className="flex flex-row gap-5 w-full">
-                    <div>
+          <CircularProgress
-                        <p className='text-sm'>Tags</p>
+            aria-label=""
-                        {/* <Input
+            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">
+          <div>
+            <Input
+              type="title"
+              {...register("title")}
+              isReadOnly
+              value={title}
+              onValueChange={setTitle}
+              label="Judul"
+              variant="bordered"
+              placeholder="Enter Text"
+              labelPlacement="outside"
+            />
+            <div className="text-sm text-red-500">
+              {title.length === 0 && errors.title && errors.title.message}
+            </div>
+          </div>
+          <div>
+            <Select
+              label="Jenis Artikel"
+              {...register("article")}
+              variant="bordered"
+              labelPlacement="outside"
+              placeholder="Select"
+              selectedKeys={[typeArticle]}
+              className="max-w-xs"
+              onChange={(e) => setTypeArticle(e.target.value)}
+            >
+              {TypeId.map((data) => (
+                <SelectItem key={data.key} value={data.key}>
+                  {data.label}
+                </SelectItem>
+              ))}
+            </Select>
+            <div className="text-sm text-red-500">
+              {errors.article?.message}
+            </div>
+            {/* <p>{article}</p> */}
+          </div>
+          <div>
+            <Input
+              isReadOnly
+              type="text"
+              {...register("slug")}
+              value={article?.slug}
+              onChange={(e) => setSlug(e.target.value)}
+              label="Slug"
+              variant="bordered"
+              placeholder="Enter Text"
+              labelPlacement="outside"
+            />
+            <div className="text-sm text-red-500">
+              {slug.length === 0 && errors.slug && errors.slug.message}
+            </div>
+          </div>
+          <div>
+            <p className="text-sm">Tags</p>
+            {/* <Input
                             label="Tags (Optional)"
                             {...register("tags")}
                             labelPlacement='outside'
@@ -216,86 +341,53 @@ export default function FormDetailArticle() {
                             onKeyDown={handleKeyDown}
                             placeholder="Tambahkan tag baru dan tekan Enter"
                         /> */}
-                        <div className="text-sm text-red-500">
+            <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>
-                        <div className="flex gap-2 border border-inherit mt-2 rounded-md p-1 items-center h-11">
+            <div className="flex gap-2 border border-inherit mt-2 rounded-md p-1 items-center h-11">
-                            {tags.map((tag, index) => (
+              {tags.map((tag, index) => (
-                                <Chip key={index} color='primary' onClose={() => handleClose('')}>
+                <Chip
-                                    {tag}
+                  key={index}
-                                </Chip>
+                  color="primary"
-                            ))}
+                  onClose={() => handleClose("")}
-                        </div>
+                >
-                    </div>
+                  {tag}
-                    <div>
+                </Chip>
-                        <p className='pb-2'>Description</p>
+              ))}
-                        <JoditEditor
+            </div>
-                            ref={editor}
+          </div>
-                            value={article?.description}
+          <div>
-                            // config={editorConfig}
+            <p className="pb-2">Description</p>
-                            onChange={(newContent) => setContent(newContent)}
+            <JoditEditor
-                            className="dark:text-black"
+              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}
+            </div>
+          </div>
 
-                        />
+          <div className="flex justify-end gap-3">
-                        <div className="text-sm text-red-500">
+            <Link href={`/admin/master-role`}>
-                            {(content.length === 0 && errors.description) && errors.description.message}
+              <Button color="danger" variant="ghost">
-                        </div>
+                Cancel
-                    </div>
+              </Button>
-                    <div>
+            </Link>
-                        <p>Attachment (Opsional)</p>
+            <Button
-                        <div className="flex items-center justify-center w-full pt-2 ">
+              // type="submit"
-                            <label
+              color="primary"
-                                htmlFor="dropzone-file"
+              variant="solid"
-                                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"
+            >
-                            >
+              Publish
-                                <div className="flex flex-col items-center justify-center pt-5 pb-6 ">
+            </Button>
-                                    <svg
+          </div>
-                                        className="w-10 h-10 mb-3 text-gray-400"
+        </Card>
-                                        fill="none"
+      </form>
-                                        stroke="currentColor"
+    </div>
-                                        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
-                                color='danger'
-                                variant="ghost"
-                            >
-                                Cancel
-                            </Button>
-                        </Link>
-                        <Button
-                            // type="submit"
-                            color='primary'
-                            variant="solid"
-                        >
-                            Publish
-                        </Button>
-                    </div>
-                </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,19 +982,90 @@ export default function NavbarHumas() {
                 </DropdownItem>
               </DropdownMenu>
             </Dropdown>
-            <div className="flex items-center gap-3">
+            <div className="flex flex-col gap-2">
-              <div className="hidden lg:block">{searchInput}</div>
+              <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>
 
-              <a
+                      <DropdownItem
-                className="cursor-pointer"
+                        key="logout"
-                onClick={() =>
+                        className="text-danger"
-                  language === "id" ? setLanguage("en") : setLanguage("id")
+                        color="danger"
-                }
+                        onPress={onLogout}
-              >
+                      >
-                {language === "id" ? <IdnIcon /> : <UKIcon />}
+                        Logout
-              </a>
+                      </DropdownItem>
-              <div>
+                    </DropdownMenu>
-                <ThemeSwitch />
+                  </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>
+
+                <a
+                  className="cursor-pointer"
+                  onClick={() =>
+                    language === "id" ? setLanguage("en") : setLanguage("id")
+                  }
+                >
+                  {language === "id" ? <IdnIcon /> : <UKIcon />}
+                </a>
+                <div>
+                  <ThemeSwitch />
+                </div>
               </div>
             </div>
           </div>

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%);
+  }
+}