mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add api and fix ui

This commit is contained in:
sabdayagra 2024-12-20 22:52:53 +07:00
parent b4f6752c1a
commit 3b9946a10f
15 changed files with 430 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,14 +44,14 @@ const DetailDocument = () => {
<div className="rounded-md overflow-hidden md:flex"> <div className="rounded-md overflow-hidden md:flex">
{/* Bagian Kiri */} {/* Bagian Kiri */}
<div className="md:w-3/4"> <div className="md:w-3/4">
<div className="relative h-full rounded-lg bg-gray-600"> <div className="relative h-full rounded-lg bg-[#f7f7f7]">
<img src="/assets/text-icon.png" className="flex items-center self-center" width={40} height={40} /> <img src="/assets/text-icon.png" className="flex items-center self-center" width={40} height={40} />
<div className="absolute top-4 left-4"></div> <div className="absolute top-4 left-4"></div>
</div> </div>
</div> </div>
{/* Bagian Kanan */} {/* Bagian Kanan */}
<div className="md:w-1/4 p-4 bg-gray-300 rounded-lg mx-4"> <div className="md:w-1/4 p-4 bg-[#f7f7f7] rounded-lg mx-4">
<div className="flex flex-col mb-3 items-center justify-center cursor-pointer"> <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
<path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" /> <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@ -125,11 +125,13 @@ const DetailDocument = () => {
</div> </div>
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 gap-5 p-10 bg-gray-300"> <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-20">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex items-start justify-center" /> <Textarea placeholder="Type your comments here." className="flex w-full" />
<button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button> <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
</div> </div>
</div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="px-4"> <div className="px-4">

15
app/[locale]/(public)/document/filter/page.tsx
View File

@ -105,7 +105,7 @@ const DocumentPage = () => {
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
{/* Header */} {/* Header */}
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200"> <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7]">
<p> <p>
{" "} {" "}
Teks {">"} <span className="font-bold">Semua Teks</span> Teks {">"} <span className="font-bold">Semua Teks</span>
@ -116,8 +116,11 @@ const DocumentPage = () => {
{/* Left */} {/* Left */}
<div className="flex flex-col lg:flex-row gap-6 p-4"> <div className="flex flex-col lg:flex-row gap-6 p-4">
{/* Sidebar Kiri */} {/* Sidebar Kiri */}
<div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md"> <div className="lg:w-1/4 w-full bg-[#f7f7f7] p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4">Filter</h2> <h2 className="text-xl font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="space-y-6"> <div className="space-y-6">
{/* Pencarian */} {/* Pencarian */}
<div> <div>
@ -203,12 +206,12 @@ const DocumentPage = () => {
</svg> </svg>
</div> </div>
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1 gap-2">
<div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm"> <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center gap-2 text-xs">
{formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518 {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
</div> </div>
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.title}</div> <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.title}</div>
<div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500"> <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
<path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" /> <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
</svg> </svg>

75
app/[locale]/(public)/feedback/page.tsx
View File

@ -1,8 +1,10 @@
"use client"; "use client";
import { Reveal } from "@/components/landing-page/Reveal"; import { Reveal } from "@/components/landing-page/Reveal";
import { error, loading, successCallback } from "@/config/swal";
import { getFeedback, postUserFeedback } from "@/service/landing/landing"; import { getFeedback, postUserFeedback } from "@/service/landing/landing";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { any } from "zod";
interface RatingProps { interface RatingProps {
label: string; label: string;
@ -32,6 +34,12 @@ const Rating: React.FC<RatingProps> = ({ label, onRate }) => {
}; };
const FeedbackForm: React.FC = () => { const FeedbackForm: React.FC = () => {
const [ratings, setRatings] = useState({
accessibility: 0,
appearance: 0,
content: 0,
});
useEffect(() => { useEffect(() => {
async function initState() { async function initState() {
const response = await getFeedback(); const response = await getFeedback();
@ -41,22 +49,71 @@ const FeedbackForm: React.FC = () => {
initState(); initState();
}, []); }, []);
const [ratings, setRatings] = useState({
accessibility: 0,
appearance: 0,
content: 0,
});
const handleRatingChange = (field: keyof typeof ratings, value: number) => { type Feedback = {
setRatings((prev) => ({ ...prev, [field]: value })); feedbackId: any;
score: any;
}; };
const [userFeedbacks, setUserFeedbacks] = useState<Feedback[]>([]);
const [hasMounted, setHasMounted] = useState(false);
const handleRatingChange = (id: any, score: any) => {
const listData = [...userFeedbacks];
const dataIdx = userFeedbacks.findIndex((o) => o.feedbackId === id);
console.log("idx :", dataIdx);
console.log("Before :", listData);
if (dataIdx !== -1) {
console.log("update");
listData[dataIdx].score = score;
} else {
const data = {
feedbackId: id,
score,
};
listData.push(data);
}
setUserFeedbacks(listData);
console.log("After :", userFeedbacks);
};
const handleSubmit = async () => { const handleSubmit = async () => {
loading();
console.log("Save Feedback :", userFeedbacks);
const response = await postUserFeedback(); const response = await postUserFeedback();
console.log("Feedback submitted:", ratings); close();
alert("Terima kasih atas feedback Anda!"); if (response.error) {
error(response.message);
return false;
}
successCallback("Terima kasih, feedback Anda telah terkirim");
}; };
async function onSubmit() {
// loading();
// let finalData = {
// name: data.name,
// email: data.email,
// title : data.title,
// message: data.title
// }
// console.log(finalData);
// const response = await sendMessage(finalData);
// close();
// successCallback();
}
// Hooks
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
return ( return (
<Reveal> <Reveal>

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

@ -104,7 +104,7 @@ const DetailInfo = () => {
</div> </div>
{/* Bagian Kanan */} {/* Bagian Kanan */}
<div className="md:w-[30%] p-4 bg-gray-300 rounded-lg mx-4"> <div className="md:w-[30%] p-4 bg-[#f7f7f7] rounded-lg mx-4">
<div className="flex flex-col mb-3 items-center justify-center cursor-pointer"> <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
<path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" /> <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@ -178,11 +178,13 @@ const DetailInfo = () => {
</div> </div>
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 gap-5 p-10 bg-gray-300"> <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-20">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex items-start justify-center" /> <Textarea placeholder="Type your comments here." className="flex w-full" />
<button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button> <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
</div> </div>
</div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="px-4"> <div className="px-4">

33
app/[locale]/(public)/schedule/page.tsx
View File

@ -318,7 +318,7 @@ const Schedule = () => {
return ( return (
<> <>
{/* Awal Komponen Kiri */} {/* Awal Komponen Kiri */}
<div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-gray-50 dark:bg-slate-800"> <div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800">
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}> <Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
@ -410,10 +410,14 @@ const Schedule = () => {
<thead className="text-md"> <thead className="text-md">
<tr className="h-full"> <tr className="h-full">
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th> <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
<th <th className="text-center border border-r-0 border-gray-100 dark:border-gray-700 py-6 w-[20px]">
onClick={() => changePrevWeek()} <a onClick={() => changePrevWeek()} className="cursor-pointer h-fit self-center bottom-0">
className={`text-center cursor-pointer border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`} <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
> <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
</svg>
</a>
</th>
<th className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}>
{/* <a className="cursor-pointer h-fit self-center bottom-0" > {/* <a className="cursor-pointer h-fit self-center bottom-0" >
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" /> <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
@ -441,7 +445,9 @@ const Schedule = () => {
</th> </th>
<th <th
onClick={() => changeNextWeek()} onClick={() => changeNextWeek()}
className={`text-center border cursor-pointer border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""}`} className={`text-center border cursor-pointer border-r-0 border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""
}`}
> >
<div className="flex flex-col "> <div className="flex flex-col ">
<p className="text-2xl">{dateAWeek[6]?.split("-")[2]}</p> <p className="text-2xl">{dateAWeek[6]?.split("-")[2]}</p>
@ -453,19 +459,30 @@ const Schedule = () => {
</svg> </svg>
</a> */} </a> */}
</th> </th>
<th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 py-6 w-[20px]">
<a onClick={() => changeNextWeek()} className="cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
<path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
</svg>
</a>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{timeList.map((times) => ( {timeList.map((times) => (
<tr key={times.id}> <tr key={times.id}>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">{times.time}</th> <th className="text-center border border-gray-100 dark:border-gray-700 py-5">{times.time}</th>
<td className="p-3 border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[0])}</td> <td colSpan={2} className="p-3 border border-gray-100 dark:border-gray-700 ">
{setItemSchedule(times.id, dateList[0])}
</td>
<td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[1])}</td> <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[1])}</td>
<td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[2])}</td> <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[2])}</td>
<td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[3])}</td> <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[3])}</td>
<td className="p-3 border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[4])}</td> <td className="p-3 border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[4])}</td>
<td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[5])}</td> <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[5])}</td>
<td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[6])}</td> <td colSpan={2} className="border border-gray-100 dark:border-gray-700">
{setItemSchedule(times.id, dateList[6])}
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>

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

@ -1,6 +1,5 @@
"use client"; "use client";
import { useParams, usePathname, useRouter } from "next/navigation"; import { useParams, usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
@ -10,7 +9,6 @@ import NewContent from "@/components/landing-page/new-content";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
const DetailVideo = () => { const DetailVideo = () => {
const [selectedSize, setSelectedSize] = useState<string>("L"); const [selectedSize, setSelectedSize] = useState<string>("L");
const [selectedTab, setSelectedTab] = useState("video"); const [selectedTab, setSelectedTab] = useState("video");
@ -52,7 +50,7 @@ const DetailVideo = () => {
</div> </div>
{/* Bagian Kanan */} {/* Bagian Kanan */}
<div className="md:w-1/4 p-4 bg-gray-300 rounded-lg mx-4"> <div className="md:w-1/4 p-4 bg-[#f7f7f7] rounded-lg mx-4">
<div className="flex flex-col mb-3 items-center justify-center cursor-pointer"> <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
<path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" /> <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@ -126,11 +124,13 @@ const DetailVideo = () => {
</div> </div>
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 gap-5 p-10 bg-gray-300"> <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-20">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex items-start justify-center" /> <Textarea placeholder="Type your comments here." className="flex w-full" />
<button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button> <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
</div> </div>
</div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="px-4"> <div className="px-4">

4
app/[locale]/(public)/video/filter/page.tsx
View File

@ -189,7 +189,7 @@ const FilterPage = () => {
<Card key={video?.id} className="hover:scale-110 transition-transform duration-300"> <Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0"> <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
<Link href={`/video/detail/${video?.slug}`}> <Link href={`/video/detail/${video?.slug}`}>
<img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center rounded-lg" /> <img src={video?.thumbnailLink} className="h-60 object-cover items-center w-full justify-center rounded-lg" />
<div className="flex flex-row items-center gap-2 text-[10px] mx-2"> <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
{formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" /> {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
{video?.clickCount}{" "} {video?.clickCount}{" "}
@ -197,7 +197,7 @@ const FilterPage = () => {
<path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" /> <path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
</svg>{" "} </svg>{" "}
</div> </div>
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div> <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate text-base hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
</Link> </Link>
</CardContent> </CardContent>
</Card> </Card>

2
components/landing-page/coverage.tsx
View File

@ -64,7 +64,7 @@ const Coverage: React.FC = () => {
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
/> />
<button className="px-2 w-1/5 lg:px-4 lg:py-2 bg-[#bb3523] text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">Cari Liputan <Icon icon="uil:arrow-right" /></button> <button className="px-2 w-1/5 lg:px-4 lg:py-2 bg-[#bb3523] text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} /></button>
</div> </div>
{/* Grid Wilayah */} {/* Grid Wilayah */}

2
components/landing-page/division.tsx
View File

@ -61,7 +61,7 @@ const Division = () => {
<div className="flex items-center justify-center gap-4 mb-6"> <div className="flex items-center justify-center gap-4 mb-6">
<input type="text" placeholder="Pencarian" className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> <input type="text" placeholder="Pencarian" className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
<button className="px-2 w-1/5 lg:px-4 lg:py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-md hover:bg-red-700"> <button className="px-2 w-1/5 lg:px-4 lg:py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-md hover:bg-red-700">
Cari Liputan <Icon icon="uil:arrow-right" /> Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
</button> </button>
</div> </div>

2
components/landing-page/footer.tsx
View File

@ -46,7 +46,7 @@ const Footer = () => {
<Dialog> <Dialog>
<DialogTrigger> <DialogTrigger>
<span className="hidden md:inline-block">|</span> <span className="hidden md:inline-block">|</span>
<a href="#" className="hover:underline"> <a href="#" className="hover:underline px-2">
Privacy Privacy
</a> </a>
</DialogTrigger> </DialogTrigger>

212
components/landing-page/navbar.tsx
View File

@ -2,12 +2,10 @@
import React, { useState } from "react"; import React, { useState } from "react";
import ThemeSwitcher from "@/components/partials/header/theme-switcher"; import ThemeSwitcher from "@/components/partials/header/theme-switcher";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi"; 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 { cn } from "@/lib/utils";
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
const Navbar = () => { const Navbar = () => {
@ -25,15 +23,15 @@ const Navbar = () => {
}; };
return ( return (
<div className="bg-white 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 sm:justify-between px-4 lg:px-20 py-4 gap-3 mx-auto"> <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 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 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" /> <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" />
@ -47,49 +45,6 @@ const Navbar = () => {
{/* Desktop Navigation */} {/* Desktop Navigation */}
<div className="hidden lg:flex items-center gap-5"> <div className="hidden lg:flex items-center gap-5">
{/* <DropdownMenu>
<DropdownMenuTrigger asChild>
<a className="dark:text-white text-black flex flex-row justify-center items-center ml-5 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">
<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"
fill="currentColor"
/>
</svg>
Konten
<svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
</svg>
</a>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="p-0 rounded-md overflow-hidden">
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
<FiYoutube className="mr-2" />
Audio Visual
</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
<FiMusic className="mr-2" />
Audio
</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
<FiImage className="mr-2" />
Foto
</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
<FiFile className="mr-2" />
Teks
</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu> */}
{/* Nav Menu */} {/* Nav Menu */}
<NavigationMenu> <NavigationMenu>
<NavigationMenuList> <NavigationMenuList>
@ -167,42 +122,6 @@ const Navbar = () => {
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>
{/* <Link href="/contributor/schedule" className="dark:text-white text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
<span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"
fill="currentColor"
/>
</svg>
</span>
Jadwal
</Link> */}
{/* <Link href={generateLocalizedPath("/schedule", String(locale))} className="dark:text-white text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
<span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"
fill="currentColor"
/>
</svg>
</span>
Jadwal
</Link> */}
{/* <Link href="/indeks" className="dark:text-white text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
<span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
fill="currentColor"
/>
</svg>
</span>
Indeks
</Link> */}
<Link href="#" className="flex items-center space-x-1 text-red-600"> <Link href="#" className="flex items-center space-x-1 text-red-600">
<span className="w-2 h-2 bg-red-500 rounded-full"></span> <span className="w-2 h-2 bg-red-500 rounded-full"></span>
<span className="font-medium">Live</span> <span className="font-medium">Live</span>
@ -258,83 +177,92 @@ const Navbar = () => {
</span> </span>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Link href="/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700"> <Link href="/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-[#bb3523]">
Masuk Masuk
</Link> </Link>
<button className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-red-600 hover:text-white">Daftar</button> <button className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white">Daftar</button>
</div> </div>
</div> </div>
</div> </div>
{/* Mobile Menu */} {/* Mobile Menu */}
{menuOpen && ( {menuOpen && (
<div className="lg:hidden absolute bg-gray-700 px-4 py-3 w-full space-y-3 z-50"> <div className="lg:hidden absolute bg-[#f7f7f7] px-4 py-3 w-full space-y-3 z-50">
<DropdownMenu> <NavigationMenu>
<DropdownMenuTrigger asChild> <NavigationMenuList>
<a className=" text-white flex flex-row items-center cursor-pointer"> <NavigationMenuItem>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <NavigationMenuTrigger>
<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">
<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="white" fill="currentColor"
/> />
</svg> </svg>
Konten Konten
<svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
</svg>
</a> </a>
</DropdownMenuTrigger> </NavigationMenuTrigger>
<DropdownMenuContent align="start" className="p-0 rounded-md overflow-hidden"> <NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
<DropdownMenuItem 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">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3"> <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" />
Audio Visual Video
</span> </p>
</DropdownMenuItem> </NavigationMenuLink>
<DropdownMenuItem 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">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3"> <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
</span> </p>
</DropdownMenuItem> </NavigationMenuLink>
<DropdownMenuItem 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">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3"> <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
</span> </p>
</DropdownMenuItem> </NavigationMenuLink>
<DropdownMenuItem 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">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3"> <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
</span> </p>
</DropdownMenuItem> </NavigationMenuLink>
</DropdownMenuContent> </NavigationMenuContent>
</DropdownMenu> </NavigationMenuItem>
<Link href="#" className="flex text-white flex-row items-center font-medium hover:text-gray-800"> <NavigationMenuItem>
<Link href="/schedule" legacyBehavior passHref>
<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="white" fill="currentColor"
/> />
</svg> </svg>
</span> </span>
Jadwal Jadwal
</NavigationMenuLink>
</Link> </Link>
<Link href="#" className="flex text-white flex-row items-center font-medium hover:text-gray-800"> </NavigationMenuItem>
<NavigationMenuItem>
<Link href="/indeks" legacyBehavior passHref>
<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"
d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z" d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
fill="white" fill="currentColor"
/> />
</svg> </svg>
</span> </span>
Indeks Indeks
</NavigationMenuLink>
</Link> </Link>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
<div className="flex items-center space-x-1 text-red-600"> <div className="flex items-center space-x-1 text-red-600">
<span className="w-2 h-2 bg-red-500 rounded-full"></span> <span className="w-2 h-2 bg-red-500 rounded-full"></span>
<span className="font-medium">Live</span> <span className="font-medium">Live</span>
@ -344,18 +272,44 @@ const Navbar = () => {
<img src="/assets/polriTv.png" className="w-32 h-11 flex items-center" /> <img src="/assets/polriTv.png" className="w-32 h-11 flex items-center" />
</a> </a>
</div> </div>
<select className="w-full bg-transparent text-black border border-gray-300 py-1 px-2 rounded focus:outline-none" defaultValue="Indonesia"> <div className="relative inline-block text-left">
<option>Indonesia</option> {/* Tombol Utama Bahasa */}
<option>English</option> <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
</select> <img
<div className="px-4 py-1 w-24"> 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"}
<input type="text" placeholder="Pencarian" className="border rounded-full text-sm text-gray-600" /> alt={language === "id" ? "Ind" : "Eng"}
className="w-3 h-3"
/>
<span>{language === "id" ? "Ind" : "Eng"}</span>
<span className="text-gray-500">
<svg 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>
</span>
</button>
{/* Dropdown Menu */}
{isOpen && (
<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" : ""}`}>
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
<span>Ind</span>
</button>
<button 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>
</button>
</div> </div>
<div className="flex flex-col space-y-2"> )}
<Link href="/auth" className="w-full px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex"> </div>
<div className=" py-1 w-24">
<input type="text" placeholder="Pencarian" className="border rounded-full text-sm text-center text-gray-600" />
</div>
<div className="flex flex-row justify-between items-center space-y-2 ">
<Link href="/auth" className="w-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">
Masuk Masuk
</Link> </Link>
<Link href="#" className="w-full px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white"> <Link href="#" className="w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
Daftar Daftar
</Link> </Link>
</div> </div>

20
components/landing-page/new-content.tsx
View File

@ -42,31 +42,31 @@ const NewContent = (props: { type: string }) => {
{props.type == "popular" ? "Populer" : props.type == "latest" ? "Terbaru" : "Serupa"} {props.type == "popular" ? "Populer" : props.type == "latest" ? "Terbaru" : "Serupa"}
</h2> </h2>
<Tabs value={selectedTab} onValueChange={setSelectedTab}> <Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList> <TabsList className="flex flex-col lg:flex-row ">
<TabsTrigger <TabsTrigger
value="video" value="video"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary" className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
> >
Audio Visual Audio Visual
</TabsTrigger> </TabsTrigger>
<div className="text-[#bb3523] text-lg">|</div> <div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger <TabsTrigger
value="audio" value="audio"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary" className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
> >
Audio Audio
</TabsTrigger> </TabsTrigger>
<div className="text-[#bb3523] text-lg">|</div> <div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger <TabsTrigger
value="image" value="image"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary" className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
> >
Foto Foto
</TabsTrigger> </TabsTrigger>
<div className="text-[#bb3523] text-lg">|</div> <div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger <TabsTrigger
value="text" value="text"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary" className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
> >
Teks Teks
</TabsTrigger> </TabsTrigger>
@ -83,7 +83,7 @@ const NewContent = (props: { type: string }) => {
<Link href={`/video/detail/${video?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg"> <Link href={`/video/detail/${video?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
<img src={video?.thumbnailLink} className="w-full rounded-lg h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" /> <img src={video?.thumbnailLink} className="w-full rounded-lg h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2"> <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
<h1 className="text-lg font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</h1> <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</h1>
<p className="flex flex-row items-center text-[10px] gap-2"> <p className="flex flex-row items-center text-[10px] gap-2">
{formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video.clickCount}{" "} {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video.clickCount}{" "}
</p> </p>
@ -173,7 +173,7 @@ const NewContent = (props: { type: string }) => {
</div> </div>
<div className="flex w-full pr-10 flex-col flex-1"> <div className="flex w-full pr-10 flex-col flex-1">
<div className="text-gray-500 dark:text-gray-400 flex flex-row items-center text-sm"> <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center text-xs gap-2 mt-1 lg:text-sm">
{formatDateToIndonesian(new Date(text?.createdAt))} {text?.timezone ? text?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {text?.clickCount}{" "} {formatDateToIndonesian(new Date(text?.createdAt))} {text?.timezone ? text?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {text?.clickCount}{" "}
</div> </div>
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible ">{text?.title}</div> <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible ">{text?.title}</div>

12
components/landing-page/search-section.tsx
View File

@ -17,7 +17,7 @@ const SearchSection = () => {
{/* Search Form */} {/* Search Form */}
<div className="mt-6 flex flex-col md:flex-row justify-center gap-4"> <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
{/* Dropdown */} {/* Dropdown */}
<div className="flex items-center justify-center rounded-lg overflow-hidden"> <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer"> <a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
@ -60,9 +60,6 @@ const SearchSection = () => {
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div>
{/* Search Input */}
<div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden"> <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
<span className="material-icons text-black dark:text-white px-4"> <span className="material-icons text-black dark:text-white px-4">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
@ -74,9 +71,14 @@ const SearchSection = () => {
</span> </span>
<input type="text" placeholder="Pencarian" className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" /> <input type="text" placeholder="Pencarian" className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
</div> </div>
</div>
{/* Search Input */}
{/* Button */} {/* Button */}
<button className="px-6 py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-lg hover:bg-red-700">Cari Liputan <Icon icon="uil:arrow-right" /></button> <button className="px-6 lg:w-[20%] py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-lg hover:bg-red-700">
Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
</button>
</div> </div>
</div> </div>
</section> </section>

121
components/ui/navigation-menu.tsx
View File

@ -1,71 +1,37 @@
import * as React from "react" import * as React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { cva } from "class-variance-authority" import { cva } from "class-variance-authority";
import { ChevronDown } from "lucide-react" import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
const NavigationMenu = React.forwardRef< const NavigationMenu = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Root>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>>(({ className, children, ...props }, ref) => (
React.ElementRef<typeof NavigationMenuPrimitive.Root>, <NavigationMenuPrimitive.Root ref={ref} className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)} {...props}>
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Root
ref={ref}
className={cn(
"relative z-10 flex max-w-max flex-1 items-center justify-center",
className
)}
{...props}
>
{children} {children}
<NavigationMenuViewport /> <NavigationMenuViewport />
</NavigationMenuPrimitive.Root> </NavigationMenuPrimitive.Root>
)) ));
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
const NavigationMenuList = React.forwardRef< const NavigationMenuList = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.List>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>>(({ className, ...props }, ref) => (
React.ElementRef<typeof NavigationMenuPrimitive.List>, <NavigationMenuPrimitive.List ref={ref} className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)} {...props} />
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> ));
>(({ className, ...props }, ref) => ( NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
<NavigationMenuPrimitive.List
ref={ref}
className={cn(
"group flex flex-1 list-none items-center justify-center space-x-1",
className
)}
{...props}
/>
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
const NavigationMenuItem = NavigationMenuPrimitive.Item const NavigationMenuItem = NavigationMenuPrimitive.Item;
const navigationMenuTriggerStyle = cva( const navigationMenuTriggerStyle = cva(
"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" "group inline-flex h-10 w-max items-center justify-center rounded-md bg-[#f7f7f7] dark:bg-black px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
) );
const NavigationMenuTrigger = React.forwardRef< const NavigationMenuTrigger = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>>(({ className, children, ...props }, ref) => (
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>, <NavigationMenuPrimitive.Trigger ref={ref} className={cn(navigationMenuTriggerStyle(), "group", className)} {...props}>
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> {children} <ChevronDown className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true" />
>(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Trigger
ref={ref}
className={cn(navigationMenuTriggerStyle(), "group", className)}
{...props}
>
{children}{" "}
<ChevronDown
className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
aria-hidden="true"
/>
</NavigationMenuPrimitive.Trigger> </NavigationMenuPrimitive.Trigger>
)) ));
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
const NavigationMenuContent = React.forwardRef< const NavigationMenuContent = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>>(({ className, ...props }, ref) => (
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Content <NavigationMenuPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
@ -74,15 +40,12 @@ const NavigationMenuContent = React.forwardRef<
)} )}
{...props} {...props}
/> />
)) ));
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
const NavigationMenuLink = NavigationMenuPrimitive.Link const NavigationMenuLink = NavigationMenuPrimitive.Link;
const NavigationMenuViewport = React.forwardRef< const NavigationMenuViewport = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Viewport>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>>(({ className, ...props }, ref) => (
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
<div className={cn("absolute left-0 top-full flex justify-center")}> <div className={cn("absolute left-0 top-full flex justify-center")}>
<NavigationMenuPrimitive.Viewport <NavigationMenuPrimitive.Viewport
className={cn( className={cn(
@ -93,36 +56,18 @@ const NavigationMenuViewport = React.forwardRef<
{...props} {...props}
/> />
</div> </div>
)) ));
NavigationMenuViewport.displayName = NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
NavigationMenuPrimitive.Viewport.displayName
const NavigationMenuIndicator = React.forwardRef< const NavigationMenuIndicator = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Indicator>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>>(({ className, ...props }, ref) => (
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Indicator <NavigationMenuPrimitive.Indicator
ref={ref} ref={ref}
className={cn( className={cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", className)}
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
className
)}
{...props} {...props}
> >
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" /> <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
</NavigationMenuPrimitive.Indicator> </NavigationMenuPrimitive.Indicator>
)) ));
NavigationMenuIndicator.displayName = NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
NavigationMenuPrimitive.Indicator.displayName
export { export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport };
navigationMenuTriggerStyle,
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
}

126
config/swal.ts Normal file
View File

@ -0,0 +1,126 @@
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
type SweetAlertIcon = 'success' | 'error' | 'warning' | 'info' | 'question';
const MySwal = withReactContent(Swal);
export function loading(): void {
let timerInterval: NodeJS.Timeout;
MySwal.fire({
title: '<p class="text-lg font-bold">Loading</p>',
allowOutsideClick: false,
timerProgressBar: true,
didOpen: () => {
MySwal.showLoading();
timerInterval = setInterval(() => {}, 100);
},
willClose: () => {
clearInterval(timerInterval);
},
});
}
export function error(msg: string): void {
MySwal.fire({
title: '<p class="text-red-600 font-semibold">Gagal</p>',
html: `<p class="text-gray-700">${msg}</p>`,
icon: 'error',
});
}
export function success(redirect: string): void {
MySwal.fire({
title: '<p class="text-green-600 font-bold">Sukses</p>',
icon: 'success',
confirmButtonColor: '#3085d6',
confirmButtonText: '<span class="text-white">OK</span>',
allowOutsideClick: false,
}).then((result) => {
if (result.isConfirmed) {
window.location.href = redirect;
}
});
}
export function successCallback(title?: string): Promise<boolean> {
return MySwal.fire({
title: `<p class="text-green-600 font-bold">${title || 'Sukses'}</p>`,
icon: 'success',
confirmButtonColor: '#3085d6',
confirmButtonText: '<span class="text-white">OK</span>',
}).then((result) => result.isConfirmed);
}
export function successCallbackContent(title?: string): Promise<boolean> {
return MySwal.fire({
title: `<p class="text-green-600 font-bold">${title || 'Konten Telah Berhasil Disimpan'}</p>`,
icon: 'success',
confirmButtonColor: '#3085d6',
confirmButtonText: '<span class="text-white">OK</span>',
}).then((result) => result.isConfirmed);
}
export function close(): void {
MySwal.close();
}
export function welcome(name: string): Promise<boolean> {
let timerInterval: NodeJS.Timeout;
timerInterval = setInterval(() => {}, 100);
return MySwal.fire({
title: `<p class="text-green-600 font-bold">Selamat Datang ${name} \nDi Mediahub</p>`,
icon: 'success',
confirmButtonColor: '#3085d6',
confirmButtonText: '<span class="text-white">OK</span>',
timer: 2000,
timerProgressBar: false,
willClose: () => {
clearInterval(timerInterval);
},
}).then((result) => result.isConfirmed);
}
export function welcomeGuest(name: string): Promise<boolean> {
let timerInterval: NodeJS.Timeout;
timerInterval = setInterval(() => {}, 100);
return MySwal.fire({
title: `<p class="text-green-600 font-bold">Selamat Datang ${name} \nDi Mediahub</p>`,
icon: 'success',
confirmButtonColor: '#3085d6',
confirmButtonText: '<span class="text-white">OK</span>',
timer: 2000,
timerProgressBar: false,
willClose: () => {
clearInterval(timerInterval);
},
}).then((result) => result.isConfirmed);
}
export function registerConfirm(): void {
MySwal.fire({
title: '<p class="text-green-600 font-bold">Selamat Anda Telah Terdaftar</p>',
html: '<p class="text-gray-700">Mohon Menunggu Email Konfirmasi Untuk Bisa Melakukan Login</p>',
icon: 'success',
confirmButtonColor: '#3085d6',
confirmButtonText: '<span class="text-white">OK</span>',
}).then((result) => {
if (result.isConfirmed) {
window.location.href = '/auth/login';
}
});
}
export function warning(text: string, redirect?: string): Promise<boolean> {
return MySwal.fire({
title: `<p class="text-yellow-600 font-bold">${text}</p>`,
icon: 'warning',
confirmButtonColor: '#3085d6',
confirmButtonText: '<span class="text-white">OK</span>',
}).then((result) => {
if (redirect && result.isConfirmed) {
window.location.href = redirect;
}
return result.isConfirmed;
});
}