feat:add content rewrite, add create AI

This commit is contained in:
Anang Yusman 2025-01-01 23:27:38 +08:00
parent 5a8d36b9f3
commit 3f1ffdd15a
4 changed files with 556 additions and 196 deletions

View File

@ -321,9 +321,10 @@ export default function FormImage() {
}; };
const save = async (data: ImageSchema) => { const save = async (data: ImageSchema) => {
const finalTitle = isSwitchOn ? title : data.title;
const requestData = { const requestData = {
...data, ...data,
title: data.title, title: finalTitle,
description: data.description, description: data.description,
htmlDescription: data.description, htmlDescription: data.description,
fileTypeId, fileTypeId,
@ -614,31 +615,30 @@ export default function FormImage() {
</div> </div>
<div> <div>
<div className="my-5"> <div className="my-5">
<Button <p
// variant={"outline"} // variant={"outline"}
color="primary" color="primary"
onClick={handleGenerateArtikel} onClick={handleGenerateArtikel}
className="bg-blue-500 text-white px-3 py-2 rounded-md"
> >
Generate Article Generate Article
</Button> </p>
</div> </div>
{isGeneratedArticle && ( {isGeneratedArticle && (
<div className="mt-3 pb-0"> <div className="mt-3 pb-0 flex flex-row ">
{articleIds.map((id: string, index: number) => ( {articleIds.map((id: string, index: number) => (
<Button <p
key={index} key={index}
className={`btn m-1 ${ className={`btn mr-3 ${
selectedArticleId === id selectedArticleId === id
? "btn-warning" ? "bg-green-500 text-white px-3 py-2 rounded-md"
: "btn-success" : "border-2 border-green-500 text-green-500 px-3 py-2 rounded-md"
}`} }`}
onClick={() => handleArticleIdClick(id)} onClick={() => handleArticleIdClick(id)}
variant={"outline"}
color="success"
> >
{id} {id}
</Button> </p>
))} ))}
</div> </div>
)} )}

View File

@ -45,6 +45,8 @@ import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules"; import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
import { request } from "http"; import { request } from "http";
import { generateDataArticle, getDetailArticle } from "@/service/content/ai";
import { getCookiesDecrypt } from "@/lib/utils";
const imageSchema = z.object({ const imageSchema = z.object({
contentTitle: z.string().min(1, { message: "Judul diperlukan" }), contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
@ -53,6 +55,9 @@ const imageSchema = z.object({
.min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }), .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
contentCreator: z.string().min(1, { message: "Creator diperlukan" }), contentCreator: z.string().min(1, { message: "Creator diperlukan" }),
// tags: z.string().min(1, { message: "Judul diperlukan" }), // tags: z.string().min(1, { message: "Judul diperlukan" }),
contentRewriteDescription: z
.string()
.min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
}); });
type Category = { type Category = {
@ -99,6 +104,17 @@ export default function FormConvertSPIT() {
const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]); const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
const [detailThumb, setDetailThumb] = useState<any>([]); const [detailThumb, setDetailThumb] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null); const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
const [title, setTitle] = useState<string>("");
const roleId = getCookiesDecrypt("urie");
const [articleIds, setArticleIds] = useState<string[]>([]);
const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
const [articleBody, setArticleBody] = useState<string>("");
const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
null
);
const [detailData, setDetailData] = useState<any>(null);
const [selectedFileType, setSelectedFileType] = useState("original");
const [selectedTarget, setSelectedTarget] = useState(""); const [selectedTarget, setSelectedTarget] = useState("");
const [unitSelection, setUnitSelection] = useState({ const [unitSelection, setUnitSelection] = useState({
@ -232,11 +248,15 @@ export default function FormConvertSPIT() {
}; };
const save = async (data: any) => { const save = async (data: any) => {
const description =
selectedFileType === "original"
? data.contentDescription
: data.contentRewriteDescription;
const requestData = { const requestData = {
spitId: id, spitId: id,
title: data.contentTitle, title: data.contentTitle,
description: data.contentDescription, description,
htmlDescription: data.contentDescription, htmlDescription: description,
tags: "siap", tags: "siap",
categoryId: selectedCategoryId, categoryId: selectedCategoryId,
publishedFor: "6", publishedFor: "6",
@ -274,6 +294,72 @@ export default function FormConvertSPIT() {
}); });
}; };
const [showRewriteEditor, setShowRewriteEditor] = useState(false);
// const handleRewriteClick = () => {
// setShowRewriteEditor(true);
// };
const handleRewriteClick = async () => {
const request = {
advConfig: selectedAdvConfig,
style: "friendly",
website: "None",
connectToWeb: true,
lang: "id",
pointOfView: "None",
title: detail?.contentTitle,
imageSource: "Web",
mainKeyword: detail?.contentTitle,
additionalKeywords: detail?.contentTitle,
targetCountry: null,
articleSize: "news",
projectId: 2,
createdBy: roleId,
clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
};
const res = await generateDataArticle(request);
close();
if (res.error) {
console.error(res.message);
return false;
}
const newArticleId = res?.data?.data?.id;
setIsGeneratedArticle(true);
setArticleIds((prevIds: string[]) => {
if (prevIds.length < 5) {
return [...prevIds, newArticleId];
} else {
const updatedIds = [...prevIds];
updatedIds[4] = newArticleId;
return updatedIds;
}
});
Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
setShowRewriteEditor(true);
};
const handleArticleIdClick = async (id: string) => {
const res = await getDetailArticle(id);
const articleData = res?.data?.data;
const cleanArticleBody = articleData?.articleBody?.replace(
/<img[^>]*>/g,
""
);
const articleImagesData = articleData?.imagesUrl?.split(",");
setArticleBody(cleanArticleBody || "");
setDetailData(articleData);
setSelectedArticleId(id);
// setArticleImages(articleImagesData || []);
};
return ( return (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
{detail !== undefined ? ( {detail !== undefined ? (
@ -330,7 +416,19 @@ export default function FormConvertSPIT() {
</Select> </Select>
</div> </div>
</div> </div>
<div>
<RadioGroup
onValueChange={(value) => setSelectedFileType(value)}
value={selectedFileType}
>
<div className="flex items-center space-x-2">
<RadioGroupItem value="original" id="original-file" />
<Label htmlFor="original-file">
Select Original File
</Label>
</div>
<div>
<div className="py-3"> <div className="py-3">
<Label>Deskripsi</Label> <Label>Deskripsi</Label>
<Controller <Controller
@ -351,13 +449,76 @@ export default function FormConvertSPIT() {
</p> </p>
)} )}
</div> </div>
<div className="my-5"> <div className="my-2">
<Button <p
// variant={"outline"} onClick={handleRewriteClick}
color="primary" className="bg-blue-500 text-white py-2 px-4 rounded w-[200px]"
> >
Content Rewrite Content Rewrite
</Button> </p>
</div>
{showRewriteEditor && (
<div>
{isGeneratedArticle && (
<div className="mt-3 pb-0 flex flex-row ">
{articleIds.map((id: string, index: number) => (
// <Button
// key={index}
// className={`btn mr-2 ${
// selectedArticleId === id
// ? "btn-warning"
// : "btn-success"
// }`}
// onClick={() => handleArticleIdClick(id)}
// variant={"outline"}
// color="success"
// >
// {id}
// </Button>
<p
key={index}
className={`btn mr-3 ${
selectedArticleId === id
? "bg-green-500 text-white px-3 py-2 rounded-md"
: "border-2 border-green-500 text-green-500 px-3 py-2 rounded-md"
}`}
onClick={() => handleArticleIdClick(id)}
>
{id}
</p>
))}
</div>
)}
<div className="flex items-center space-x-2 mt-3">
<RadioGroupItem value="rewrite" id="rewrite-file" />
<Label htmlFor="rewrite-file">
Select File Hasil Rewrite
</Label>
</div>
<div className="py-3">
<Label>File hasil Rewrite</Label>
<Controller
control={control}
name="contentRewriteDescription"
render={({ field: { onChange, value } }) => (
<JoditEditor
ref={editor}
value={articleBody || value}
onChange={onChange}
className="dark:text-black"
/>
)}
/>
{errors.contentRewriteDescription?.message && (
<p className="text-red-400 text-sm">
{errors.contentRewriteDescription.message}
</p>
)}
</div>
</div>
)}
</div>
</RadioGroup>
</div> </div>
<div> <div>
<Label className="text-xl text-black">File Media</Label> <Label className="text-xl text-black">File Media</Label>

View File

@ -6,8 +6,23 @@ import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
import { useParams, usePathname, useRouter } from "next/navigation"; import { useParams, usePathname, useRouter } from "next/navigation";
import { generateLocalizedPath } from "@/utils/globals"; import { generateLocalizedPath } from "@/utils/globals";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"; import {
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu"; NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import Image from "next/image"; import Image from "next/image";
import { Icon } from "../ui/icon"; import { Icon } from "../ui/icon";
import { getCookiesDecrypt } from "@/lib/utils"; import { getCookiesDecrypt } from "@/lib/utils";
@ -69,24 +84,46 @@ const Navbar = () => {
initState(); initState();
}, []); }, []);
return ( return (
<div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50"> <div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50">
<div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3"> <div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3">
{/* Logo */} {/* Logo */}
<Link href="/" className="flex items-center"> <Link href="/" className="flex items-center">
<img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-fit h-20 md:h-24" /> <img
src="/assets/mediahub-logo.gif"
alt="Media Hub Logo"
className="w-fit h-20 md:h-24"
/>
</Link> </Link>
{/* Mobile Menu Toggle */} {/* Mobile Menu Toggle */}
<button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}> <button
className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden"
onClick={() => setMenuOpen(!menuOpen)}
>
{menuOpen ? ( {menuOpen ? (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg
<path fill="#000" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" /> xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="#000"
d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z"
/>
</svg> </svg>
) : ( ) : (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg
<path fill="#000" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" /> xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="#000"
d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z"
/>
</svg> </svg>
)} )}
</button> </button>
@ -99,7 +136,14 @@ const Navbar = () => {
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger> <NavigationMenuTrigger>
<a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer"> <a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
<svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
className="mx-2 dark:"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z" d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
fill="currentColor" fill="currentColor"
@ -109,25 +153,56 @@ const Navbar = () => {
</a> </a>
</NavigationMenuTrigger> </NavigationMenuTrigger>
<NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full"> <NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 "> <NavigationMenuLink
onClick={() =>
router.push(
generateLocalizedPath("/video/filter", String(locale))
)
}
className="flex items-start gap-1.5 p-2 "
>
<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 justify-center items-center px-5 py-2 cursor-pointer">
<FiYoutube className="mr-2" /> <FiYoutube className="mr-2" />
Video Video
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 "> <NavigationMenuLink
onClick={() =>
router.push(
generateLocalizedPath("/audio/filter", String(locale))
)
}
className="flex place-items-start gap-1.5 p-2 "
>
<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 justify-center items-center px-5 py-2 cursor-pointer">
<FiMusic className="mr-2" /> <FiMusic className="mr-2" />
Audio Audio
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2"> <NavigationMenuLink
onClick={() =>
router.push(
generateLocalizedPath("/image/filter", String(locale))
)
}
className="flex place-items-start gap-1.5 p-2"
>
<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 justify-center items-center px-5 py-2 cursor-pointer">
<FiImage className="mr-2" /> <FiImage className="mr-2" />
Foto Foto
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2"> <NavigationMenuLink
onClick={() =>
router.push(
generateLocalizedPath(
"/document/filter",
String(locale)
)
)
}
className="flex place-items-start gap-1.5 p-2"
>
<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 justify-center items-center px-5 py-2 cursor-pointer">
<FiFile className="mr-2" /> <FiFile className="mr-2" />
Teks Teks
@ -139,7 +214,14 @@ const Navbar = () => {
<Link href="/schedule" legacyBehavior passHref> <Link href="/schedule" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}> <NavigationMenuLink className={navigationMenuTriggerStyle()}>
<span> <span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
className="mr-2"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z" d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
fill="currentColor" fill="currentColor"
@ -154,7 +236,14 @@ const Navbar = () => {
<Link href="/indeks" legacyBehavior passHref> <Link href="/indeks" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}> <NavigationMenuLink className={navigationMenuTriggerStyle()}>
<span> <span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
className="mr-2"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
@ -176,22 +265,40 @@ const Navbar = () => {
</Link> </Link>
<div className="flex items-center space-x-1 "> <div className="flex items-center space-x-1 ">
<a href="https://tvradio.polri.go.id/"> <a href="https://tvradio.polri.go.id/">
<img src="/assets/polriTv.png" className="w-auto lg:max-w-screen-lg h-10 flex-auto " /> <img
src="/assets/polriTv.png"
className="w-auto lg:max-w-screen-lg h-10 flex-auto "
/>
</a> </a>
</div> </div>
<div className="relative inline-block text-left"> <div className="relative inline-block text-left">
{/* Tombol Utama */} {/* Tombol Utama */}
<button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg"> <button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg"
>
<img <img
src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"} src={
language === "id"
? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg"
: "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"
}
alt={language === "id" ? "Ind" : "Eng"} alt={language === "id" ? "Ind" : "Eng"}
className="w-3 h-3" className="w-3 h-3"
/> />
<span>{language === "id" ? "Ind" : "Eng"}</span> <span>{language === "id" ? "Ind" : "Eng"}</span>
<span className="text-gray-500"> <span className="text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32"> <svg
<path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" /> xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
viewBox="0 0 32 32"
>
<path
fill="currentColor"
d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z"
/>
</svg> </svg>
</span> </span>
</button> </button>
@ -199,12 +306,30 @@ const Navbar = () => {
{/* Dropdown Menu */} {/* Dropdown Menu */}
{isOpen && ( {isOpen && (
<div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10"> <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
<button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}> <button
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" /> onClick={() => handleLanguageChange("id")}
className={`flex items-center space-x-2 w-full px-4 py-2 ${
language === "id" ? "font-medium" : ""
}`}
>
<img
src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg"
alt="Indonesia"
className="w-5 h-5"
/>
<span>Ind</span> <span>Ind</span>
</button> </button>
<button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}> <button
<img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" /> onClick={() => handleLanguageChange("en")}
className={`flex items-center space-x-2 w-full px-4 py-2 ${
language === "en" ? "font-medium" : ""
}`}
>
<img
src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"
alt="English"
className="w-5 h-5"
/>
<span>Eng</span> <span>Eng</span>
</button> </button>
</div> </div>
@ -212,9 +337,18 @@ const Navbar = () => {
</div> </div>
<ThemeSwitcher /> <ThemeSwitcher />
<div className="relative text-gray-600 dark:text-white"> <div className="relative text-gray-600 dark:text-white">
<input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" /> <input
type="text"
placeholder="Pencarian"
className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
/>
<span className="absolute left-4 top-1/2 transform -translate-y-1/2"> <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"> <svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
viewBox="0 0 24 24"
>
<path <path
fill="currentColor" fill="currentColor"
fill-rule="evenodd" fill-rule="evenodd"
@ -224,7 +358,7 @@ const Navbar = () => {
</svg> </svg>
</span> </span>
</div> </div>
<div className="flex items-center space-x-2"> {/* <div className="flex items-center space-x-2">
{fullName ? ( {fullName ? (
<> <>
<DropdownMenu> <DropdownMenu>
@ -267,16 +401,27 @@ const Navbar = () => {
</Link>{" "} </Link>{" "}
</> </>
)} )}
</div> </div> */}
{/* {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? ( {roleId === "5" ||
roleId === "6" ||
roleId === "7" ||
roleId === "8" ? (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild className="cursor-pointer"> <DropdownMenuTrigger asChild className="cursor-pointer">
{detail !== undefined ? ( {detail !== undefined ? (
<div className="flex items-center gap-3 text-default-800"> <div className="flex items-center gap-3 text-default-800">
<Image src={"https://netidhub.com/assets/img/user-avatar.png"} alt={"Image"} width={36} height={36} className="rounded-full" /> <Image
src={"/assets/avatar-profile.png"}
alt={"Image"}
width={36}
height={36}
className="rounded-full"
/>
<div> <div>
<div className="text-sm font-medium capitalize lg:block hidden">{detail?.fullname}</div> <div className="text-sm font-medium capitalize lg:block hidden">
{detail?.fullname}
</div>
<p className="text-xs">({detail?.fullname})</p> <p className="text-xs">({detail?.fullname})</p>
</div> </div>
<span className="text-base me-2.5 lg:inline-block hidden"> <span className="text-base me-2.5 lg:inline-block hidden">
@ -297,11 +442,15 @@ const Navbar = () => {
}, },
{ {
name: "Kelola Konten", name: "Kelola Konten",
icon: "heroicons:megaphone", icon: "stash:save-ribbon-duotone",
href: "/dashboard", href: "/content-management",
}, },
].map((item, index) => ( ].map((item, index) => (
<Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer"> <Link
href={item.href}
key={`info-menu-${index}`}
className="cursor-pointer"
>
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer"> <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" /> <Icon icon={item.icon} className="w-4 h-4" />
{item.name} {item.name}
@ -313,7 +462,11 @@ const Navbar = () => {
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer"> <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
<div> <div>
<Link href={"/"}> <Link href={"/"}>
<button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}> <button
type="submit"
className="w-full flex items-center gap-2"
onClick={onLogout}
>
<Icon icon="heroicons:power" className="w-4 h-4" /> <Icon icon="heroicons:power" className="w-4 h-4" />
Log out Log out
</button> </button>
@ -322,15 +475,30 @@ const Navbar = () => {
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
) : roleId === "2" || roleId === "3" || roleId === "4" || roleId === "9" || roleId === "10" || roleId === "11" || roleId === "12" || roleId === "13" ? ( ) : roleId === "2" ||
roleId === "3" ||
roleId === "4" ||
roleId === "9" ||
roleId === "10" ||
roleId === "11" ||
roleId === "12" ||
roleId === "13" ? (
// Dropdown menu for roleId === 3 // Dropdown menu for roleId === 3
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild className="cursor-pointer"> <DropdownMenuTrigger asChild className="cursor-pointer">
{detail !== undefined ? ( {detail !== undefined ? (
<div className="flex items-center gap-3 text-default-800"> <div className="flex items-center gap-3 text-default-800">
<Image src={"https://netidhub.com/assets/img/user-avatar.png"} alt={"Image"} width={36} height={36} className="rounded-full" /> <Image
src={"/assets/avatar-profile.png"}
alt={"Image"}
width={36}
height={36}
className="rounded-full"
/>
<div> <div>
<div className="text-sm font-medium capitalize lg:block hidden">{detail?.fullname}</div> <div className="text-sm font-medium capitalize lg:block hidden">
{detail?.fullname}
</div>
<p className="text-xs">({detail?.fullname})</p> <p className="text-xs">({detail?.fullname})</p>
</div> </div>
<span className="text-base me-2.5 lg:inline-block hidden"> <span className="text-base me-2.5 lg:inline-block hidden">
@ -351,11 +519,15 @@ const Navbar = () => {
}, },
{ {
name: "Dashboard", name: "Dashboard",
icon: "heroicons:megaphone", icon: "material-symbols:dashboard",
href: "/dashboard", href: "/dashboard",
}, },
].map((item, index) => ( ].map((item, index) => (
<Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer"> <Link
href={item.href}
key={`info-menu-${index}`}
className="cursor-pointer"
>
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer"> <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" /> <Icon icon={item.icon} className="w-4 h-4" />
{item.name} {item.name}
@ -367,7 +539,11 @@ const Navbar = () => {
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer"> <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
<div> <div>
<Link href={"/"}> <Link href={"/"}>
<button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}> <button
type="submit"
className="w-full flex items-center gap-2"
onClick={onLogout}
>
<Icon icon="heroicons:power" className="w-4 h-4" /> <Icon icon="heroicons:power" className="w-4 h-4" />
Log out Log out
</button> </button>
@ -379,14 +555,20 @@ const Navbar = () => {
) : ( ) : (
// Masuk and Daftar buttons for roleId === null // Masuk and Daftar buttons for roleId === null
<div className="flex justify-center items-center mx-3 gap-5"> <div className="flex justify-center items-center mx-3 gap-5">
<Link href="/auth" className="w-full lg:w-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"> <Link
href="/auth"
className="w-full lg:w-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
>
Masuk Masuk
</Link> </Link>
<Link href="#" className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white"> <Link
href="#"
className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white"
>
Daftar Daftar
</Link> </Link>
</div> </div>
)} */} )}
</div> </div>
</div> </div>
@ -398,7 +580,14 @@ const Navbar = () => {
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger> <NavigationMenuTrigger>
<a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer"> <a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
<svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
className="mx-2"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z" d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
fill="currentColor" fill="currentColor"
@ -408,25 +597,56 @@ const Navbar = () => {
</a> </a>
</NavigationMenuTrigger> </NavigationMenuTrigger>
<NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full"> <NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white"> <NavigationMenuLink
onClick={() =>
router.push(
generateLocalizedPath("/video/filter", String(locale))
)
}
className="flex items-start gap-1.5 p-2 hover:bg-white"
>
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer"> <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
<FiYoutube className="mr-2" /> <FiYoutube className="mr-2" />
Video Video
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white"> <NavigationMenuLink
onClick={() =>
router.push(
generateLocalizedPath("/audio/filter", String(locale))
)
}
className="flex place-items-start gap-1.5 p-2 hover:bg-white"
>
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer"> <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
<FiMusic className="mr-2" /> <FiMusic className="mr-2" />
Audio Audio
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white"> <NavigationMenuLink
onClick={() =>
router.push(
generateLocalizedPath("/image/filter", String(locale))
)
}
className="flex place-items-start gap-1.5 p-2 hover:bg-white"
>
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer"> <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
<FiImage className="mr-2" /> <FiImage className="mr-2" />
Foto Foto
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white"> <NavigationMenuLink
onClick={() =>
router.push(
generateLocalizedPath(
"/document/filter",
String(locale)
)
)
}
className="flex place-items-start gap-1.5 p-2 hover:bg-white"
>
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer"> <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
<FiFile className="mr-2" /> <FiFile className="mr-2" />
Teks Teks
@ -438,7 +658,14 @@ const Navbar = () => {
<Link href="/schedule" legacyBehavior passHref> <Link href="/schedule" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}> <NavigationMenuLink className={navigationMenuTriggerStyle()}>
<span> <span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
className="mr-2"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z" d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
fill="currentColor" fill="currentColor"
@ -453,7 +680,14 @@ const Navbar = () => {
<Link href="/indeks" legacyBehavior passHref> <Link href="/indeks" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}> <NavigationMenuLink className={navigationMenuTriggerStyle()}>
<span> <span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
className="mr-2"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
@ -475,21 +709,39 @@ const Navbar = () => {
</div> </div>
<div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium"> <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
<a href="https://tvradio.polri.go.id/"> <a href="https://tvradio.polri.go.id/">
<img src="/assets/polriTv.png" className="w-21 h-11 flex items-center" /> <img
src="/assets/polriTv.png"
className="w-21 h-11 flex items-center"
/>
</a> </a>
</div> </div>
<div className="relative inline-block mx-3 text-left"> <div className="relative inline-block mx-3 text-left">
{/* Tombol Utama Bahasa */} {/* Tombol Utama Bahasa */}
<button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg"> <button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg"
>
<img <img
src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"} src={
language === "id"
? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg"
: "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"
}
alt={language === "id" ? "Ind" : "Eng"} alt={language === "id" ? "Ind" : "Eng"}
className="w-3 h-3" className="w-3 h-3"
/> />
<span>{language === "id" ? "Ind" : "Eng"}</span> <span>{language === "id" ? "Ind" : "Eng"}</span>
<span className="text-gray-500"> <span className="text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32"> <svg
<path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" /> xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
viewBox="0 0 32 32"
>
<path
fill="currentColor"
d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z"
/>
</svg> </svg>
</span> </span>
</button> </button>
@ -497,12 +749,30 @@ const Navbar = () => {
{/* Dropdown Menu */} {/* Dropdown Menu */}
{isOpen && ( {isOpen && (
<div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10"> <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
<button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}> <button
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" /> onClick={() => handleLanguageChange("id")}
className={`flex items-center space-x-2 w-full px-4 py-2 ${
language === "id" ? "font-medium" : ""
}`}
>
<img
src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg"
alt="Indonesia"
className="w-5 h-5"
/>
<span>Ind</span> <span>Ind</span>
</button> </button>
<button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}> <button
<img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" /> onClick={() => handleLanguageChange("en")}
className={`flex items-center space-x-2 w-full px-4 py-2 ${
language === "en" ? "font-medium" : ""
}`}
>
<img
src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"
alt="English"
className="w-5 h-5"
/>
<span>Eng</span> <span>Eng</span>
</button> </button>
</div> </div>
@ -511,25 +781,41 @@ const Navbar = () => {
</div> </div>
<div className=" py-1 flex items-center mx-3"> <div className=" py-1 flex items-center mx-3">
<input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" /> <input
type="text"
placeholder="Pencarian"
className="border rounded-full w-full text-sm text-center text-gray-600"
/>
</div> </div>
<div className="flex justify-center items-center mx-3 gap-5"> <div className="flex justify-center items-center mx-3 gap-5">
{fullName ? ( {fullName ? (
<p>{fullName}</p> <p>{fullName}</p>
) : ( ) : (
<> <>
<Link href="/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-[#bb3523]"> <Link
href="/auth"
className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-[#bb3523]"
>
Masuk Masuk
</Link> </Link>
<Link href="#" className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white"> <Link
href="#"
className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white"
>
Daftar Daftar
</Link>{" "} </Link>{" "}
</> </>
)} )}
<Link href="/auth" className="w-full lg:w-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"> <Link
href="/auth"
className="w-full lg:w-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
>
Masuk Masuk
</Link> </Link>
<Link href="#" className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white"> <Link
href="#"
className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white"
>
Daftar Daftar
</Link> </Link>
</div> </div>

View File

@ -71,7 +71,7 @@ const ProfileInfo = () => {
{detail !== undefined ? ( {detail !== undefined ? (
<div className="flex items-center gap-3 text-default-800"> <div className="flex items-center gap-3 text-default-800">
<Image <Image
src={"https://netidhub.com/assets/img/user-avatar.png"} src={"/assets/avatar-profile.png"}
alt={"Image"} alt={"Image"}
width={36} width={36}
height={36} height={36}
@ -120,21 +120,6 @@ const ProfileInfo = () => {
icon: "heroicons:user", icon: "heroicons:user",
href: "/profile", href: "/profile",
}, },
// {
// name: "Billing",
// icon: "heroicons:megaphone",
// href: "/dashboard",
// },
// {
// name: "Settings",
// icon: "heroicons:paper-airplane",
// href: "/dashboard",
// },
// {
// name: "Keyboard shortcuts",
// icon: "heroicons:language",
// href: "/dashboard",
// },
].map((item, index) => ( ].map((item, index) => (
<Link <Link
href={item.href} href={item.href}
@ -149,79 +134,7 @@ const ProfileInfo = () => {
))} ))}
</DropdownMenuGroup> </DropdownMenuGroup>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup></DropdownMenuGroup>
{/* <Link href="/dashboard" className="cursor-pointer">
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
<Icon icon="heroicons:user-group" className="w-4 h-4" />
team
</DropdownMenuItem>
</Link>
<DropdownMenuSub>
<DropdownMenuSubTrigger className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 ">
<Icon icon="heroicons:user-plus" className="w-4 h-4" />
Invite user
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
{[
{
name: "email",
},
{
name: "message",
},
{
name: "facebook",
},
].map((item, index) => (
<Link
href="/dashboard"
key={`message-sub-${index}`}
className="cursor-pointer"
>
<DropdownMenuItem className="text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
{item.name}
</DropdownMenuItem>
</Link>
))}
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<Link 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="heroicons:variable" className="w-4 h-4" />
Github
</DropdownMenuItem>
</Link>
<DropdownMenuSub>
<DropdownMenuSubTrigger className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
<Icon icon="heroicons:phone" className="w-4 h-4" />
Support
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
{[
{
name: "portal",
},
{
name: "slack",
},
{
name: "whatsapp",
},
].map((item, index) => (
<Link href="/dashboard" key={`message-sub-${index}`}>
<DropdownMenuItem className="text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
{item.name}
</DropdownMenuItem>
</Link>
))}
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub> */}
</DropdownMenuGroup>
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer"> <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
<div> <div>
<Link href={"/auth"}> <Link href={"/auth"}>