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

fix: fixed all section

This commit is contained in:
Sabda Yagra 2025-02-18 09:10:23 +07:00
parent 314279f136
commit c9cd4ce9d7
19 changed files with 383 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -592,7 +592,7 @@ const DetailAudio = () => {
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4"> <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between"> <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm"> <p className="text-xs lg:text-sm">
{t("by")}&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span> {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
</p> </p>
{/* <p className="text-xs lg:text-sm"> {/* <p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn")} {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp; &nbsp;|&nbsp;{t("updatedOn")} {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp;
@ -621,7 +621,7 @@ const DetailAudio = () => {
</div> </div>
{/* Bagian Kanan */} {/* Bagian Kanan */}
<div className="md:w-1/4 p-4 h-fit bg-gray-300 rounded-lg mx-4"> <div className="md:w-1/4 p-4 h-fit bg-[#f7f7f7] dark:bg-slate-600 rounded-lg mx-4">
{isSaved ? ( {isSaved ? (
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<Icon icon="material-symbols:bookmark" width={40} /> <Icon icon="material-symbols:bookmark" width={40} />
@ -724,7 +724,7 @@ const DetailAudio = () => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p> <p className="flex items-start text-lg">{t("comment")}</p>
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} /> <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />

3
app/[locale]/(public)/audio/filter/page.tsx
View File

@ -14,6 +14,7 @@ import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { Reveal } from "@/components/landing-page/Reveal";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -475,6 +476,7 @@ const FilterPage = () => {
{/* Right */} {/* Right */}
<div className="w-full lg:w-[75%]"> <div className="w-full lg:w-[75%]">
<Reveal>
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy")} </h2> <h2 className="text-lg font-semibold">{t("sortBy")} </h2>
<select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"> <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
@ -552,6 +554,7 @@ const FilterPage = () => {
)} )}
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} /> <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
</Reveal>
</div> </div>
</div> </div>
</div> </div>

6
app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx
View File

@ -280,8 +280,10 @@ const page = () => {
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="font-semibold mb-3"> <div className="font-semibold mb-3 text-black gap-2">
<label htmlFor="description">Deskripsi Artikel</label> <label htmlFor="description" className="text-black dark:text-white">
Deskripsi Artikel
</label>
<CustomEditor onChange={(e: any) => {}} initialData={articleBody || ""} /> <CustomEditor onChange={(e: any) => {}} initialData={articleBody || ""} />
</div> </div>
</div> </div>

4
app/[locale]/(public)/content-management/users/page.tsx
View File

@ -134,8 +134,8 @@ const page = () => {
<DialogTrigger> <DialogTrigger>
<div className="flex flex-col items-center border border-gray-500 p-2 bg-[#f8f8f8] rounded-md"> <div className="flex flex-col items-center border border-gray-500 p-2 bg-[#f8f8f8] rounded-md">
<Image src="/assets/gg-profile.png" alt="" width={1280} height={720} className="h-10 w-10 mb-4" /> <Image src="/assets/gg-profile.png" alt="" width={1280} height={720} className="h-10 w-10 mb-4" />
<p className="font-bold text-base ">{row?.fullname}</p> <p className="font-bold text-base text-black">{row?.fullname}</p>
<p className="text-sm font-light">{row?.username || "username"}</p> <p className="text-sm font-light text-black">{row?.username || "username"}</p>
</div> </div>
</DialogTrigger> </DialogTrigger>
<DialogContent className="flex flex-row justify-center" size="sm"> <DialogContent className="flex flex-row justify-center" size="sm">

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

@ -422,6 +422,7 @@ const DetailDocument = () => {
<img src={detailDataDocument?.files[selectedDocument]?.url} alt="Main" className="rounded-lg w-auto h-fit" /> <img src={detailDataDocument?.files[selectedDocument]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
<div className="absolute top-4 left-4"></div> <div className="absolute top-4 left-4"></div>
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4"> <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
{/* <p className="flex flex-row items-center mt-3"> {/* <p className="flex flex-row items-center mt-3">
@ -433,7 +434,7 @@ const DetailDocument = () => {
<p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */} <p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */}
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between"> <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm"> <p className="text-xs lg:text-sm">
{t("by")}&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span> {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
</p> </p>
{/* <p className="text-xs lg:text-sm"> {/* <p className="text-xs lg:text-sm">
&nbsp;|&nbsp; {t("updatedOn")} {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp; &nbsp;|&nbsp; {t("updatedOn")} {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;
@ -443,7 +444,8 @@ const DetailDocument = () => {
{formatDateToIndonesian(new Date(detailDataDocument?.updatedAt))} {"WIB"} {formatDateToIndonesian(new Date(detailDataDocument?.updatedAt))} {"WIB"}
</p> </p>
<p className="text-xs lg:text-sm flex justify-center items-center"> <p className="text-xs lg:text-sm flex justify-center items-center">
&nbsp;| &nbsp;<Icon icon="formkit:eye" width="15" height="15" /> &nbsp;| &nbsp;
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp;{detailDataDocument?.clickCount}&nbsp; &nbsp;{detailDataDocument?.clickCount}&nbsp;
</p> </p>
</div> </div>
@ -457,13 +459,13 @@ const DetailDocument = () => {
{/* Keterangan */} {/* Keterangan */}
<div className=""> <div className="">
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify space-y-4">{detailDataDocument?.title}</h1> <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify">{detailDataDocument?.title}</h1>
<div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} /> <div className="font-light text-justify mb-5 space-y-4 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
</div> </div>
</div> </div>
{/* Bagian Kanan */} {/* Bagian Kanan */}
<div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4"> <div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
{isSaved ? ( {isSaved ? (
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<Icon icon="material-symbols:bookmark" width={40} /> <Icon icon="material-symbols:bookmark" width={40} />
@ -564,7 +566,7 @@ const DetailDocument = () => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p> <p className="flex items-start text-lg">{t("comment")}</p>
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} /> <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />

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

@ -394,7 +394,7 @@ const FilterPage = () => {
{/* Left */} {/* Left */}
<div className="flex flex-col lg:flex-row gap-6 p-4"> <div className="flex flex-col lg:flex-row gap-6 p-4">
<div className="lg:w-[45%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md"> <div className="lg:w-[25%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1"> <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} /> <Icon icon="stash:filter-light" fontSize={30} />
Filter Filter
@ -508,6 +508,7 @@ const FilterPage = () => {
</div> </div>
{/* Right */} {/* Right */}
<div className="w-full lg:w-[75%]">
<Reveal> <Reveal>
<div className="flex-1"> <div className="flex-1">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
@ -575,6 +576,7 @@ const FilterPage = () => {
</Reveal> </Reveal>
</div> </div>
</div> </div>
</div>
); );
}; };

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

@ -471,7 +471,7 @@ const DetailInfo = () => {
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4"> <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between"> <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm"> <p className="text-xs lg:text-sm">
{t("by")}&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span> {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
</p> </p>
{/* <p className="text-xs lg:text-sm"> {/* <p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn")} &nbsp;|&nbsp;{t("updatedOn")}
@ -503,7 +503,7 @@ const DetailInfo = () => {
</div> </div>
{/* Bagian Kanan */} {/* Bagian Kanan */}
<div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4"> <div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
{isSaved ? ( {isSaved ? (
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<Icon icon="material-symbols:bookmark" width={40} /> <Icon icon="material-symbols:bookmark" width={40} />
@ -605,7 +605,7 @@ const DetailInfo = () => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p> <p className="flex items-start text-lg">{t("comment")}</p>
<Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} /> <Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />

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

@ -382,7 +382,7 @@ const FilterPage = () => {
{/* Left */} {/* Left */}
<div className="flex flex-col lg:flex-row gap-6 p-4"> <div className="flex flex-col lg:flex-row gap-6 p-4">
<div className="lg:w-[30%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md"> <div className="lg:w-[25%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1"> <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} /> <Icon icon="stash:filter-light" fontSize={30} />
Filter Filter
@ -484,7 +484,7 @@ const FilterPage = () => {
</div> </div>
{/* Right */} {/* Right */}
<div className="w-full"> <div className="w-full lg:w-[75%]">
<Reveal> <Reveal>
<div className="w-full"> <div className="w-full">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">

8
app/[locale]/(public)/inbox/update/page.tsx
View File

@ -42,7 +42,7 @@ const UpdateSection = () => {
}, [pages]); }, [pages]);
return ( return (
<div className="max-w-6xl h-screen flex flex-col mx-auto p-4 lg:p-24 gap-5"> <div className="max-w-6xl flex flex-col mx-auto p-4 lg:p-24 gap-5">
<div className="flex items-center justify-center mb-6"> <div className="flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 24 24">
<g fill="#bb3523" fill-rule="evenodd" clip-rule="evenodd"> <g fill="#bb3523" fill-rule="evenodd" clip-rule="evenodd">
@ -64,7 +64,7 @@ const UpdateSection = () => {
</div> </div>
<div className="py-10 px-8 w-[400px] mt-3 border border-black rounded-lg flex flex-col"> <div className="py-10 px-8 w-[400px] mt-3 border border-black rounded-lg flex flex-col">
<h1 className="mb-3 text-lg font-semibold">{t("notifList")}</h1> <h1 className="mb-3 text-lg font-semibold">{t("notifList")}</h1>
<div className="hover:bg-slate-200 rounded-md"> <div className="rounded-md overflow-y-auto space-y-3">
{notifications?.map((list: any) => ( {notifications?.map((list: any) => (
<a className="flex flex-row items-center ml-1" href={"/" + list.redirectUrl}> <a className="flex flex-row items-center ml-1" href={"/" + list.redirectUrl}>
{(() => { {(() => {
@ -134,8 +134,8 @@ const UpdateSection = () => {
); );
} }
})()} })()}
<div className="ml-3"> <div className="flex flex-col ml-3">
<span className="block">{list.message}</span> <span className="">{list.message}</span>
<span className="text-xs">{getTimestamp(new Date(list.createdAt))}</span> <span className="text-xs">{getTimestamp(new Date(list.createdAt))}</span>
</div> </div>
</a> </a>

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

@ -168,7 +168,7 @@ const IndeksDetail = () => {
<div className="text-gray-500 flex border-t mt-4"> <div className="text-gray-500 flex border-t mt-4">
<div className="flex mt-2"> <div className="flex mt-2">
<p className="text-xs lg:text-sm mb-2 "> <p className="text-xs lg:text-sm mb-2 ">
{t("by")}&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB &nbsp; {t("by")}&nbsp;<span className="font-semibold text-gray-500">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB &nbsp;
</p> </p>
</div> </div>
</div> </div>
@ -181,7 +181,7 @@ const IndeksDetail = () => {
{/* Comment */} {/* Comment */}
<div className="w-full"> <div className="w-full">
<div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7]"> <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<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-bases lg:text-lg">{t("comment")}</p> <p className="flex items-start text-bases lg:text-lg">{t("comment")}</p>
<Textarea placeholder="Type your comments here." className="flex w-full" onChange={getInputValue} value={message} /> <Textarea placeholder="Type your comments here." className="flex w-full" onChange={getInputValue} value={message} />

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

@ -152,10 +152,10 @@ const Indeks: React.FC = () => {
<Image width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" /> <Image width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
<div className="flex flex-col justify-between w-full"> <div className="flex flex-col justify-between w-full">
<p className="text-sm">{indeksBottom?.date}</p> <p className="text-sm">{indeksBottom?.date}</p>
<Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800"> <Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800 dark:text-white">
{indeksBottom?.title} {indeksBottom?.title}
</Link> </Link>
<p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p> <p className="text-sm text-gray-600 dark:text-white mt-2">{indeksBottom?.description}</p>
</div> </div>
</div> </div>
) )

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

@ -503,7 +503,7 @@ const Schedule = (props: any) => {
<div className="container relative py-4"> <div className="container relative py-4">
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<a className="text-black flex flex-row w-fit gap-2 py-4 items-center cursor-pointer"> <a className="text-black dark:text-white flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" /> <path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
</svg> </svg>

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

@ -438,7 +438,7 @@ const DetailVideo = () => {
<p className="mt-3">Kreator: {detailDataVideo?.creatorName}</p> */} <p className="mt-3">Kreator: {detailDataVideo?.creatorName}</p> */}
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between"> <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm"> <p className="text-xs lg:text-sm">
{t("by")}&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span> {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
</p> </p>
{/* <p className="text-xs lg:text-sm"> {/* <p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn")} &nbsp;|&nbsp;{t("updatedOn")}
@ -475,7 +475,7 @@ const DetailVideo = () => {
</div> </div>
{/* Bagian Kanan */} {/* Bagian Kanan */}
<div className="md:w-1/4 p-4 bg-[#f7f7f7] rounded-lg mx-4 h-fit"> <div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 rounded-lg mx-4 h-fit">
{isSaved ? ( {isSaved ? (
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<Icon icon="material-symbols:bookmark" width={40} /> <Icon icon="material-symbols:bookmark" width={40} />
@ -577,7 +577,7 @@ const DetailVideo = () => {
</div> </div>
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p> <p className="flex items-start text-lg">{t("comment")}</p>
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} /> <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />

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

@ -396,7 +396,7 @@ const FilterPage = () => {
{/* Left */} {/* Left */}
<div className="flex flex-col lg:flex-row gap-6 p-4"> <div className="flex flex-col lg:flex-row gap-6 p-4">
<div className="lg:w-[55%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md"> <div className="lg:w-[25%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1"> <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} /> <Icon icon="stash:filter-light" fontSize={30} />
Filter Filter
@ -510,8 +510,9 @@ const FilterPage = () => {
</div> </div>
{/* Right */} {/* Right */}
<div className="w-full lg:w-[75%]">
<Reveal> <Reveal>
<div className="flex-1"> <div className="w-full">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy")}</h2> <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
<select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"> <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
@ -523,14 +524,14 @@ const FilterPage = () => {
{isLoading ? ( {isLoading ? (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3"> <div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[280px] w-[380px] rounded-xl" /> <Skeleton className="h-[260px] w-[360px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" /> <Skeleton className="h-[260px] w-[360px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" /> <Skeleton className="h-[260px] w-[360px] rounded-xl" />
</div> </div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3"> <div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[280px] w-[380px] rounded-xl" /> <Skeleton className="h-[260px] w-[360px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" /> <Skeleton className="h-[260px] w-[360px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" /> <Skeleton className="h-[260px] w-[360px] rounded-xl" />
</div> </div>
</div> </div>
) : ( ) : (
@ -574,6 +575,7 @@ const FilterPage = () => {
</Reveal> </Reveal>
</div> </div>
</div> </div>
</div>
); );
}; };

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

@ -10,6 +10,7 @@ const regions = [
{ name: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" }, { name: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" },
{ name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" }, { name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
{ name: "PUSKEU", slug: "puskeu", logo: "/assets/satker/puskeu.png" }, { name: "PUSKEU", slug: "puskeu", logo: "/assets/satker/puskeu.png" },
{ name: "YANMA", slug: "yanma", logo: "/assets/satker/logo-yanma.png" },
{ name: "SSDM", slug: "ssdm", logo: "/assets/satker/ssdm.png" }, { name: "SSDM", slug: "ssdm", logo: "/assets/satker/ssdm.png" },
{ name: "ITWASUM", slug: "itwasum", logo: "/assets/satker/itwasum.png" }, { name: "ITWASUM", slug: "itwasum", logo: "/assets/satker/itwasum.png" },
{ name: "STIK-PTIK", slug: "stik-ptik", logo: "/assets/satker/stik-ptik.png" }, { name: "STIK-PTIK", slug: "stik-ptik", logo: "/assets/satker/stik-ptik.png" },

6
components/landing-page/hero.tsx
View File

@ -72,9 +72,9 @@ const Hero: React.FC = () => {
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg"> <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
<Link href={`${locale}/image/detail/${list?.slug}`}> <Link href={`${locale}/image/detail/${list?.slug}`}>
<h2 className="text-lg font-bold mt-2">{list?.title}</h2> <h2 className="text-lg text-slate-200 dark:text-white font-bold mt-2">{list?.title}</h2>
</Link> </Link>
<p className="text-xs flex flex-row items-center gap-1 mt-1"> <p className="text-xs flex flex-row items-center text-slate-200 dark:text-white gap-1 mt-1">
{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "} {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path <path
@ -144,7 +144,7 @@ const Hero: React.FC = () => {
<div className="w-[280px] lg:w-auto"> <div className="w-[280px] lg:w-auto">
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span> <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
<Link href={`${locale}/image/detail/${item?.slug}`}> <Link href={`${locale}/image/detail/${item?.slug}`}>
<h3 className="text-base font-bold mt-2">{textEllipsis(item?.title, 30)}</h3> <h3 className="text-base font-bold mt-2 h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{item?.title}</h3>
</Link> </Link>
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1"> <p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "} {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}

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

@ -144,27 +144,14 @@ const Navbar = () => {
return ( return (
<div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50"> <div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50">
<div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3"> <div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3">
<div className="flex flex-row gap-8">
{/* Logo */} {/* Logo */}
<Link href={prefixPath} className="flex items-center"> <Link href={prefixPath} className="flex items-center">
<Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={200} height={300} className="object-contain" /> <Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={200} height={300} className="object-contain" />
</Link> </Link>
{/* Mobile Menu Toggle */}
<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>
) : (
<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>
{/* Desktop Navigation */}
<div className="hidden lg:flex items-center gap-5">
{/* Nav Menu */} {/* Nav Menu */}
<div className="hidden lg:flex items-center gap-5">
<NavigationMenu> <NavigationMenu>
<NavigationMenuList> <NavigationMenuList>
<NavigationMenuItem> <NavigationMenuItem>
@ -251,7 +238,23 @@ const Navbar = () => {
</NavigationMenuItem> </NavigationMenuItem>
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>
</div>
</div>
{/* Mobile Menu Toggle */}
<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>
) : (
<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>
{/* Desktop Navigation */}
<div className="hidden lg:flex items-center gap-5">
{roleId == undefined ? ( {roleId == undefined ? (
"" ""
) : ( ) : (
@ -292,7 +295,7 @@ const Navbar = () => {
<span className="w-2 h-2 bg-red-500 rounded-full"></span> <span className="w-2 h-2 bg-red-500 rounded-full"></span>
<span className="font-medium">{t("live")}</span> <span className="font-medium">{t("live")}</span>
</Link> */} </Link> */}
<div className="flex items-center space-x-1 "> <div className="flex items-center">
<a href="https://tvradio.polri.go.id/"> <a href="https://tvradio.polri.go.id/">
<Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " /> <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
</a> </a>
@ -379,7 +382,7 @@ const Navbar = () => {
<PopoverTrigger asChild> <PopoverTrigger asChild>
<a className="cursor-pointer" onClick={() => test()}> <a className="cursor-pointer" onClick={() => test()}>
{" "} {" "}
<Icon icon="basil:envelope-outline" color="black" width="30" /> <Icon icon="basil:envelope-outline" color="currentColor" width="30" className="text-black dark:text-white" />
</a> </a>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[320px] p-0 flex flex-col mt-2" align="end"> <PopoverContent className="w-[320px] p-0 flex flex-col mt-2" align="end">
@ -666,7 +669,7 @@ const Navbar = () => {
</> </>
) : ( ) : (
// Masuk and Daftar buttons for roleId === null // Masuk and Daftar buttons for roleId === null
<div className="flex justify-center items-center mx-3 gap-5"> <div className="flex justify-center items-center mx-3 gap-8">
<Link href="/auth" className="w-full lg:w-max 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-max px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center">
{t("logIn")} {t("logIn")}
</Link> </Link>

60
components/partials/header/locale-switcher.tsx
View File

@ -1,19 +1,13 @@
'use client'; "use client";
import { useLocale } from 'next-intl'; import { useLocale } from "next-intl";
import { useParams } from 'next/navigation'; import { useParams } from "next/navigation";
import { locales } from '@/config'; import { locales } from "@/config";
import { usePathname, useRouter } from '@/i18n/routing'; import { usePathname, useRouter } from "@/i18n/routing";
import { useTransition } from 'react'; import { useTransition } from "react";
import { import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
Select, import Image from "next/image";
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import Image from 'next/image';
export default function LocalSwitcher() { export default function LocalSwitcher() {
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
@ -24,44 +18,25 @@ export default function LocalSwitcher() {
const onSelectChange = (nextLocale: string) => { const onSelectChange = (nextLocale: string) => {
startTransition(() => { startTransition(() => {
router.replace(pathname, { locale: nextLocale }); router.replace(pathname, { locale: nextLocale });
}); });
}; };
return ( return (
<Select onValueChange={onSelectChange} defaultValue={localActive}> <Select onValueChange={onSelectChange} defaultValue={localActive}>
<SelectTrigger className='w-[94px] border-none read-only:bg-transparent'> <SelectTrigger className="w-[94px] border-none read-only:bg-transparent">
<SelectValue placeholder="Select a language" /> <SelectValue placeholder="Select a language" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem <SelectItem value="en" className="border-none">
value="en" <div className="flex items-center gap-1">
className='border-none' <Image src="/images/all-img/flag-1.png" alt="flag" width={24} height={24} className="w-6 h-6 rounded-full" />
> <span className="font-medium text-sm text-default-600 dark:text-default-700">En</span>
<div className='flex items-center gap-1'>
<Image
src="/images/all-img/flag-1.png"
alt='flag'
width={24}
height={24}
className='w-6 h-6 rounded-full'
/>
<span className='font-medium text-sm text-default-600 dark:text-default-700'>En</span>
</div> </div>
</SelectItem> </SelectItem>
<SelectItem <SelectItem value="in" className="border-none">
value="in" <div className="flex items-center gap-1">
className='border-none' <Image src="/images/all-img/flag-3.png" alt="flag" width={24} height={24} className="w-6 h-6 rounded-full" />
> <span className="font-medium text-sm text-default-600 dark:text-default-700">In</span>
<div className='flex items-center gap-1'>
<Image
src="/images/all-img/flag-3.png"
alt='flag'
width={24}
height={24}
className='w-6 h-6 rounded-full'
/>
<span className='font-medium text-sm text-default-600 dark:text-default-700'>In</span>
</div> </div>
</SelectItem> </SelectItem>
{/* <SelectItem value="ar"> {/* <SelectItem value="ar">
@ -78,6 +53,5 @@ export default function LocalSwitcher() {
</SelectItem> */} </SelectItem> */}
</SelectContent> </SelectContent>
</Select> </Select>
); );
} }

BIN
public/assets/satker/logo-yanma.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 KiB