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

feat: add and adjust ui and api

This commit is contained in:
sabdayagra 2024-12-24 23:16:20 +07:00
parent 955f9b2b4e
commit 7eedd7c85f
10 changed files with 130 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/[locale]/(public)/audio/detail/[slug]/page.tsx
View File

@ -49,10 +49,25 @@ const DetailAudio = () => {
<BarWave color="#ffc831" width="60px" height="25px" duration="2s" /> <BarWave color="#ffc831" width="60px" height="25px" duration="2s" />
<div className="absolute top-4 left-4"></div> <div className="absolute top-4 left-4"></div>
</div> </div>
{/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="flex flex-row items-center">
oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp;
{detailDataAudio?.clickCount}
</p>
<p>Kreator: {detailDataAudio?.creatorName}</p>
</div>
{/* Keterangan */}
<div className="md:w-3/4">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
<div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
</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 h-fit bg-gray-300 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" />
@ -106,24 +121,8 @@ const DetailAudio = () => {
</button> </button>
</div> </div>
</div> </div>
{/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="flex flex-row items-center">
oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp;
{detailDataAudio?.clickCount}
</p>
<p>Kreator: {detailDataAudio?.creatorName}</p>
</div>
{/* Keterangan */}
<div className="md:w-3/4">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
<div dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
</div>
</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 gap-5 p-10 bg-gray-300">

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

@ -4,11 +4,9 @@ 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";
import { getDetail } from "@/service/landing/landing"; import { getDetail } from "@/service/landing/landing";
import VideoPlayer from "@/utils/video-player";
import NewContent from "@/components/landing-page/new-content"; 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";
import { BarWave } from "react-cssfx-loading";
const DetailDocument = () => { const DetailDocument = () => {
const [selectedSize, setSelectedSize] = useState<string>("L"); const [selectedSize, setSelectedSize] = useState<string>("L");
@ -49,19 +47,19 @@ const DetailDocument = () => {
<div className="absolute top-4 left-4"></div> <div className="absolute top-4 left-4"></div>
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="flex flex-row items-center"> <p className="flex flex-row items-center mt-3">
oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp; oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" /> <Icon icon="formkit:eye" width="15" height="15" />
&nbsp; &nbsp;
{detailDataDocument?.clickCount} {detailDataDocument?.clickCount}
</p> </p>
<p>Kreator: {detailDataDocument?.creatorName}</p> <p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="md:w-3/4"> <div className="md:w-3/4">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataDocument?.title}</h1> <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataDocument?.title}</h1>
<div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} /> <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
</div> </div>
</div> </div>
@ -123,15 +121,15 @@ const DetailDocument = () => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-20"> <div className="gap-5 flex flex-col px-4 lg:px-16">
<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 w-full" /> <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 text-white w-fit px-4 py-1">Kirim</button>
</div> </div>
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="px-4"> <div className="">
<NewContent type={"similar"} /> <NewContent type={"similar"} />
</div> </div>
</div> </div>

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

@ -49,17 +49,17 @@ const DetailInfo = () => {
</div> </div>
{/* Gambar bawah Kecil */} {/* Gambar bawah Kecil */}
<div className="p-4 grid grid-cols-4 gap-2"> <div className="py-4 flex flex-row gap-3">
{detailDataImage?.files?.map((file: any, index: number) => ( {detailDataImage?.files?.map((file: any, index: number) => (
<a onClick={() => setSelectedImage(index)} key={file?.id}> <a onClick={() => setSelectedImage(index)} key={file?.id}>
<img src={file?.url} className="w-full h-fit object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" /> <img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
</a> </a>
))} ))}
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center mt-3 justify-between">
oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp; oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" /> <Icon icon="formkit:eye" width="15" height="15" />
&nbsp; {detailDataImage?.clickCount} &nbsp; &nbsp; {detailDataImage?.clickCount} &nbsp;
@ -69,8 +69,8 @@ const DetailInfo = () => {
{/* Keterangan */} {/* Keterangan */}
<div className="w-full"> <div className="w-full">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataImage?.title}</h1> <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
<div dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} /> <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
</div> </div>
</div> </div>
@ -134,15 +134,15 @@ const DetailInfo = () => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-16"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<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 w-full" /> <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 text-white px-4 py-1">Kirim</button>
</div> </div>
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="px-4"> <div className="">
<NewContent type={"similar"} /> <NewContent type={"similar"} />
</div> </div>
</div> </div>

66
app/[locale]/(public)/indeks/detail/[slug]/page.tsx
View File

@ -2,69 +2,91 @@
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
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 NewContent from "@/components/landing-page/new-content"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { getDetailIndeks } from "@/service/landing/landing"; import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals"; import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
const IndeksDetail = () => { const IndeksDetail = () => {
const [indeksData, setIndeksData] = useState<any>(); const [indeksData, setIndeksData] = useState<any>();
const params = useParams(); const params = useParams();
const slug = params?.slug; const slug = params?.slug;
const [relatedPost, setRelatedPost] = useState<any>();
useEffect(() => { useEffect(() => {
initFetch(); initFetch();
detailFetch();
}, []); }, []);
const initFetch = async () => { const initFetch = async () => {
const response = await getDetailIndeks(); const response = await getDetailIndeks();
console.log(response); console.log(response);
setIndeksData(response?.data?.data?.content); setRelatedPost(response?.data?.data?.content);
};
const detailFetch = async () => {
const response = await publicDetailBlog(slug);
console.log(response);
setIndeksData(response?.data?.data);
}; };
return ( return (
<> <>
<div className="p-4 lg:px-60 lg:p-12"> <div className="p-4 lg:px-60 lg:p-12">
{/* Judul */} {/* Judul */}
<div className="flex justify-center mb-5"> <div className="flex flex-col mb-5">
<h1 className="text-lg mb-2">Indeks / Detail</h1>
<h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1> <h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
</div> </div>
{/* Gambar Utama */} {/* Gambar Utama */}
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<img src={indeksData?.thumbnailLink} alt="Main" className="h-[500px] w-full rounded-lg" /> <img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" />
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="items-end"> <div className="flex flex-row items-center mt-3 justify-between">
{formatDateToIndonesian(new Date(indeksData?.createdAt))} {indeksData?.timezone ? indeksData?.timezone : "WIB"}|{" "} oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24"> </div>
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{indeksData?.clickCount}
</p>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="w-auto"> <div className="w-auto">
<p dangerouslySetInnerHTML={{ __html: indeksData?.description }} /> <p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
</div> </div>
</div> </div>
{/* Comment */}
<div className="w-full"> <div className="w-full">
{/* Comment */} <div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-16"> <div className="gap-5 flex flex-col px-4 lg:px-16">
<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 w-full" /> <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] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
</div> </div>
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="space-x-5 flex flex-col p-4"> <div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
<NewContent type={"similar"} /> <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
<Carousel>
<CarouselContent className="w-full max-w-7xl">
{relatedPost?.map((relate: any) => (
<CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
<Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
<img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 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">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
<p className="flex flex-row items-center text-[10px] gap-2">
{formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
</p>
</div>
</Link>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div> </div>
</div> </div>
</> </>

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

@ -9,11 +9,11 @@ import { format } from "date-fns";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import { listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule"; import { detailSchedule, listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule";
import { useRouter } from "@/i18n/routing"; import { useRouter } from "@/i18n/routing";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { close, loading } from "@/config/swal";
const timeList = [ const timeList = [
{ {
@ -114,7 +114,7 @@ const timeList = [
}, },
]; ];
const Schedule = () => { const Schedule = (props: any) => {
const router = useRouter(); const router = useRouter();
const [startDate, setStartDate] = useState<Date | undefined>(new Date()); const [startDate, setStartDate] = useState<Date | undefined>(new Date());
const [dateAWeek, setDateAWeek] = useState<string[]>([]); const [dateAWeek, setDateAWeek] = useState<string[]>([]);
@ -125,6 +125,19 @@ const Schedule = () => {
const [isOpen, setIsOpen] = React.useState(false); const [isOpen, setIsOpen] = React.useState(false);
const [schedules, setSchedules] = useState([]); const [schedules, setSchedules] = useState([]);
const [openDialog, setOpenDialog] = useState(false); const [openDialog, setOpenDialog] = useState(false);
const [detail, setDetail] = useState<any>();
const [content, setContent] = useState();
const { id } = props;
useEffect(() => {
async function getDataSchedule() {
const response = await detailSchedule(id);
setDetail(response.data?.data);
setContent(response.data?.data?.files);
}
getDataSchedule();
}, [id]);
useEffect(() => { useEffect(() => {
async function initState() { async function initState() {
@ -256,7 +269,13 @@ const Schedule = () => {
} }
}; };
const getItem = (itemFound: any) => { const getItem = async (itemFound: any) => {
loading();
const response = await detailSchedule(itemFound?.id);
setDetail(response.data?.data);
setContent(response.data?.data?.files);
console.log("item Found", itemFound);
close();
setOpenDialog(true); setOpenDialog(true);
}; };
@ -687,29 +706,31 @@ const Schedule = () => {
<AlertDialog open={openDialog} onOpenChange={setOpenDialog}> <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Test Event</AlertDialogTitle> <AlertDialogTitle>
<h1 className="my-4 font-light">JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}</h1>
<p className="font-bold">{detail?.title}</p>
</AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
<p className="flex flex-row items-center gap-2"> <p className="flex flex-row items-center gap-2">
<Icon icon="iconamoon:clock-thin" /> <Icon icon="iconamoon:clock-thin" />
08.00 - 12.00 WIB {detail?.date} {detail?.startTime} - {detail?.endTime} {detail?.timezone ? detail.timezone : "WIB"}
</p> </p>
</AlertDialogDescription> </AlertDialogDescription>
<AlertDialogDescription> <AlertDialogDescription>
<p className="flex flex-row items-start gap-2 "> <p className="flex flex-row items-start gap-2 ">
<Icon icon="bxs:map" width={30} /> <Icon icon="bxs:map" width={30} />
Jl. Trunojoyo No.3 2, RT.2/RW.1, Selong, Kec. Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia. {detail?.address}
</p> </p>
</AlertDialogDescription> </AlertDialogDescription>
<AlertDialogDescription> <AlertDialogDescription>
<p className="flex flex-row items-center gap-2"> <p className="flex flex-row items-center gap-2">
<Icon icon="ic:round-person" /> <Icon icon="ic:round-person" />
Hanif Salafi {detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
</p> </p>
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction>Close</AlertDialogAction>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>

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

@ -49,20 +49,20 @@ const DetailVideo = () => {
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="flex flex-row items-center"> <p className="flex flex-row items-center mt-3">
oleh&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp; oleh&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" /> <Icon icon="formkit:eye" width="15" height="15" />
&nbsp; &nbsp;
{detailDataVideo?.clickCount} {detailDataVideo?.clickCount}
</p> </p>
<p>Kreator: {detailDataVideo?.creatorName}</p> <p className="mt-3">Kreator: {detailDataVideo?.creatorName}</p>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="w-full"> <div className="w-full">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataVideo?.title}</h1> <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataVideo?.title}</h1>
<div dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} /> <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
</div> </div>
</div> </div>
@ -125,15 +125,15 @@ const DetailVideo = () => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-16"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<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 w-full" /> <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] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
</div> </div>
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="px-4"> <div className="">
<NewContent type={"similar"} /> <NewContent type={"similar"} />
</div> </div>
</div> </div>

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

@ -193,7 +193,7 @@ const Navbar = () => {
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger> <NavigationMenuTrigger>
<a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer"> <a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
<svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z" d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
fill="currentColor" fill="currentColor"
@ -308,11 +308,12 @@ const Navbar = () => {
<div className=" py-1 flex items-center mx-3"> <div className=" py-1 flex items-center mx-3">
<input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" /> <input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" />
</div> </div>
<div className="flex flex-row justify-between items-center space-y-2 mx-3">
<Link href="/auth" className="w-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex"> <div className="flex flex-row justify-between items-center my-2 mx-3 gap-2">
<Link href="/auth" className="w-full px-4 py-1 bg-[#bb3523] text-white text-center font-semibold rounded-md hover:bg-red-700 md:flex">
Masuk Masuk
</Link> </Link>
<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"> <Link href="#" className="w-full px-4 py-1 border border-[#bb3523] text-center text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
Daftar Daftar
</Link> </Link>
</div> </div>

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

@ -33,11 +33,11 @@ const NewContent = (props: { type: string }) => {
}; };
return ( return (
<div className="px-4 lg:px-16"> <div className="px-4 lg:px-16 py-4">
<Reveal> <Reveal>
<div className="flex flex-col p-4"> <div className="flex flex-col p-4">
<div className="mx-auto w-full max-w-7xl justify-start flex px-5 flex-col lg:flex-row gap-5 mb-4"> <div className="mx-auto w-full max-w-7xl justify-start flex px-5 flex-col lg:flex-row gap-5 mb-4">
<h2 className="flex items-center text-sm lg:text-xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white"> <h2 className="flex items-center text-xl lg:text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
<span className="text-black ">Konten&nbsp;</span> <span className="text-black ">Konten&nbsp;</span>
{props.type == "popular" ? "Populer" : props.type == "latest" ? "Terbaru" : "Serupa"} {props.type == "popular" ? "Populer" : props.type == "latest" ? "Terbaru" : "Serupa"}
</h2> </h2>
@ -73,7 +73,7 @@ const NewContent = (props: { type: string }) => {
</TabsList> </TabsList>
</Tabs> </Tabs>
</div> </div>
<div className="px-10"> <div className="px-0 lg:px-10">
{selectedTab == "video" ? ( {selectedTab == "video" ? (
newContent?.length > 0 ? ( newContent?.length > 0 ? (
<Carousel className="w-full max-w-7xl mx-auto"> <Carousel className="w-full max-w-7xl mx-auto">
@ -81,7 +81,7 @@ const NewContent = (props: { type: string }) => {
{newContent?.map((video: any) => ( {newContent?.map((video: any) => (
<CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3"> <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
<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-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" /> <img src={video?.thumbnailLink} className="w-full rounded-lg h-48 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-sm lg:text-lg mb-2 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">

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

@ -11,7 +11,7 @@ const SearchSection = () => {
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white"> <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
<span className="text-[#bb3523] dark:text-white">Eksplorasi</span> dan <span className="text-[#bb3523] dark:text-white">Download</span> Liputan Resmi Kami <span className="text-[#bb3523] dark:text-white">Eksplorasi</span> dan <span className="text-[#bb3523] dark:text-white">Download</span> Liputan Resmi Kami
</h1> </h1>
<div className="w-auto h-1 bg-[#bb3523] mx-auto mt-2"></div> <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 Mabes dan Polda seluruh Indonesia</p> <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">Liputan resmi yang bersumber dari kegiatan Polri di Mabes dan Polda seluruh Indonesia</p>
{/* Search Form */} {/* Search Form */}
@ -76,7 +76,7 @@ const SearchSection = () => {
{/* Search Input */} {/* Search Input */}
{/* Button */} {/* 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"> <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} /> Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
</button> </button>
</div> </div>

4
service/landing/landing.ts
View File

@ -42,4 +42,6 @@ export async function listCategory(type = "") {
return await httpGetInterceptor(`media/categories/list/enable?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=${type}`); return await httpGetInterceptor(`media/categories/list/enable?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=${type}`);
} }
export async function publicDetailBlog(slug: any) {
return await httpGetInterceptor(`blog/public/read/${slug}`);
}