connect api to indeks and Konten
This commit is contained in:
parent
f20a26cf07
commit
8e049a1ac9
|
|
@ -1,17 +1,10 @@
|
|||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
|
||||
const dummyDescription = [
|
||||
{ id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
];
|
||||
import { getListContent } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
|
||||
const categories = [
|
||||
{ id: 1, title: "HUT HUMAS KE - 73" },
|
||||
|
|
@ -33,6 +26,16 @@ const formatAudio = [
|
|||
];
|
||||
|
||||
const FilterPage = () => {
|
||||
const [audioData, setAudioData] = useState<any>();
|
||||
const [page, setPage] = useState(1);
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
const initFetch = async () => {
|
||||
const response = await getListContent({ page: page - 1, size: 12, sortBy: "createdAt", contentTypeId: "4" });
|
||||
console.log(response);
|
||||
setAudioData(response?.data?.data?.content);
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Header */}
|
||||
|
|
@ -118,8 +121,8 @@ const FilterPage = () => {
|
|||
</div>
|
||||
{/* Card */}
|
||||
<div className=" grid grid-cols-1 gap-6 ">
|
||||
{dummyDescription.map((description) => (
|
||||
<a href="#" key={description.id} className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
|
||||
{audioData?.map((audio: any) => (
|
||||
<a href="#" key={audio?.id} className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 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-16">
|
||||
<svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -131,9 +134,9 @@ const FilterPage = () => {
|
|||
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
|
||||
{description.date} | <Icon icon="formkit:eye" width="15" height="15" /> 518
|
||||
{formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
|
||||
</div>
|
||||
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{description.title}</div>
|
||||
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.title}</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<div className="mt-2">
|
||||
|
|
@ -141,7 +144,7 @@ const FilterPage = () => {
|
|||
</div>
|
||||
<div className="flex flex-row items-center justify-center text-gray-500 dark:text-gray-400">
|
||||
<img src="/assets/audio-icon.png" alt="#" className="flex items-center justify-center" />
|
||||
<div className="flex mx-2 items-center justify-center">{description.duration}</div>
|
||||
<div className="flex mx-2 items-center justify-center">{audio?.duration}</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
|
|||
import { auth } from "@/lib/auth";
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import ThemeCustomize from "@/components/partials/customizer";
|
|||
import DashCodeHeader from "@/components/partials/header";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { getListContent } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
|
||||
const dummyDescription = [
|
||||
{ id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
|
|
@ -44,6 +46,16 @@ const formatAudio = [
|
|||
];
|
||||
|
||||
const DocumentPage = () => {
|
||||
const [documentData, setDocumentData] = useState<any>();
|
||||
const [page, setPage] = useState(1);
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
const initFetch = async () => {
|
||||
const response = await getListContent({ page: page - 1, size: 12, sortBy: "createdAt", contentTypeId: "3" });
|
||||
console.log(response);
|
||||
setDocumentData(response?.data?.data?.content);
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Header */}
|
||||
|
|
@ -130,8 +142,8 @@ const DocumentPage = () => {
|
|||
|
||||
{/* Card */}
|
||||
<div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{dummyDescription.map((description) => (
|
||||
<a href="#" key={description.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
|
||||
{documentData?.map((document: any) => (
|
||||
<a href="#" key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
|
||||
<div className="flex items-center justify-center rounded-lg w-16 h-16">
|
||||
<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -143,9 +155,9 @@ const DocumentPage = () => {
|
|||
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
|
||||
{description.date} | <Icon icon="formkit:eye" width="15" height="15" /> 518
|
||||
{formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
|
||||
</div>
|
||||
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{description.title}</div>
|
||||
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.title}</div>
|
||||
<div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
|
||||
<path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
|
|||
import { auth } from "@/lib/auth";
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import ThemeCustomize from "@/components/partials/customizer";
|
|||
import DashCodeHeader from "@/components/partials/header";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import ThemeCustomize from "@/components/partials/customizer";
|
|||
import DashCodeHeader from "@/components/partials/header";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { generateLocalizedPath } from "@/utils/globals";
|
||||
import { formatDateToIndonesian, generateLocalizedPath } from "@/utils/globals";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { getListContent } from "@/service/landing/landing";
|
||||
import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import TablePagination from "@/components/table/table-pagination";
|
||||
import { Response } from "@dnd-kit/core/dist/sensors/types";
|
||||
|
||||
const dummyImage = [
|
||||
{ id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
|
|
@ -43,6 +43,54 @@ const FilterPage = () => {
|
|||
const pathname = usePathname();
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [totalPage, setTotalPage] = useState(1);
|
||||
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
|
||||
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
const [imageData, setImageData] = useState<any>();
|
||||
const [page, setPage] = useState(1);
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
const initFetch = async () => {
|
||||
const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "1" });
|
||||
console.log(response);
|
||||
|
||||
const data = response.data?.data;
|
||||
const contentData = data?.content;
|
||||
contentData.forEach((item: any, index: number) => {
|
||||
item.no = (page - 1) * 6 + index + 1;
|
||||
});
|
||||
setImageData(contentData);
|
||||
};
|
||||
const table = useReactTable({
|
||||
data: imageData,
|
||||
columns: columns,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
onPaginationChange: setPagination,
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
columnVisibility,
|
||||
rowSelection,
|
||||
pagination,
|
||||
},
|
||||
});
|
||||
console.log("table", table);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
|
|
@ -50,18 +98,16 @@ const FilterPage = () => {
|
|||
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
|
||||
<p>
|
||||
{" "}
|
||||
Foto {">"} <span className="font-bold">Semua Foto</span>
|
||||
Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span>
|
||||
</p>
|
||||
<p className="font-bold">|</p>
|
||||
<p>Terdapat 32499 artikel berisi Foto yang dapat diunduh </p>
|
||||
<p>Terdapat 324911 artikel berisi Audio Visual yang dapat diunduh </p>
|
||||
</div>
|
||||
{/* Left */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 p-4">
|
||||
{/* Sidebar Kiri */}
|
||||
<div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
|
||||
<h2 className="text-lg font-semibold mb-4">Filter</h2>
|
||||
<div className="space-y-6">
|
||||
{/* Pencarian */}
|
||||
<div>
|
||||
<label htmlFor="search" className="block text-sm font-medium text-gray-700">
|
||||
Pencarian
|
||||
|
|
@ -69,7 +115,6 @@ const FilterPage = () => {
|
|||
<input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
|
||||
</div>
|
||||
|
||||
{/* Tahun & Bulan */}
|
||||
<div>
|
||||
<label htmlFor="month" className="block text-sm font-medium text-gray-700">
|
||||
Tahun & Bulan
|
||||
|
|
@ -77,7 +122,6 @@ const FilterPage = () => {
|
|||
<input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
|
||||
</div>
|
||||
|
||||
{/* Tanggal */}
|
||||
<div>
|
||||
<label htmlFor="date" className="block text-sm font-medium text-gray-700">
|
||||
Tanggal
|
||||
|
|
@ -85,7 +129,6 @@ const FilterPage = () => {
|
|||
<input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
|
||||
</div>
|
||||
|
||||
{/* Kategori */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-700">Kategori</h3>
|
||||
<ul className="mt-2 space-y-2">
|
||||
|
|
@ -124,22 +167,23 @@ const FilterPage = () => {
|
|||
<h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
|
||||
<select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
|
||||
<option value="terbaru">Terbaru</option>
|
||||
<option value="terlama">Terpopuler</option>
|
||||
<option value="terlama">Terlama</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{dummyImage.map((image) => (
|
||||
<Card key={image.id} className="hover:scale-110 transition-transform duration-300">
|
||||
<CardContent onClick={() => router.push(generateLocalizedPath(`/image/detail/${image.id}`, String(locale)))} className="flex flex-col text-xs lg:text-sm p-0">
|
||||
<img src={image.thumbnail} className="h-60 object-cover w-full items-center justify-center cursor-pointer rounded-lg" />
|
||||
<div className="flex flex-row items-center gap-2 mx-2">
|
||||
{image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
|
||||
{imageData?.map((image: any) => (
|
||||
<Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
|
||||
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
<img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
|
||||
<div className="flex flex-row items-center gap-2 text-[10px] mx-2">
|
||||
{formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
|
||||
{image?.clickCount}{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
|
||||
</svg>{" "}
|
||||
</div>
|
||||
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image.title}</div>
|
||||
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
|
|||
import { auth } from "@/lib/auth";
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
|
|||
import { auth } from "@/lib/auth";
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,107 +1,96 @@
|
|||
"use client";
|
||||
|
||||
import { getIndeksData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
interface ImageCardProps {
|
||||
imageUrl: string;
|
||||
label: string;
|
||||
title: string;
|
||||
date: string;
|
||||
}
|
||||
|
||||
const ImageCard: React.FC<ImageCardProps> = ({ imageUrl, label, title, date }) => {
|
||||
return (
|
||||
<div className="relative rounded-lg overflow-hidden shadow-md">
|
||||
<img src={imageUrl} alt={title} className="w-full h-full object-cover" />
|
||||
<div className="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-4 text-white">
|
||||
<span className="bg-red-600 text-xs font-bold px-2 py-1 rounded">{label}</span>
|
||||
<h3 className="text-sm font-semibold mt-2 line-clamp-2 w-fit ">{title}</h3>
|
||||
<span className="text-xs mt-1">{date}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const Indeks: React.FC = () => {
|
||||
const pathname = usePathname();
|
||||
const [indeksData, setIndeksData] = useState<any>();
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
const initFetch = async () => {
|
||||
const response = await getIndeksData();
|
||||
console.log(response);
|
||||
setIndeksData(response?.data?.data?.content);
|
||||
};
|
||||
|
||||
const ImageGallery: React.FC = () => {
|
||||
const pathname = usePathname();
|
||||
|
||||
const images = [
|
||||
{
|
||||
imageUrl: "/assets/banner-sample.png",
|
||||
label: "Giat Pimpinan",
|
||||
title: "Foto Kapolri Dorong Transformasi Polri Presisi",
|
||||
date: "2024-11-12 10:09:20 WIB",
|
||||
},
|
||||
{
|
||||
imageUrl: "/assets/hot-topik-1.jpg",
|
||||
label: "Giat Polri",
|
||||
title: "Foto Kapolri Tinjau Pengungsi Gunung",
|
||||
date: "2024-11-19 09:35:27 WIB",
|
||||
},
|
||||
{
|
||||
imageUrl: "/assets/hot-topik-2.jpg",
|
||||
label: "Giat Polri",
|
||||
title: "Foto Kapolri dalam Acara Bersama TNI",
|
||||
date: "2024-11-20 15:45:00 WIB",
|
||||
},
|
||||
];
|
||||
|
||||
const imageBottom = [
|
||||
{
|
||||
id: 1,
|
||||
imageUrl: "/assets/hot-topik-1.jpg",
|
||||
title: "Foto Kakorlantas Polri Tekankan Intervensi",
|
||||
description:
|
||||
"Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen. Pol. Dr. Drs. Aan Suhanan, M.Si. memimpin apel pagi di NTMC pada Senin (2/12/2024) dan menekankan pentingnya pengelolaan ekstra dalam pengamanan Natal dan Tahun Baru 2024.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imageUrl: "/assets/hot-topik-1.jpg",
|
||||
title: "Foto Kakorlantas Tinjau Jalur Tol, Jalur Wisata",
|
||||
description: "Kakorlantas Polri Irjen.Pol. Dr. Drs. Aan Suhanan, M.Si. memimpin survei jalur tol dari Cikopo, Purwakarta hingga Kalikangkung, Jawa Tengah, untuk persiapan Operasi Lilin 2024.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imageUrl: "/assets/hot-topik-2.jpg",
|
||||
title: "Foto Kapolri Pastikan Kesiapan Polri Kawal Pilkada",
|
||||
description: "Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo, M.Si menegaskan kesiapan Polri dalam mengawal Pilkada Serentak 2024 yang digelar Rabu, 27 November 2024.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hero */}
|
||||
<div className="max-w-screen-xl mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="md:col-span-2">
|
||||
<ImageCard {...images[0]} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<ImageCard {...images[1]} />
|
||||
<ImageCard {...images[2]} />
|
||||
</div>
|
||||
</div>
|
||||
{/* Bottom */}
|
||||
<div className="px-4 lg:px-24 py-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
{imageBottom.map((image) => (
|
||||
<div key={image.id} className="flex flex-col md:flex-row items-start p-4 bg-white rounded-lg shadow-md hover:shadow-lg">
|
||||
<div className="w-full md:w-1/3">
|
||||
<img src={image.imageUrl} alt="" className="h-40 md:h-32 object-cover rounded-lg" />
|
||||
</div>
|
||||
<div className="flex flex-col justify-between w-full">
|
||||
<Link href={`${pathname}/detail/${image.id}`} className="text-lg font-semibold text-gray-800">
|
||||
{image.title}
|
||||
<div className="px-4 lg:px-14">
|
||||
{/* Hero Left */}
|
||||
<div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto">
|
||||
<div className="lg:w-[60%] w-full lg:h-full">
|
||||
{indeksData?.map((indeks: any) => (
|
||||
<div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
|
||||
<img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span>
|
||||
<Link href="#">
|
||||
<h2 className="text-lg font-bold mt-2">{indeks?.title}</h2>
|
||||
</Link>
|
||||
<p className="text-sm text-gray-600 mt-2">{image.description}</p>
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
|
||||
{formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<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>{" "}
|
||||
{indeks?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Hero Right */}
|
||||
{/* <div className="lg:w-[40%] w-full space-y-2">
|
||||
{indeksData?.map((indeksRight: any) => (
|
||||
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
|
||||
<img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span>
|
||||
<Link href="#">
|
||||
<h2 className="text-lg font-bold mt-2">{indeksRight?.title}</h2>
|
||||
</Link>
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
|
||||
{formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<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>{" "}
|
||||
{indeksRight?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
{/* <div className="px-4 lg:px-7 py-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
{indeksData?.map((indeksBottom: any) => (
|
||||
<div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
|
||||
<img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-[500px] lg:h-[300px]" />
|
||||
<div className="flex flex-col justify-between w-full">
|
||||
<p className="text-sm">{indeksBottom?.date}</p>
|
||||
<Link href={`${pathname}/detail/${indeksBottom?.id}`} className="text-xl font-semibold text-gray-800">
|
||||
{indeksBottom?.title}
|
||||
</Link>
|
||||
<p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageGallery;
|
||||
export default Indeks;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
|
|||
import { auth } from "@/lib/auth";
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { getListContent, getVideoData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
|
||||
const dummyImage = [
|
||||
{ id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
|
|
@ -39,6 +41,17 @@ const formatPicture = [
|
|||
];
|
||||
|
||||
const FilterPage = () => {
|
||||
const [videoData, setVideoData] = useState<any>();
|
||||
const [page, setPage] = useState(1);
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
const initFetch = async () => {
|
||||
const response = await getListContent({page: page-1, size: 12, sortBy: "createdAt", contentTypeId: "2", });
|
||||
console.log(response);
|
||||
setVideoData(response?.data?.data?.content);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Header */}
|
||||
|
|
@ -48,15 +61,13 @@ const FilterPage = () => {
|
|||
Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span>
|
||||
</p>
|
||||
<p className="font-bold">|</p>
|
||||
<p>Terdapat 32499 artikel berisi Audio Visual yang dapat diunduh </p>
|
||||
<p>Terdapat 324911 artikel berisi Audio Visual yang dapat diunduh </p>
|
||||
</div>
|
||||
{/* Left */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 p-4">
|
||||
|
||||
<div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
|
||||
<h2 className="text-lg font-semibold mb-4">Filter</h2>
|
||||
<div className="space-y-6">
|
||||
|
||||
<div>
|
||||
<label htmlFor="search" className="block text-sm font-medium text-gray-700">
|
||||
Pencarian
|
||||
|
|
@ -64,7 +75,6 @@ const FilterPage = () => {
|
|||
<input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<label htmlFor="month" className="block text-sm font-medium text-gray-700">
|
||||
Tahun & Bulan
|
||||
|
|
@ -72,7 +82,6 @@ const FilterPage = () => {
|
|||
<input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<label htmlFor="date" className="block text-sm font-medium text-gray-700">
|
||||
Tanggal
|
||||
|
|
@ -80,7 +89,6 @@ const FilterPage = () => {
|
|||
<input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-700">Kategori</h3>
|
||||
<ul className="mt-2 space-y-2">
|
||||
|
|
@ -124,17 +132,18 @@ const FilterPage = () => {
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{dummyImage.map((image) => (
|
||||
<Card key={image.id} className="hover:scale-110 transition-transform duration-300">
|
||||
{videoData?.map((video: any) => (
|
||||
<Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
|
||||
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
<img src={image.thumbnail} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
|
||||
<img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
|
||||
<div className="flex flex-row items-center gap-2 text-[10px] mx-2">
|
||||
{image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
|
||||
{formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
|
||||
{video?.clickCount}{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
|
||||
</svg>{" "}
|
||||
</div>
|
||||
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image.title}</div>
|
||||
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
|
|||
import { auth } from "@/lib/auth";
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Coverage from "@/components/landing-page/coverage";
|
|||
import Hero from "@/components/landing-page/hero";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Division from "@/components/landing-page/division";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Navbar from "@/components/landing-page/Navbar";
|
||||
|
||||
const Home = ({ params: { locale } }: { params: { locale: string } }) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ import "swiper/css/navigation";
|
|||
import { getHeroData } from "@/service/landing/landing";
|
||||
import Link from "next/link";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { Navigation, Pagination } from "swiper/modules";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
|
|
@ -28,7 +26,6 @@ const Hero: React.FC = () => {
|
|||
return (
|
||||
<div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-20 py-4 mx-auto">
|
||||
{/* Section Gambar Utama */}
|
||||
|
||||
<Carousel className="lg:w-2/3 w-full lg:h-full">
|
||||
<CarouselContent>
|
||||
{heroData?.map((list: any) => (
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const NewContent = (props: { type: string }) => {
|
|||
initFetch();
|
||||
}, [selectedTab]);
|
||||
const initFetch = async () => {
|
||||
const request = { sortBy: props.type == "popular" ? "clickCount" : "createdAt", contentTypeId: selectedTab == "image" ? "1" : selectedTab == "video" ? "2" : selectedTab == "text" ? "3" : selectedTab == "audio" ? "4" : "" };
|
||||
const request = {page: 0, size: 5, sortBy: props.type == "popular" ? "clickCount" : "createdAt", contentTypeId: selectedTab == "image" ? "1" : selectedTab == "video" ? "2" : selectedTab == "text" ? "3" : selectedTab == "audio" ? "4" : "" };
|
||||
const response = await getListContent(request);
|
||||
console.log("category", response);
|
||||
setNewContent(response?.data?.data?.content);
|
||||
|
|
|
|||
|
|
@ -8,10 +8,16 @@ export async function getCategoryData() {
|
|||
return await httpGetInterceptor(`media/categories/list/publish?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=`);
|
||||
}
|
||||
|
||||
export async function getListContent(data: { sortBy: string; contentTypeId: string }) {
|
||||
return await httpGetInterceptor(`media/public/list?enablePage=1&sort=desc&sortBy=${data.sortBy}&size=5&page=0&typeId=${data.contentTypeId}&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`);
|
||||
export async function getListContent(data: { sortBy: string; contentTypeId: string; size: number; page: number }) {
|
||||
return await httpGetInterceptor(
|
||||
`media/public/list?enablePage=1&sort=desc&sortBy=${data.sortBy}&size=${data.size}&page=${data.page}&typeId=${data.contentTypeId}&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
|
||||
);
|
||||
}
|
||||
|
||||
export async function getPrivacy() {
|
||||
return await httpGetInterceptor(`general/privacy-policy/1`);
|
||||
}
|
||||
|
||||
export async function getIndeksData() {
|
||||
return await httpGetInterceptor(`blog/public/pagination?enablePage=1&page=0&size=20`);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue