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

feat: add en language in filter section

This commit is contained in:
sabdayagra 2025-01-06 21:36:37 +07:00
parent fd34c280d3
commit 0814621168
9 changed files with 188 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,30 +3,10 @@ import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
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 { import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
formatDateToIndonesian,
getOnlyDate,
getOnlyMonthAndYear,
} from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation"; import { useParams, usePathname, useSearchParams } from "next/navigation";
import { import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
getUserLevelListByParent, import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
listCategory,
listData,
listDataRegional,
} from "@/service/landing/landing";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination"; import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal"; import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing"; import { Link, useRouter } from "@/i18n/routing";
@ -34,13 +14,8 @@ import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker"; import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
Carousel, import { useTranslations } from "next-intl";
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -60,11 +35,8 @@ const FilterPage = () => {
const [totalData, setTotalData] = React.useState<number>(1); const [totalData, setTotalData] = React.useState<number>(1);
const [totalPage, setTotalPage] = React.useState<number>(1); const [totalPage, setTotalPage] = React.useState<number>(1);
const [sorting, setSorting] = React.useState<SortingState>([]); const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>( const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
[] const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
@ -85,9 +57,7 @@ const FilterPage = () => {
const [categoryFilter, setCategoryFilter] = useState<any>([]); const [categoryFilter, setCategoryFilter] = useState<any>([]);
const [monthYearFilter, setMonthYearFilter] = useState<any>(); const [monthYearFilter, setMonthYearFilter] = useState<any>();
const [searchTitle, setSearchTitle] = useState<string>(""); const [searchTitle, setSearchTitle] = useState<string>("");
const [sortByOpt, setSortByOpt] = useState<any>( const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
sortBy === "popular" ? "clickCount" : "createdAt"
);
const isRegional = asPath?.includes("regional"); const isRegional = asPath?.includes("regional");
const isSatker = asPath?.includes("satker"); const isSatker = asPath?.includes("satker");
const [formatFilter, setFormatFilter] = useState<any>([]); const [formatFilter, setFormatFilter] = useState<any>([]);
@ -99,6 +69,7 @@ const FilterPage = () => {
const [handleClose, setHandleClose] = useState(false); const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [userLevels, setUserLevels] = useState([]); const [userLevels, setUserLevels] = useState([]);
const t = useTranslations("FilterPage");
// const [startDate, endDate] = dateRange; // const [startDate, endDate] = dateRange;
@ -123,14 +94,8 @@ const FilterPage = () => {
useEffect(() => { useEffect(() => {
if (categorie) { if (categorie) {
setCategoryFilter( setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie] console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
);
console.log(
"Kategori",
categorie,
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
);
} }
}, [categorie]); }, [categorie]);
@ -148,22 +113,10 @@ const FilterPage = () => {
} }
console.log(monthYearFilter, "monthFilter"); console.log(monthYearFilter, "monthFilter");
initState(); initState();
}, [ }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
change,
asPath,
monthYearFilter,
page,
sortBy,
sortByOpt,
title,
startDateString,
endDateString,
categorie,
formatFilter,
]);
async function getCategories() { async function getCategories() {
const category = await listCategory("1"); const category = await listCategory("4");
const resCategory = category?.data?.data?.content; const resCategory = category?.data?.data?.content;
setCategories(resCategory); setCategories(resCategory);
} }
@ -183,17 +136,14 @@ const FilterPage = () => {
async function getDataAll() { async function getDataAll() {
if (asPath?.includes("/polda/") == true) { if (asPath?.includes("/polda/") == true) {
if (asPath?.split("/")[2] !== "[polda_name]") { if (asPath?.split("/")[2] !== "[polda_name]") {
const filter = const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title == undefined ? "" : title; const name = title == undefined ? "" : title;
const format = formatFilter == undefined ? "" : formatFilter?.join(","); const format = formatFilter == undefined ? "" : formatFilter?.join(",");
const filterGroup = group == undefined ? asPath.split("/")[2] : group; const filterGroup = group == undefined ? asPath.split("/")[2] : group;
loading(); loading();
const response = await listData( const response = await listData(
"1", "4",
name, name,
filter, filter,
12, 12,
@ -204,14 +154,8 @@ const FilterPage = () => {
filterGroup, filterGroup,
startDateString, startDateString,
endDateString, endDateString,
monthYearFilter monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
? getOnlyMonthAndYear(monthYearFilter) monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
?.split("/")[0]
?.replace("", "")
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: ""
); );
close(); close();
// setGetTotalPage(response?.data?.data?.totalPages); // setGetTotalPage(response?.data?.data?.totalPages);
@ -225,16 +169,13 @@ const FilterPage = () => {
setTotalContent(response?.data?.data?.totalElements); setTotalContent(response?.data?.data?.totalElements);
} }
} else { } else {
const filter = const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title == undefined ? "" : title; const name = title == undefined ? "" : title;
const format = formatFilter == undefined ? "" : formatFilter?.join(","); const format = formatFilter == undefined ? "" : formatFilter?.join(",");
loading(); loading();
const response = await listData( const response = await listData(
"1", "4",
name, name,
filter, filter,
12, 12,
@ -245,12 +186,8 @@ const FilterPage = () => {
"", "",
startDateString, startDateString,
endDateString, endDateString,
monthYearFilter monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: ""
); );
close(); close();
// setGetTotalPage(response?.data?.data?.totalPages); // setGetTotalPage(response?.data?.data?.totalPages);
@ -300,10 +237,7 @@ const FilterPage = () => {
}; };
async function getDataRegional() { async function getDataRegional() {
const filter = const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
categoryFilter?.length > 0
? categoryFilter?.sort().join(",")
: categorie || "";
const name = title == undefined ? "" : title; const name = title == undefined ? "" : title;
const format = formatFilter == undefined ? "" : formatFilter?.join(","); const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@ -316,12 +250,8 @@ const FilterPage = () => {
"", "",
startDateString, startDateString,
endDateString, endDateString,
monthYearFilter monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
: "",
monthYearFilter
? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
: "",
12, 12,
pages, pages,
sortByOpt sortByOpt
@ -431,10 +361,10 @@ const FilterPage = () => {
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black"> <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
<p> <p>
{" "} {" "}
Audio {">"} <span className="font-bold">Semua Audio</span> Audio {">"} <span className="font-bold">{t("allAudio")}</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`Terdapat ${totalContent} artikel berisi Audio yang dapat diunduh`}</p> <p>{`${t("thereIs")} ${totalContent} ${t("downloadableAudio")}`}</p>
</div> </div>
{/* Left */} {/* Left */}
@ -447,11 +377,8 @@ const FilterPage = () => {
<div className="border-t border-black my-4 dark:border-white"></div> <div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<label <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
htmlFor="search" {t("search")}
className="block text-sm font-medium text-gray-700 dark:text-white"
>
Pencarian
</label> </label>
<Input <Input
value={searchTitle} value={searchTitle}
@ -460,79 +387,49 @@ const FilterPage = () => {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
type="text" type="text"
id="search" id="search"
placeholder="Cari judul..." placeholder={t("searchTitle")}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-sm border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 dark:text-white"> <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
Tahun & Bulan
</label>
<ReactDatePicker <ReactDatePicker
selected={monthYearFilter} selected={monthYearFilter}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText="Pilih Tahun dan Bulan" placeholderText={t("selectYear")}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 dark:text-white"> <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
Tanggal
</label>
<div className="flex flex-row justify justify-between gap-2"> <div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker <ReactDatePicker
selectsRange selectsRange
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]} startDate={dateRange[0]}
endDate={dateRange[1]} endDate={dateRange[1]}
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText="Pilih Tanggal" placeholderText={t("searchDate")}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center"> <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div> </div>
</div> </div>
<div> <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white"> <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
Kategori
</h3>
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
{categories.map((category: any) => ( {categories.map((category: any) => (
<li key={category?.id}> <li key={category?.id}>
<label <label className="inline-flex items-center" htmlFor={`${category.id}`}>
className="inline-flex items-center" <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
htmlFor={`${category.id}`} <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label> </label>
</li> </li>
))} ))}
@ -542,48 +439,25 @@ const FilterPage = () => {
<div className="border-t border-black my-4 dark:border-white"></div> <div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */} {/* Garis */}
<div> <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white"> <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format</h3>
Format Audio
</h3>
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
<li> <li>
<label className="inline-flex items-center"> <label className="inline-flex items-center">
<Checkbox <Checkbox id="png" value="png" checked={formatFilter.includes("wav")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wav")} />
id="png" <span className="ml-2 text-gray-700 dark:text-white">WAV</span>
value="png"
checked={formatFilter.includes("wav")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "wav")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
WAV
</span>
</label> </label>
</li> </li>
<li> <li>
<label className="inline-flex items-center"> <label className="inline-flex items-center">
<Checkbox <Checkbox id="jpeg" value="jpeg" checked={formatFilter.includes("mp3")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp3")} />
id="jpeg" <span className="ml-2 text-gray-700 dark:text-white">MP3</span>
value="jpeg"
checked={formatFilter.includes("mp3")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "mp3")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
MP3
</span>
</label> </label>
</li> </li>
</ul> </ul>
</div> </div>
<div className="border-t border-black dark:border-white my-4"></div> <div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center"> <div className="text-center">
<a <a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b> <b>Reset Filter</b>
</a> </a>
</div> </div>
@ -594,14 +468,10 @@ const FilterPage = () => {
<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">
<h2 className="text-lg font-semibold">Urutkan berdasarkan</h2> <h2 className="text-lg font-semibold">{t("sortBy")} </h2>
<select <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">
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} <option value="latest">{t("latest")}</option>
onChange={(e) => handleSorting(e)} <option value="popular">{t("mostPopular")}</option>
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
>
<option value="terbaru">Terbaru</option>
<option value="terpopuler">Terpopuler</option>
</select> </select>
</div> </div>
@ -611,23 +481,11 @@ const FilterPage = () => {
<Carousel className="w-full max-w-7xl mx-auto"> <Carousel className="w-full max-w-7xl mx-auto">
<CarouselContent> <CarouselContent>
{audioData?.map((audio: any) => ( {audioData?.map((audio: any) => (
<CarouselItem <CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/3">
key={audio?.id}
className="md:basis-1/2 lg:basis-1/3"
>
<div className="flex flex-row gap-6"> <div className="flex flex-row gap-6">
<Link <Link href={`/audio/detail/${audio?.slug}`} className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
href={`/audio/detail/${audio?.slug}`}
className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
>
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16"> <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
<svg <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
width="32"
height="34"
viewBox="0 0 32 34"
fill="null"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z" d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
fill="white" fill="white"
@ -637,20 +495,9 @@ const FilterPage = () => {
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1">
<div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm"> <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
{formatDateToIndonesian( {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}{" "}
new Date(audio?.createdAt)
)}{" "}
{audio?.timezone ? audio?.timezone : "WIB"} |{" "}
<Icon
icon="formkit:eye"
width="15"
height="15"
/>{" "}
{audio?.clickCount}{" "}
</div>
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
{audio?.title}
</div> </div>
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{audio?.title}</div>
</div> </div>
</Link> </Link>
</div> </div>
@ -664,19 +511,11 @@ const FilterPage = () => {
</div> </div>
) : ( ) : (
<p className="flex items-center justify-center text-black"> <p className="flex items-center justify-center text-black">
<img <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
src="/assets/empty-data.png"
alt="empty"
className="h-60 w-60 my-4"
/>
</p> </p>
)} )}
<LandingPagination <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
table={table}
totalData={totalData}
totalPage={totalPage}
/>
</div> </div>
</Reveal> </Reveal>
</div> </div>

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

@ -14,6 +14,7 @@ import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker"; import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -48,6 +49,7 @@ const FilterPage = () => {
const categorie = searchParams?.get("category"); const categorie = searchParams?.get("category");
const group = searchParams?.get("group"); const group = searchParams?.get("group");
const [, setGetTotalPage] = useState(); const [, setGetTotalPage] = useState();
const t = useTranslations("FilterPage");
let typingTimer: any; let typingTimer: any;
const doneTypingInterval = 1500; const doneTypingInterval = 1500;
const [contentDocument, setContentDocument] = useState([]); const [contentDocument, setContentDocument] = useState([]);
@ -371,15 +373,15 @@ const FilterPage = () => {
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black"> <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
<p> <p>
{" "} {" "}
Teks {">"} <span className="font-bold">Semua Teks</span> {t("text")} {">"} <span className="font-bold">{t("allText")}</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`Terdapat ${totalContent} artikel berisi Teks yang dapat diunduh`}</p> <p>{`${t("thereIs")} ${totalContent} ${t("downloadableText")}`}</p>
</div> </div>
{/* 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-[40%] 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
@ -388,7 +390,7 @@ const FilterPage = () => {
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white"> <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
Pencarian {t("search")}
</label> </label>
<Input <Input
value={searchTitle} value={searchTitle}
@ -397,35 +399,35 @@ const FilterPage = () => {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
type="text" type="text"
id="search" id="search"
placeholder="Cari judul..." placeholder={t("searchTitle")}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label> <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
<ReactDatePicker <ReactDatePicker
selected={monthYearFilter} selected={monthYearFilter}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText="Pilih Tahun dan Bulan" placeholderText={t("selectYear")}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label> <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
<div className="flex flex-row justify justify-between gap-2"> <div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker <ReactDatePicker
selectsRange selectsRange
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]} startDate={dateRange[0]}
endDate={dateRange[1]} endDate={dateRange[1]}
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText="Pilih Tanggal" placeholderText={t("selectDate")}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div> <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
@ -433,7 +435,7 @@ const FilterPage = () => {
</div> </div>
<div> <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3> <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
{categories.map((category: any) => ( {categories.map((category: any) => (
<li key={category?.id}> <li key={category?.id}>
@ -449,7 +451,7 @@ const FilterPage = () => {
<div className="border-t border-black my-4 dark:border-white"></div> <div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */} {/* Garis */}
<div> <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Teks</h3> <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format</h3>
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
<li> <li>
<label className="inline-flex items-center"> <label className="inline-flex items-center">
@ -496,10 +498,10 @@ const FilterPage = () => {
<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">
<h2 className="text-lg font-semibold">Urutkan berdasarkan</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">
<option value="terbaru">Terbaru</option> <option value="latest">{t("latest")}</option>
<option value="terpopuler">Terpopuler</option> <option value="popular">{t("mostPopular")}</option>
</select> </select>
</div> </div>

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

@ -14,6 +14,7 @@ import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker"; import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -67,6 +68,7 @@ const FilterPage = () => {
const [handleClose, setHandleClose] = useState(false); const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [userLevels, setUserLevels] = useState([]); const [userLevels, setUserLevels] = useState([]);
const t = useTranslations("FilterPage");
// const [startDate, endDate] = dateRange; // const [startDate, endDate] = dateRange;
@ -358,15 +360,15 @@ const FilterPage = () => {
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black"> <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
<p> <p>
{" "} {" "}
Foto {">"} <span className="font-bold">Semua Foto</span> {t("image")} {">"} <span className="font-bold">{t("allImage")}</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`Terdapat ${totalContent} artikel berisi Foto yang dapat diunduh`}</p> <p>{`${t("thereIs")} ${totalContent} ${t("downloadableImage")}`}</p>
</div> </div>
{/* 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-[40%] 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
@ -375,7 +377,7 @@ const FilterPage = () => {
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white"> <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
Pencarian {t("search")}
</label> </label>
<Input <Input
value={searchTitle} value={searchTitle}
@ -384,35 +386,35 @@ const FilterPage = () => {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
type="text" type="text"
id="search" id="search"
placeholder="Cari judul..." placeholder={t("searchTitle")}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label> <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
<ReactDatePicker <ReactDatePicker
selected={monthYearFilter} selected={monthYearFilter}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText="Pilih Tahun dan Bulan" placeholderText={t("selectYear")}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label> <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
<div className="flex flex-row justify justify-between gap-2"> <div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker <ReactDatePicker
selectsRange selectsRange
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]} startDate={dateRange[0]}
endDate={dateRange[1]} endDate={dateRange[1]}
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText="Pilih Tanggal" placeholderText={t("selectDate")}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div> <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
@ -420,7 +422,7 @@ const FilterPage = () => {
</div> </div>
<div> <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3> <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
{categories.map((category: any) => ( {categories.map((category: any) => (
<li key={category?.id}> <li key={category?.id}>
@ -436,7 +438,7 @@ const FilterPage = () => {
<div className="border-t border-black my-4 dark:border-white"></div> <div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */} {/* Garis */}
<div> <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3> <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format</h3>
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
<li> <li>
<label className="inline-flex items-center"> <label className="inline-flex items-center">
@ -471,10 +473,10 @@ const FilterPage = () => {
<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">
<h2 className="text-lg font-semibold">Urutkan berdasarkan</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">
<option value="terbaru">Terbaru</option> <option value="latest">{t("latest")}</option>
<option value="terpopuler">Terpopuler</option> <option value="popular">{t("mostPopular")}</option>
</select> </select>
</div> </div>

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

@ -14,6 +14,7 @@ import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker"; import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -64,6 +65,7 @@ const FilterPage = () => {
const [handleClose, setHandleClose] = useState(false); const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [userLevels, setUserLevels] = useState([]); const [userLevels, setUserLevels] = useState([]);
const t = useTranslations("FilterPage");
// const [startDate, endDate] = dateRange; // const [startDate, endDate] = dateRange;
@ -376,10 +378,11 @@ const FilterPage = () => {
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black"> <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
<p> <p>
{" "} {" "}
Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span> {t("video")}&nbsp;
{">"} <span className="font-bold">{t("allVideo")}</span>
</p> </p>
<p className="font-bold">|</p> <p className="font-bold">|</p>
<p>{`Terdapat ${totalContent} artikel berisi Audio Visual yang dapat diunduh`}</p> <p>{`${t("thereIs")} ${totalContent} ${t("downloadableVideo")}`}</p>
</div> </div>
{/* Left */} {/* Left */}
@ -393,7 +396,7 @@ const FilterPage = () => {
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white"> <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
Pencarian {t("search")}
</label> </label>
<Input <Input
value={searchTitle} value={searchTitle}
@ -402,35 +405,35 @@ const FilterPage = () => {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
type="text" type="text"
id="search" id="search"
placeholder="Cari judul..." placeholder={t("searchTitle")}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label> <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
<ReactDatePicker <ReactDatePicker
selected={monthYearFilter} selected={monthYearFilter}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)} onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy" dateFormat="MM | yyyy"
placeholderText="Pilih Tahun dan Bulan" placeholderText={t("selectYear")}
showMonthYearPicker showMonthYearPicker
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label> <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
<div className="flex flex-row justify justify-between gap-2"> <div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker <ReactDatePicker
selectsRange selectsRange
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" className="mt-1 w-full text-sm border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]} startDate={dateRange[0]}
endDate={dateRange[1]} endDate={dateRange[1]}
onChange={(update) => { onChange={(update) => {
setDateRange(update); setDateRange(update);
}} }}
placeholderText="Pilih Tanggal" placeholderText={t("selectDate")}
onCalendarClose={() => setCalenderState(!calenderState)} onCalendarClose={() => setCalenderState(!calenderState)}
/> />
<div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div> <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
@ -438,7 +441,7 @@ const FilterPage = () => {
</div> </div>
<div> <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3> <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
{categories.map((category: any) => ( {categories.map((category: any) => (
<li key={category?.id}> <li key={category?.id}>
@ -454,7 +457,7 @@ const FilterPage = () => {
<div className="border-t border-black my-4 dark:border-white"></div> <div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */} {/* Garis */}
<div> <div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3> <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format</h3>
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
<li> <li>
<label className="inline-flex items-center"> <label className="inline-flex items-center">
@ -501,10 +504,10 @@ const FilterPage = () => {
<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">
<h2 className="text-lg font-semibold">Urutkan berdasarkan</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">
<option value="terbaru">Terbaru</option> <option value="latest">{t("latest")}</option>
<option value="terpopuler">Terpopuler</option> <option value="popular">{t("mostPopular")}</option>
</select> </select>
</div> </div>

2
components/landing-page/content-category.tsx
View File

@ -22,7 +22,7 @@ const ContentCategory = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [seeAllValue, setSeeAllValue] = useState(false); const [seeAllValue, setSeeAllValue] = useState(false);
const pathname = usePathname(); const pathname = usePathname();
console.log("split", pathname);
return ( return (
<div className="mx-auto px-4 lg:px-20 py-10 max-w-screen-2xl "> <div className="mx-auto px-4 lg:px-20 py-10 max-w-screen-2xl ">
<Reveal> <Reveal>

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

@ -33,7 +33,6 @@ type Detail = {
const Navbar = () => { const Navbar = () => {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const router = useRouter(); const router = useRouter();
const pathname = usePathname();
const params = useParams(); const params = useParams();
const locale = params?.locale; const locale = params?.locale;
const [language, setLanguage] = useState<"id" | "en">("id"); const [language, setLanguage] = useState<"id" | "en">("id");
@ -45,6 +44,7 @@ const Navbar = () => {
const t = useTranslations("LandingPage"); const t = useTranslations("LandingPage");
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [onSearch, setOnSearch] = useState(""); const [onSearch, setOnSearch] = useState("");
const pathname = usePathname();
const onLogout = () => { const onLogout = () => {
Object.keys(Cookies.get()).forEach((cookieName) => { Object.keys(Cookies.get()).forEach((cookieName) => {
@ -125,26 +125,41 @@ const Navbar = () => {
{t("content")} {t("content")}
</a> </a>
</NavigationMenuTrigger> </NavigationMenuTrigger>
<NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full"> <NavigationMenuContent className=" rounded-md overflow-hidden w-">
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2"> <NavigationMenuLink onClick={() => router.push("/image/filter")} className="flex place-items-start gap-1.5 p-2">
<p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer"> <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
<FiImage className="mr-2" /> <FiImage className="mr-2" />
{t("image")} {t("image")}
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 "> <NavigationMenuLink onClick={() => router.push("/video/filter")} 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"> {pathname?.split("/")[1] == "in" ? (
<>
<p className="text-slate-600 text-sm dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-0 py-2 cursor-pointer">
<FiYoutube className="mr-2" />
{t("video")}
</p>
</>
) : (
<>
<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" />
{t("video")}
</p>
</>
)}
{/* <p className="text-slate-600 text-sm dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-0 py-2 cursor-pointer">
<FiYoutube className="mr-2" /> <FiYoutube className="mr-2" />
{t("video")} {t("video")}
</p> </p> */}
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2"> <NavigationMenuLink onClick={() => router.push("/document/filter")} className="flex place-items-start gap-1.5 p-2">
<p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer"> <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
<FiFile className="mr-2" /> <FiFile className="mr-2" />
{t("text")} {t("text")}
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 "> <NavigationMenuLink onClick={() => router.push("/audio/filter")} className="flex place-items-start gap-1.5 p-2 ">
<p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer"> <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
<FiMusic className="mr-2" /> <FiMusic className="mr-2" />
{t("audio")}{" "} {t("audio")}{" "}

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

@ -44,7 +44,7 @@ const NewContent = (props: { type: string }) => {
{pathname?.split("/")[1] == "in" ? ( {pathname?.split("/")[1] == "in" ? (
<> <>
<span className="text-black ">{t("content")}</span>&nbsp; <span className="text-black ">{t("content")}</span>&nbsp;
{props.type == "popular" ? "Populer" : props.type == "latest" ? t("new") : "Serupa"} {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}
</> </>
) : ( ) : (
<> <>

25
messages/en.json
View File

@ -344,5 +344,30 @@
"contentManagement": "Content Management", "contentManagement": "Content Management",
"live": "Live", "live": "Live",
"notFound": "Not Found" "notFound": "Not Found"
},
"FilterPage": {
"image": "Image",
"video": "Video",
"text": "Text",
"audio": "Audio",
"allImage": "All Image",
"allVideo": "All Video",
"allText": "All Text",
"allAudio": "All Audio",
"search": "Search",
"searchTitle": "Find Title...",
"monthYear": "Month and Year",
"thereIs": "There is",
"downloadableImage": "downloadable image",
"downloadableVideo": "downloadable video",
"downloadableText": "downloadable text",
"downloadableAudio": "downloadable audio",
"date": "Date",
"selectYear": "Select Month and Year",
"selectDate": "Select Date",
"categories": "Categories",
"sortBy": "Sort by",
"latest": "Latest",
"mostPopular": "Most Popular"
} }
} }

25
messages/in.json
View File

@ -344,5 +344,30 @@
"seeLess": "Lihat Lebih Sedikit", "seeLess": "Lihat Lebih Sedikit",
"notFound": "Tidak Ditemukan", "notFound": "Tidak Ditemukan",
"division": "Satker" "division": "Satker"
},
"FilterPage": {
"image": "Foto",
"video": "Audio Visual",
"text": "Teks",
"audio": "Audio",
"allImage": "Semua Foto",
"allVideo": "Semua Audio Visual",
"allText": "Semua Teks",
"allAudio": "Semua Audio",
"search": "Pencarian",
"searchTitle": "Cari Judul...",
"monthYear": "Bulan dan Tahun",
"thereIs": "Terdapat",
"downloadableImage": "artikel berisi Foto yang dapat di unduh",
"downloadableVideo": "artikel berisi Audio Visual yang dapat di unduh",
"downloadableText": "artikel berisi Teks yang dapat di unduh",
"downloadableAudio": "artikel berisi Audio yang dapat di unduh",
"date": "Tanggal",
"selectYear": "Pilih Bulan dan Tahun",
"selectDate": "Pilih Tanggal",
"categories": "Kategori",
"sortBy": "Urutkan Berdasarkan",
"latest": "Terbaru",
"mostPopular": "Terpopuler"
} }
} }