feat: add polda section
This commit is contained in:
parent
ddaa43c25d
commit
cd37b0e396
|
|
@ -113,7 +113,7 @@ const FilterPage = () => {
|
|||
<div className="flex flex-col lg:flex-row gap-6 p-4">
|
||||
<Reveal>
|
||||
{/* Sidebar Kiri */}
|
||||
<div className="lg:w-1/4 w-max bg-white p-4 rounded-lg shadow-md">
|
||||
<div className="lg:w-1/4 bg-white p-4 rounded-lg shadow-md">
|
||||
<h2 className="text-lg font-semibold mb-4">
|
||||
<Icon icon="stash:filter-light" fontSize={30} />
|
||||
Filter
|
||||
|
|
@ -193,8 +193,10 @@ const FilterPage = () => {
|
|||
<option value="terlama">Terpopuler</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Card */}
|
||||
<div className=" grid grid-cols-1 gap-6 ">
|
||||
{audioData?.length > 0 ? (
|
||||
<div className=" grid grid-cols-1 gap-6 lg:w-3/4">
|
||||
{audioData?.map((audio: any) => (
|
||||
<Link
|
||||
href={`/audio/detail/${audio?.slug}`}
|
||||
|
|
@ -224,13 +226,22 @@ const FilterPage = () => {
|
|||
<img src="/assets/audio-icon.png" alt="#" className="flex items-center justify-center" />
|
||||
<div className="flex mx-2 items-center justify-center">{audio?.duration}</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
|
||||
</p>
|
||||
)}
|
||||
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
</div>
|
||||
</Reveal>
|
||||
|
|
|
|||
|
|
@ -252,8 +252,8 @@ const ContentManagement = (props: { type: string }) => {
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" />
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
</p>
|
||||
)
|
||||
) : selectedTab == "audio" ? (
|
||||
|
|
@ -299,8 +299,8 @@ const ContentManagement = (props: { type: string }) => {
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" />
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
</p>
|
||||
)
|
||||
) : selectedTab == "image" ? (
|
||||
|
|
@ -328,8 +328,8 @@ const ContentManagement = (props: { type: string }) => {
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" />
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
</p>
|
||||
)
|
||||
) : dummyContent.length > 0 ? (
|
||||
|
|
@ -361,8 +361,8 @@ const ContentManagement = (props: { type: string }) => {
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" />
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -503,6 +503,7 @@ const FilterPage = () => {
|
|||
</select>
|
||||
</div>
|
||||
|
||||
{documentData?.length > 0 ? (
|
||||
<div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{documentData?.map((document: any) => (
|
||||
<Link href={`/document/detail/${document?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
|
||||
|
|
@ -514,7 +515,6 @@ const FilterPage = () => {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col flex-1 gap-2">
|
||||
<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
|
||||
|
|
@ -530,6 +530,12 @@ const FilterPage = () => {
|
|||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
|
||||
</p>
|
||||
)}
|
||||
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
</div>
|
||||
</Reveal>
|
||||
|
|
|
|||
|
|
@ -478,6 +478,7 @@ const FilterPage = () => {
|
|||
</select>
|
||||
</div>
|
||||
|
||||
{imageData?.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{imageData?.map((image: any) => (
|
||||
<Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
|
||||
|
|
@ -500,6 +501,12 @@ const FilterPage = () => {
|
|||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center justify-center text-black">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
|
||||
</p>
|
||||
)}
|
||||
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
</div>
|
||||
</Reveal>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
"use client";
|
||||
|
||||
import ContentCategory from "@/components/landing-page/content-category";
|
||||
import HeaderBanner from "@/components/landing-page/header-banner";
|
||||
import NewContent from "@/components/landing-page/new-content";
|
||||
import WelcomePolda from "@/components/landing-page/welcome-polda";
|
||||
import React from "react";
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
<div>
|
||||
<HeaderBanner />
|
||||
<WelcomePolda />
|
||||
<NewContent type="latest" />
|
||||
<NewContent type="popular" />
|
||||
<ContentCategory />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import LayoutProvider from "@/providers/layout.provider";
|
||||
import LayoutContentProvider from "@/providers/content.provider";
|
||||
import DashCodeSidebar from "@/components/partials/sidebar";
|
||||
import DashCodeFooter from "@/components/partials/footer";
|
||||
import ThemeCustomize from "@/components/partials/customizer";
|
||||
import DashCodeHeader from "@/components/partials/header";
|
||||
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default layout;
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
const MetroJaya = () => {
|
||||
return <div>MetroJaya</div>;
|
||||
};
|
||||
|
||||
export default MetroJaya;
|
||||
|
|
@ -503,6 +503,7 @@ const FilterPage = () => {
|
|||
</select>
|
||||
</div>
|
||||
|
||||
{videoData?.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{videoData?.map((video: any) => (
|
||||
<Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
|
||||
|
|
@ -525,6 +526,12 @@ const FilterPage = () => {
|
|||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
|
||||
</p>
|
||||
)}
|
||||
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
</div>
|
||||
</Reveal>
|
||||
|
|
|
|||
|
|
@ -9,42 +9,42 @@ const Coverage: React.FC = () => {
|
|||
const [seeAllValue, setSeeAllValue] = useState(false);
|
||||
|
||||
const regions = [
|
||||
{ name: "Polda Metro Jaya", logo: "/assets/polda/polda-metro.png" },
|
||||
{ name: "Polda Jawa Barat", logo: "/assets/polda/polda-jabar.png" },
|
||||
{ name: "Polda Banten", logo: "/assets/polda/polda-banten.png" },
|
||||
{ name: "Polda Jawa Tengah", logo: "/assets/polda/polda-jateng.png" },
|
||||
{ name: "Polda D.I Yogyakarta", logo: "/assets/polda/polda-diy.png" },
|
||||
{ name: "Polda Jawa Timur", logo: "/assets/polda/polda-jatim.png" },
|
||||
{ name: "Polda Aceh", logo: "/assets/polda/polda-aceh.png" },
|
||||
{ name: "Polda Sumatera Utara", logo: "/assets/polda/polda-sumut.png" },
|
||||
{ name: "Polda Sumatera Barat", logo: "/assets/polda/polda-sumbar.png" },
|
||||
{ name: "Polda Riau", logo: "/assets/polda/polda-riau.png" },
|
||||
{ name: "Polda Kep. Riau", logo: "/assets/polda/polda-kepri.png" },
|
||||
{ name: "Polda Jambi", logo: "/assets/polda/polda-jambi.png" },
|
||||
{ name: "Polda Sumatera Selatan", logo: "/assets/polda/polda-sumsel.png" },
|
||||
{ name: "Polda Kep. Bangka Belitung", logo: "/assets/polda/polda-bangkabelitung.png" },
|
||||
{ name: "Polda Bengkulu", logo: "/assets/polda/polda-bengkulu.png" },
|
||||
{ name: "Polda Lampung", logo: "/assets/polda/polda-lampung.png" },
|
||||
{ name: "Polda Nusa Tenggara Barat", logo: "/assets/polda/polda-ntb.png" },
|
||||
{ name: "Polda Nusa Tenggara Timur", logo: "/assets/polda/polda-ntt.png" },
|
||||
{ name: "Polda Bali", logo: "/assets/polda/polda-bali.png" },
|
||||
{ name: "Polda Kalimantan Barat", logo: "/assets/polda/polda-kalbar.png" },
|
||||
{ name: "Polda Kalimantan Tengah", logo: "/assets/polda/polda-kalteng.png" },
|
||||
{ name: "Polda Kalimantan Selatan", logo: "/assets/polda/polda-kalsel.png" },
|
||||
{ name: "Polda Kalimantan Timur", logo: "/assets/polda/polda-kaltim.png" },
|
||||
{ name: "Polda Kalimantan Utara", logo: "/assets/polda/polda-kalut.png" },
|
||||
{ name: "Polda Sulawesi Tengah", logo: "/assets/polda/polda-sulteng.png" },
|
||||
{ name: "Polda Sulawesi Utara", logo: "/assets/polda/polda-sulut.png" },
|
||||
{ name: "Polda Gorontalo", logo: "/assets/polda/polda-gorontalo.png" },
|
||||
{ name: "Polda Sulawesi Barat", logo: "/assets/polda/polda-sulbar.png" },
|
||||
{ name: "Polda Sulawesi Selatan", logo: "/assets/polda/polda-sulsel.png" },
|
||||
{ name: "Polda Sulawesi Tenggara", logo: "/assets/polda/polda-sultenggara.png" },
|
||||
{ name: "Polda Maluku Utara", logo: "/assets/polda/polda-malut.png" },
|
||||
{ name: "Polda Maluku", logo: "/assets/polda/polda-maluku.png" },
|
||||
{ name: "Polda Papua Barat", logo: "/assets/polda/polda-papbar.png" },
|
||||
{ name: "Polda Papua", logo: "/assets/polda/polda-papua.png" },
|
||||
{ name: "Satuan Kerja POLRI", logo: "/assets/polda/polda-satker.jpeg" },
|
||||
{ name: "Internasional", logo: "/assets/polda/internasional.png" },
|
||||
{ name: "Polda Metro Jaya", slug: "metro-jaya", logo: "/assets/polda/polda-metro.png" },
|
||||
{ name: "Polda Jawa Barat", slug: "jawa-barat", logo: "/assets/polda/polda-jabar.png" },
|
||||
{ name: "Polda Banten", slug: "banten", logo: "/assets/polda/polda-banten.png" },
|
||||
{ name: "Polda Jawa Tengah", slug: "jawa-tengah", logo: "/assets/polda/polda-jateng.png" },
|
||||
{ name: "Polda D.I Yogyakarta", slug: "di-yogyakarta", logo: "/assets/polda/polda-diy.png" },
|
||||
{ name: "Polda Jawa Timur", slug: "jawa-timur", logo: "/assets/polda/polda-jatim.png" },
|
||||
{ name: "Polda Aceh", slug: "aceh", logo: "/assets/polda/polda-aceh.png" },
|
||||
{ name: "Polda Sumatera Utara", slug: "sumatera-utara", logo: "/assets/polda/polda-sumut.png" },
|
||||
{ name: "Polda Sumatera Barat", slug: "sumatera-barat", logo: "/assets/polda/polda-sumbar.png" },
|
||||
{ name: "Polda Riau", slug: "riau", logo: "/assets/polda/polda-riau.png" },
|
||||
{ name: "Polda Kep. Riau", slug: "kepulauan-riau", logo: "/assets/polda/polda-kepri.png" },
|
||||
{ name: "Polda Jambi", slug: "jambi", logo: "/assets/polda/polda-jambi.png" },
|
||||
{ name: "Polda Sumatera Selatan", slug: "sumatera-selatan", logo: "/assets/polda/polda-sumsel.png" },
|
||||
{ name: "Polda Kep. Bangka Belitung", slug: "bangka-belitung", logo: "/assets/polda/polda-bangkabelitung.png" },
|
||||
{ name: "Polda Bengkulu", slug: "bengkulu", logo: "/assets/polda/polda-bengkulu.png" },
|
||||
{ name: "Polda Lampung", slug: "lampung", logo: "/assets/polda/polda-lampung.png" },
|
||||
{ name: "Polda Nusa Tenggara Barat", slug: "ntb", logo: "/assets/polda/polda-ntb.png" },
|
||||
{ name: "Polda Nusa Tenggara Timur", slug: "ntt", logo: "/assets/polda/polda-ntt.png" },
|
||||
{ name: "Polda Bali", slug: "bali", logo: "/assets/polda/polda-bali.png" },
|
||||
{ name: "Polda Kalimantan Barat", slug: "kalimantan-barat", logo: "/assets/polda/polda-kalbar.png" },
|
||||
{ name: "Polda Kalimantan Tengah", slug: "kalimantan-tengah", logo: "/assets/polda/polda-kalteng.png" },
|
||||
{ name: "Polda Kalimantan Selatan", slug: "kalimantan-selatan", logo: "/assets/polda/polda-kalsel.png" },
|
||||
{ name: "Polda Kalimantan Timur", slug: "kalimantan-timur", logo: "/assets/polda/polda-kaltim.png" },
|
||||
{ name: "Polda Kalimantan Utara", slug: "kalimantan-utara", logo: "/assets/polda/polda-kalut.png" },
|
||||
{ name: "Polda Sulawesi Tengah", slug: "sulawesi-tengah", logo: "/assets/polda/polda-sulteng.png" },
|
||||
{ name: "Polda Sulawesi Utara", slug: "sulawesi-utara", logo: "/assets/polda/polda-sulut.png" },
|
||||
{ name: "Polda Gorontalo", slug: "gorontalo", logo: "/assets/polda/polda-gorontalo.png" },
|
||||
{ name: "Polda Sulawesi Barat", slug: "sulawesi-barat", logo: "/assets/polda/polda-sulbar.png" },
|
||||
{ name: "Polda Sulawesi Selatan", slug: "sulawesi-selatan", logo: "/assets/polda/polda-sulsel.png" },
|
||||
{ name: "Polda Sulawesi Tenggara", slug: "sulawesi-tenggara", logo: "/assets/polda/polda-sultenggara.png" },
|
||||
{ name: "Polda Maluku Utara", slug: "maluku-utara", logo: "/assets/polda/polda-malut.png" },
|
||||
{ name: "Polda Maluku", slug: "maluku", logo: "/assets/polda/polda-maluku.png" },
|
||||
{ name: "Polda Papua Barat", slug: "papua-barat", logo: "/assets/polda/polda-papbar.png" },
|
||||
{ name: "Polda Papua", slug: "papua", logo: "/assets/polda/polda-papua.png" },
|
||||
{ name: "Satuan Kerja POLRI", slug: "satker-polri", logo: "/assets/polda/polda-satker.jpeg" },
|
||||
{ name: "Internasional", slug: "internasional", logo: "/assets/polda/internasional.png" },
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
@ -69,7 +69,7 @@ const Coverage: React.FC = () => {
|
|||
{regions.map((region, index) =>
|
||||
!seeAllValue ? (
|
||||
index < 9 ? (
|
||||
<Link href={`/polda/${region.name}`} key={index} className="flex flex-col items-center text-center group">
|
||||
<Link href={`/polda/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
|
|
@ -79,12 +79,12 @@ const Coverage: React.FC = () => {
|
|||
""
|
||||
)
|
||||
) : (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<Link href={`/polda/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
"use client";
|
||||
import { listData } from "@/service/landing/landing";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { getPublicLocaleTimestamp } from "@/utils/globals";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
|
||||
const HeaderBanner = () => {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
const asPath: any = usePathname();
|
||||
const [content, setContent] = useState([]);
|
||||
|
||||
const [isBannerLoading, setIsBannerLoading] = useState(true);
|
||||
const [centerPadding, setCenterPadding] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
// async function initState() {
|
||||
// const res = await listCarousel();
|
||||
// setContent(res.data?.data);
|
||||
// setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
|
||||
// }
|
||||
|
||||
async function fetchData() {
|
||||
const res = await listData("1", "", "", 5, 0, "createdAt", "", "", poldaName);
|
||||
let data = res?.data?.data?.content;
|
||||
setContent(data);
|
||||
setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
|
||||
setIsBannerLoading(false);
|
||||
console.log("Done");
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, [params?.page]);
|
||||
|
||||
const settings = {
|
||||
className: "center",
|
||||
// centerMode: true,
|
||||
infinite: true,
|
||||
centerPadding,
|
||||
slidesToShow: 2,
|
||||
autoplay: true,
|
||||
speed: 1500,
|
||||
autoplaySpeed: 15_000,
|
||||
focusOnSelect: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: "60px",
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: "20px",
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="p-6 lg:px-16 flex flex-col lg:flex-row">
|
||||
{isBannerLoading ? (
|
||||
<SkeletonTheme highlightColor="#f2f2f2">
|
||||
<Skeleton className="w-[100%] h-[480px]" />
|
||||
</SkeletonTheme>
|
||||
) : (
|
||||
<div className="mt-3">
|
||||
<Carousel className="w-full h-full">
|
||||
<CarouselContent>
|
||||
{content?.map((row: any) => (
|
||||
<CarouselItem key={row?.id} className="basis-1/2">
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<img src={row?.thumbnailLink} alt="" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
|
||||
<Link
|
||||
href={
|
||||
Number(row.fileType?.id) == 1
|
||||
? `${asPath.includes("/polda/") == true ? asPath : ""}/image/detail/${row.slug}`
|
||||
: Number(row.fileType?.id) == 2
|
||||
? `/video/detail/${row.slug}`
|
||||
: Number(row.fileType?.id) == 3
|
||||
? `/document/detail/${row.slug}`
|
||||
: `/audio/detail/${row.slug}`
|
||||
}
|
||||
>
|
||||
<h3>{row.title}</h3>
|
||||
</Link>
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
|
||||
{getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
|
||||
<Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderBanner;
|
||||
|
|
@ -6,23 +6,8 @@ import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
|||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { generateLocalizedPath } from "@/utils/globals";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
import { 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 { Icon } from "../ui/icon";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
|
|
@ -41,7 +26,6 @@ type Detail = {
|
|||
phoneNumber: any;
|
||||
message: string;
|
||||
};
|
||||
const roleName = getCookiesDecrypt("urne");
|
||||
|
||||
const Navbar = () => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
|
@ -79,60 +63,37 @@ const Navbar = () => {
|
|||
setHasMounted(true);
|
||||
}, []);
|
||||
|
||||
// Render
|
||||
if (!hasMounted) return null;
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
const response = await getInfoProfile();
|
||||
const details = response.data?.data;
|
||||
// Render;
|
||||
// if (!hasMounted) return null;
|
||||
// useEffect(() => {
|
||||
// async function initState() {
|
||||
// const response = await getInfoProfile();
|
||||
// const details = response.data?.data;
|
||||
|
||||
setDetail(details);
|
||||
console.log("data", details);
|
||||
}
|
||||
// setDetail(details);
|
||||
// console.log("data", details);
|
||||
// }
|
||||
|
||||
initState();
|
||||
}, []);
|
||||
// initState();
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<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">
|
||||
{/* Logo */}
|
||||
<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>
|
||||
|
||||
{/* 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 ? (
|
||||
<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"
|
||||
/>
|
||||
<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" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
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 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>
|
||||
)}
|
||||
</button>
|
||||
|
|
@ -145,14 +106,7 @@ const Navbar = () => {
|
|||
<NavigationMenuItem>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
|
|
@ -162,56 +116,25 @@ const Navbar = () => {
|
|||
</a>
|
||||
</NavigationMenuTrigger>
|
||||
<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">
|
||||
<FiYoutube className="mr-2" />
|
||||
Video
|
||||
</p>
|
||||
</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">
|
||||
<FiMusic className="mr-2" />
|
||||
Audio
|
||||
</p>
|
||||
</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">
|
||||
<FiImage className="mr-2" />
|
||||
Foto
|
||||
</p>
|
||||
</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">
|
||||
<FiFile className="mr-2" />
|
||||
Teks
|
||||
|
|
@ -223,14 +146,7 @@ const Navbar = () => {
|
|||
<Link href="/schedule" legacyBehavior passHref>
|
||||
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
||||
<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
|
||||
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"
|
||||
|
|
@ -245,14 +161,7 @@ const Navbar = () => {
|
|||
<Link href="/indeks" legacyBehavior passHref>
|
||||
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
||||
<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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
|
|
@ -274,40 +183,22 @@ const Navbar = () => {
|
|||
</Link>
|
||||
<div className="flex items-center space-x-1 ">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="relative inline-block text-left">
|
||||
{/* 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
|
||||
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"}
|
||||
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 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>
|
||||
|
|
@ -315,30 +206,12 @@ const Navbar = () => {
|
|||
{/* 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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
|
|
@ -346,18 +219,9 @@ const Navbar = () => {
|
|||
</div>
|
||||
<ThemeSwitcher />
|
||||
<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">
|
||||
<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
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
|
|
@ -372,7 +236,7 @@ const Navbar = () => {
|
|||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="flex items-center gap-1">
|
||||
<img className="h-10 w-10" src="/assets/avatar-profile.png" alt="avatar-profile" />
|
||||
<img className="h-12 w-12" src="/assets/avatar-profile.png" alt="avatar-profile" />
|
||||
<a className="gap-2">
|
||||
<p className="text-xs font-semibold">{fullName}</p>
|
||||
<p className="text-xs">{`(${roleName})`}</p>
|
||||
|
|
@ -412,25 +276,14 @@ const Navbar = () => {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{roleId === "5" ||
|
||||
roleId === "6" ||
|
||||
roleId === "7" ||
|
||||
roleId === "8" ? (
|
||||
{/* {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild className="cursor-pointer">
|
||||
{detail !== undefined ? (
|
||||
<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={"https://netidhub.com/assets/img/user-avatar.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
|
||||
<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>
|
||||
</div>
|
||||
<span className="text-base me-2.5 lg:inline-block hidden">
|
||||
|
|
@ -455,11 +308,7 @@ const Navbar = () => {
|
|||
href: "/dashboard",
|
||||
},
|
||||
].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">
|
||||
<Icon icon={item.icon} className="w-4 h-4" />
|
||||
{item.name}
|
||||
|
|
@ -471,11 +320,7 @@ const Navbar = () => {
|
|||
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
|
||||
<div>
|
||||
<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" />
|
||||
Log out
|
||||
</button>
|
||||
|
|
@ -484,30 +329,15 @@ const Navbar = () => {
|
|||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</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
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild className="cursor-pointer">
|
||||
{detail !== undefined ? (
|
||||
<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={"https://netidhub.com/assets/img/user-avatar.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
|
||||
<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>
|
||||
</div>
|
||||
<span className="text-base me-2.5 lg:inline-block hidden">
|
||||
|
|
@ -532,11 +362,7 @@ const Navbar = () => {
|
|||
href: "/dashboard",
|
||||
},
|
||||
].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">
|
||||
<Icon icon={item.icon} className="w-4 h-4" />
|
||||
{item.name}
|
||||
|
|
@ -548,11 +374,7 @@ const Navbar = () => {
|
|||
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
|
||||
<div>
|
||||
<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" />
|
||||
Log out
|
||||
</button>
|
||||
|
|
@ -564,20 +386,14 @@ const Navbar = () => {
|
|||
) : (
|
||||
// Masuk and Daftar buttons for roleId === null
|
||||
<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
|
||||
</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
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -589,14 +405,7 @@ const Navbar = () => {
|
|||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>
|
||||
<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
|
||||
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"
|
||||
|
|
@ -606,56 +415,25 @@ const Navbar = () => {
|
|||
</a>
|
||||
</NavigationMenuTrigger>
|
||||
<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">
|
||||
<FiYoutube className="mr-2" />
|
||||
Video
|
||||
</p>
|
||||
</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">
|
||||
<FiMusic className="mr-2" />
|
||||
Audio
|
||||
</p>
|
||||
</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">
|
||||
<FiImage className="mr-2" />
|
||||
Foto
|
||||
</p>
|
||||
</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">
|
||||
<FiFile className="mr-2" />
|
||||
Teks
|
||||
|
|
@ -667,14 +445,7 @@ const Navbar = () => {
|
|||
<Link href="/schedule" legacyBehavior passHref>
|
||||
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
||||
<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
|
||||
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"
|
||||
|
|
@ -689,14 +460,7 @@ const Navbar = () => {
|
|||
<Link href="/indeks" legacyBehavior passHref>
|
||||
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
||||
<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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
|
|
@ -718,39 +482,21 @@ const Navbar = () => {
|
|||
</div>
|
||||
<div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
|
||||
<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>
|
||||
</div>
|
||||
<div className="relative inline-block mx-3 text-left">
|
||||
{/* 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
|
||||
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"}
|
||||
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 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>
|
||||
|
|
@ -758,30 +504,12 @@ const Navbar = () => {
|
|||
{/* 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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
|
|
@ -790,11 +518,7 @@ const Navbar = () => {
|
|||
</div>
|
||||
|
||||
<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 className="flex justify-center items-center mx-3 gap-5">
|
||||
{fullName ? (
|
||||
|
|
@ -809,16 +533,10 @@ const Navbar = () => {
|
|||
</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
|
||||
</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
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -97,8 +97,8 @@ const NewContent = (props: { type: string }) => {
|
|||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : (
|
||||
<p className="flex items-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" />
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
</p>
|
||||
)
|
||||
) : selectedTab == "audio" ? (
|
||||
|
|
@ -133,8 +133,8 @@ const NewContent = (props: { type: string }) => {
|
|||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : (
|
||||
<p className="flex items-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" />
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
</p>
|
||||
)
|
||||
) : selectedTab == "image" ? (
|
||||
|
|
@ -159,8 +159,8 @@ const NewContent = (props: { type: string }) => {
|
|||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : (
|
||||
<p className="flex items-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" />
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
</p>
|
||||
)
|
||||
) : newContent.length > 0 ? (
|
||||
|
|
@ -202,8 +202,8 @@ const NewContent = (props: { type: string }) => {
|
|||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : (
|
||||
<p className="flex items-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" />
|
||||
<p className="flex items-center justify-center">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import { getListContent } from "@/service/landing/landing";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { Reveal } from "./Reveal";
|
||||
|
||||
const PopularPolda = () => {
|
||||
const [newContent, setNewContent] = useState<any>();
|
||||
const [selectedTab, setSelectedTab] = useState("video");
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
|
||||
return <div>popular-polda</div>;
|
||||
};
|
||||
|
||||
export default PopularPolda;
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
|
||||
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { capitalize } from "@/utils/globals";
|
||||
|
||||
const WelcomePolda = () => {
|
||||
const router = useRouter();
|
||||
const asPath: any = usePathname();
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
const [categorySelect, setCategorySelect] = useState("0");
|
||||
const [search, setSearch] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
function initState() {
|
||||
console.log(categorySelect);
|
||||
}
|
||||
|
||||
initState();
|
||||
}, [categorySelect]);
|
||||
|
||||
return (
|
||||
<section className="w-full py-8 px-4 ">
|
||||
<div className="max-w-screen-xl mx-auto text-center">
|
||||
{/* Heading */}
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
|
||||
Selamat Datang di <span className="text-[#bb3523] dark:text-white">Polda</span> <span className="capitalize">{poldaName.replace("-", " ")}</span>
|
||||
</h1>
|
||||
<div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
|
||||
<p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
|
||||
Liputan resmi yang bersumber dari kegiatan Polri di Polda <span className="capitalize">{poldaName.replace("-", " ")}</span>
|
||||
</p>
|
||||
|
||||
{/* Search Form */}
|
||||
<div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
|
||||
{/* Dropdown */}
|
||||
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
|
||||
<svg className="mx-2" 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="end" className="p-0 rounded-md overflow-hidden">
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiYoutube className="mr-2" />
|
||||
Audio Visual
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiMusic className="mr-2" />
|
||||
Audio
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiImage className="mr-2" />
|
||||
Foto
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiFile className="mr-2" />
|
||||
Teks
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
|
||||
/>
|
||||
</svg>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
|
||||
{/* Button */}
|
||||
<button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WelcomePolda;
|
||||
|
|
@ -110,6 +110,7 @@
|
|||
"react-hot-toast": "^2.4.1",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-loading-skeleton": "^3.5.0",
|
||||
"react-player": "^2.16.0",
|
||||
"react-quill": "^0.0.2",
|
||||
"react-resizable-panels": "^2.0.19",
|
||||
|
|
@ -11007,6 +11008,14 @@
|
|||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-loading-skeleton": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz",
|
||||
"integrity": "sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-player": {
|
||||
"version": "2.16.0",
|
||||
"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz",
|
||||
|
|
|
|||
|
|
@ -111,6 +111,7 @@
|
|||
"react-hot-toast": "^2.4.1",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-loading-skeleton": "^3.5.0",
|
||||
"react-player": "^2.16.0",
|
||||
"react-quill": "^0.0.2",
|
||||
"react-resizable-panels": "^2.0.19",
|
||||
|
|
|
|||
|
|
@ -8,11 +8,7 @@ export const generateLocalizedPath = (href: string, locale: string): string => {
|
|||
return `/${locale}${href}`;
|
||||
};
|
||||
|
||||
export function textEllipsis(
|
||||
str: string,
|
||||
maxLength: number,
|
||||
{ side = "end", ellipsis = "..." } = {}
|
||||
) {
|
||||
export function textEllipsis(str: string, maxLength: number, { side = "end", ellipsis = "..." } = {}) {
|
||||
if (str !== undefined && str?.length > maxLength) {
|
||||
switch (side) {
|
||||
case "start":
|
||||
|
|
@ -69,3 +65,17 @@ export function getOnlyMonthAndYear(d: Date) {
|
|||
return `${pad(d.getMonth() + 1)}/${pad(d.getFullYear(), 4)}`;
|
||||
}
|
||||
|
||||
export function getPublicLocaleTimestamp(d: any) {
|
||||
const pad = (n: any, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s);
|
||||
return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${pad(d.getFullYear(), 4)} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
export function capitalize(s: any) {
|
||||
// return s[0].toUpperCase() + s.slice(1);
|
||||
const splitStr = s.toLowerCase().split(" ");
|
||||
for (let i = 0; i < splitStr.length; i++) {
|
||||
splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].slice(1);
|
||||
}
|
||||
return splitStr.join(" ");
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue