Compare commits
10 Commits
5840cc2cda
...
af1fc041b2
| Author | SHA1 | Date |
|---|---|---|
 Anang Yusman
|
af1fc041b2 | |
|
Anang Yusman
|
5c72cdbd48 | |
|
Anang Yusman
|
78074b325a | |
|
Anang Yusman
|
908e4b2e52 | |
|
Anang Yusman
|
0b0b044ae3 | |
|
Anang Yusman
|
59ca0531cd | |
|
Anang Yusman
|
6a1027a4c1 | |
|
Anang Yusman
|
d930472108 | |
|
Anang Yusman
|
a460c7ea57 | |
|
Anang Yusman
|
e9a3dbbc25 |
|
|
@ -7,15 +7,16 @@ build-dev:
|
|||
when: on_success
|
||||
only:
|
||||
- main
|
||||
image: docker:stable
|
||||
image:
|
||||
name: docker:25.0.3-cli
|
||||
services:
|
||||
- name: docker:dind
|
||||
command: ["--insecure-registry=103.82.242.92:8900"]
|
||||
- name: docker:25.0.3-dind
|
||||
command: ["--insecure-registry=38.47.185.86:8900"]
|
||||
script:
|
||||
- docker logout
|
||||
- docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 103.82.242.92:8900
|
||||
- docker build -t 103.82.242.92:8900/medols/web-warga-bicara:dev .
|
||||
- docker push 103.82.242.92:8900/medols/web-warga-bicara:dev
|
||||
- docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 38.47.185.86:8900
|
||||
- docker build -t 38.47.185.86:8900/medols/web-warga-bicara:dev .
|
||||
- docker push 38.47.185.86:8900/medols/web-warga-bicara:dev
|
||||
|
||||
auto-deploy:
|
||||
stage: deploy
|
||||
|
|
@ -26,4 +27,4 @@ auto-deploy:
|
|||
services:
|
||||
- docker:dind
|
||||
script:
|
||||
- curl --user admin:$JENKINS_PWD http://38.47.180.165:8080/job/auto-deploy-warga-bicara/build?token=autodeploymedols
|
||||
- curl --user admin:$JENKINS_PWD http://38.47.185.86:8080/job/auto-deploy-warga-bicara/build?token=autodeploymedols
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import DetailContent from "@/components/details/details-content";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
|
||||
<Navbar />
|
||||
<div className="flex-1">
|
||||
<DetailContent />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
BIN
app/favicon.ico
BIN
app/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 91 KiB |
|
|
@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
|
|||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Warga Bicara",
|
||||
description: "Warga Bicara",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
|
|
|||
14
app/page.tsx
14
app/page.tsx
|
|
@ -1,16 +1,24 @@
|
|||
import Development from "@/components/landing-page/development";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Header from "@/components/landing-page/header";
|
||||
import NewsTerkini from "@/components/landing-page/health";
|
||||
import LatestNews from "@/components/landing-page/latest-news";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Beranda from "@/components/landing-page/news";
|
||||
import OpinionNews from "@/components/landing-page/opinion-news";
|
||||
import YouTubeSection from "@/components/landing-page/youtube-selection";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
|
||||
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||
<Navbar />
|
||||
<div className="flex-1">
|
||||
<Header />
|
||||
</div>
|
||||
<Beranda />
|
||||
<LatestNews />
|
||||
<Development />
|
||||
<OpinionNews />
|
||||
<NewsTerkini />
|
||||
<YouTubeSection />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@
|
|||
import Image from "next/image";
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { getArticleById, getListArticle } from "@/service/article";
|
||||
import {
|
||||
getArticleById,
|
||||
getArticleBySlug,
|
||||
getListArticle,
|
||||
} from "@/service/article";
|
||||
import { close, error, loading } from "@/config/swal";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import { Link2, MailIcon } from "lucide-react";
|
||||
|
|
@ -15,6 +19,8 @@ import {
|
|||
postArticleComment,
|
||||
} from "@/service/master-user";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Badge } from "../ui/badge";
|
||||
import { formatTextToHtmlTag } from "@/utils/global";
|
||||
|
||||
type TabKey = "trending" | "comments" | "latest";
|
||||
|
||||
|
|
@ -24,6 +30,7 @@ type Article = {
|
|||
description: string;
|
||||
htmlDescription: string;
|
||||
categoryName: string;
|
||||
slug: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
|
|
@ -55,6 +62,7 @@ type Advertise = {
|
|||
export default function DetailContent() {
|
||||
const params = useParams();
|
||||
const id = params?.id;
|
||||
const slug = params?.slug;
|
||||
const pathname = usePathname();
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPage, setTotalPage] = useState(1);
|
||||
|
|
@ -74,7 +82,7 @@ export default function DetailContent() {
|
|||
const [diseId, setDiseId] = useState(0);
|
||||
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
|
||||
const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
|
||||
null
|
||||
null,
|
||||
);
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
|
|
@ -292,7 +300,7 @@ export default function DetailContent() {
|
|||
|
||||
async function initStateData() {
|
||||
loading();
|
||||
const res = await getArticleById(id);
|
||||
const res = await getArticleBySlug(slug);
|
||||
const data = res?.data?.data;
|
||||
|
||||
setThumbnail(data?.thumbnailUrl);
|
||||
|
|
@ -309,21 +317,14 @@ export default function DetailContent() {
|
|||
// </div>
|
||||
// );
|
||||
// }
|
||||
function decodeHtmlString(raw: string = "") {
|
||||
if (!raw) return "";
|
||||
function removeImgTags(htmlString?: { __html: string }) {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(String(htmlString?.__html), "text/html");
|
||||
|
||||
// 1️⃣ Hapus newline escape, backslash, dsb
|
||||
let decoded = raw
|
||||
.replace(/\\n/g, "\n")
|
||||
.replace(/\\"/g, '"') // ubah \" jadi "
|
||||
.replace(/\\'/g, "'") // ubah \' jadi '
|
||||
.replace(/\\\\/g, "\\") // ubah \\ jadi \
|
||||
.trim();
|
||||
const images = doc.querySelectorAll("img");
|
||||
images.forEach((img) => img.remove());
|
||||
|
||||
// 2️⃣ Decode entity HTML (misal ")
|
||||
const el = document.createElement("textarea");
|
||||
el.innerHTML = decoded;
|
||||
return el.value;
|
||||
return { __html: doc.body.innerHTML };
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -335,7 +336,7 @@ export default function DetailContent() {
|
|||
{articleDetail?.title}
|
||||
</h1>
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
|
||||
<div className="text-blue-500">
|
||||
<div className="text-green-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
|
|
@ -355,21 +356,23 @@ export default function DetailContent() {
|
|||
</svg>
|
||||
</div>
|
||||
|
||||
<span className="text-blue-500 font-medium">
|
||||
<span className="text-green-500 font-medium">
|
||||
{articleDetail?.customCreatorName || articleDetail?.createdByName}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
<span>
|
||||
{new Date(articleDetail?.publishedAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
{new Date(articleDetail?.publishedAt ?? articleDetail?.createdAt)
|
||||
.toLocaleString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false,
|
||||
timeZone: "Asia/Jakarta",
|
||||
})
|
||||
.replace("pukul ", "")}{" "}
|
||||
WIB
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>{articleDetail?.categories?.[0]?.title}</span>
|
||||
|
|
@ -496,11 +499,10 @@ export default function DetailContent() {
|
|||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="prose max-w-none text-justify">
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: decodeHtmlString(
|
||||
articleDetail?.htmlDescription || ""
|
||||
),
|
||||
}}
|
||||
dangerouslySetInnerHTML={removeImgTags(
|
||||
formatTextToHtmlTag(articleDetail?.htmlDescription),
|
||||
)}
|
||||
className="text-sm lg:text-xl lg:leading-8 text-justify space-y-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -553,9 +555,17 @@ export default function DetailContent() {
|
|||
</span>
|
||||
<div className="flex flex-wrap gap-2 mt-1">
|
||||
{articleDetail?.tags ? (
|
||||
<span className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded">
|
||||
{articleDetail.tags}
|
||||
</span>
|
||||
articleDetail.tags
|
||||
.split(",") // pisahkan berdasarkan koma
|
||||
.map((tag: string, index: number) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="secondary"
|
||||
className="text-sm"
|
||||
>
|
||||
{tag.trim()}
|
||||
</Badge>
|
||||
))
|
||||
) : (
|
||||
<span className="text-sm text-gray-500">Tidak ada tag</span>
|
||||
)}
|
||||
|
|
@ -581,7 +591,7 @@ export default function DetailContent() {
|
|||
className="rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-blue-600 font-bold text-lg">
|
||||
<p className="text-green-600 font-bold text-lg">
|
||||
christine natalia
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -590,7 +600,7 @@ export default function DetailContent() {
|
|||
<h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
|
||||
<p className="text-gray-600 mb-4 text-sm">
|
||||
Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
|
||||
ditandai <span className="text-blue-600">*</span>
|
||||
ditandai <span className="text-green-600">*</span>
|
||||
</p>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold border-b pb-2">Komentar</h3>
|
||||
|
|
@ -625,11 +635,11 @@ export default function DetailContent() {
|
|||
htmlFor="komentar"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Komentar <span className="text-blue-600">*</span>
|
||||
Komentar <span className="text-green-600">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="komentar"
|
||||
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-blue-600"
|
||||
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
|
||||
{...register("comment", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -640,7 +650,7 @@ export default function DetailContent() {
|
|||
htmlFor="nama"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Nama <span className="text-blue-600">*</span>
|
||||
Nama <span className="text-green-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -656,7 +666,7 @@ export default function DetailContent() {
|
|||
htmlFor="email"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Email <span className="text-blue-600">*</span>
|
||||
Email <span className="text-green-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
|
|
@ -668,7 +678,7 @@ export default function DetailContent() {
|
|||
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
|
||||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
|
||||
>
|
||||
KIRIM KOMENTAR
|
||||
</button>
|
||||
|
|
@ -701,7 +711,7 @@ export default function DetailContent() {
|
|||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
|
||||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
|
||||
>
|
||||
Kirim
|
||||
</button>
|
||||
|
|
@ -770,7 +780,7 @@ export default function DetailContent() {
|
|||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`pb-2 text-sm font-medium ${
|
||||
activeTab === tab.id
|
||||
? "border-b-2 border-blue-600 text-blue-600"
|
||||
? "border-b-2 border-green-600 text-green-600"
|
||||
: "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -836,7 +846,7 @@ export default function DetailContent() {
|
|||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-blue-600 inline-block">
|
||||
<h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-green-600 inline-block">
|
||||
Recommended
|
||||
</h3>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// components/custom-editor.js
|
||||
|
||||
import React from "react";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { CKEditor } from "@ckeditor/ckeditor5-react";
|
||||
|
||||
import "@/styles/custom-editor.css";
|
||||
import Editor from "@/vendor/ckeditor5/build/ckeditor";
|
||||
|
||||
function CustomEditor(props) {
|
||||
|
|
@ -47,7 +47,7 @@ function CustomEditor(props) {
|
|||
padding: 1rem;
|
||||
}
|
||||
p {
|
||||
margin: 0.5em 0;
|
||||
margin: 0.5em 0 !important;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 1em 0 0.5em 0;
|
||||
|
|
@ -72,98 +72,6 @@ function CustomEditor(props) {
|
|||
},
|
||||
}}
|
||||
/>
|
||||
<style jsx>{`
|
||||
.ckeditor-wrapper {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.ckeditor-wrapper :global(.ck.ck-editor__main) {
|
||||
min-height: ${props.height || 400}px;
|
||||
max-height: ${maxHeight}px;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper :global(.ck.ck-editor__editable) {
|
||||
min-height: ${(props.height || 400) - 50}px;
|
||||
max-height: ${maxHeight - 50}px;
|
||||
overflow-y: auto !important;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #cbd5e1 #f1f5f9;
|
||||
background: #fff !important;
|
||||
color: #111 !important;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
:global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable) {
|
||||
background: #111 !important;
|
||||
color: #f9fafb !important;
|
||||
}
|
||||
|
||||
:global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h1),
|
||||
:global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h2),
|
||||
:global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h3),
|
||||
:global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h4),
|
||||
:global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h5),
|
||||
:global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h6) {
|
||||
color: #f9fafb !important;
|
||||
}
|
||||
|
||||
:global(.dark)
|
||||
.ckeditor-wrapper
|
||||
:global(.ck.ck-editor__editable blockquote) {
|
||||
background-color: #1f2937 !important;
|
||||
border-left-color: #374151 !important;
|
||||
color: #f3f4f6 !important;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling for webkit browsers */
|
||||
.ckeditor-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar) {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper
|
||||
:global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
|
||||
background: #f1f5f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper
|
||||
:global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper
|
||||
:global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
/* Dark mode scrollbar */
|
||||
:global(.dark)
|
||||
.ckeditor-wrapper
|
||||
:global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
:global(.dark)
|
||||
.ckeditor-wrapper
|
||||
:global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
:global(.dark)
|
||||
.ckeditor-wrapper
|
||||
:global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
|
||||
background: #6b7280;
|
||||
}
|
||||
|
||||
/* Ensure content doesn't overflow */
|
||||
.ckeditor-wrapper :global(.ck.ck-editor__editable .ck-content) {
|
||||
overflow: hidden;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@ function ViewEditor(props) {
|
|||
.ckeditor-view-wrapper {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const CustomEditor = dynamic(
|
|||
() => {
|
||||
return import("@/components/editor/custom-editor");
|
||||
},
|
||||
{ ssr: false }
|
||||
{ ssr: false },
|
||||
);
|
||||
|
||||
interface FileWithPreview extends File {
|
||||
|
|
@ -118,14 +118,14 @@ export default function CreateArticleForm() {
|
|||
const [tag, setTag] = useState("");
|
||||
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
|
||||
const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
|
||||
null
|
||||
null,
|
||||
);
|
||||
const [thumbnailValidation, setThumbnailValidation] = useState("");
|
||||
const [filesValidation, setFileValidation] = useState("");
|
||||
const [diseData, setDiseData] = useState<DiseData>();
|
||||
const [selectedWritingType, setSelectedWritingType] = useState("single");
|
||||
const [status, setStatus] = useState<"publish" | "draft" | "scheduled">(
|
||||
"publish"
|
||||
"publish",
|
||||
);
|
||||
const [isScheduled, setIsScheduled] = useState(false);
|
||||
const [startDateValue, setStartDateValue] = useState<Date | undefined>();
|
||||
|
|
@ -230,7 +230,7 @@ export default function CreateArticleForm() {
|
|||
}
|
||||
|
||||
const saveArticleToDise = async (
|
||||
values: z.infer<typeof createArticleSchema>
|
||||
values: z.infer<typeof createArticleSchema>,
|
||||
) => {
|
||||
if (useAi) {
|
||||
const request = {
|
||||
|
|
@ -351,12 +351,12 @@ export default function CreateArticleForm() {
|
|||
|
||||
// format: 2025-10-08 14:30:00
|
||||
const formattedDateTime = `${combinedDate.getFullYear()}-${String(
|
||||
combinedDate.getMonth() + 1
|
||||
combinedDate.getMonth() + 1,
|
||||
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
|
||||
2,
|
||||
"0"
|
||||
"0",
|
||||
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
|
||||
combinedDate.getMinutes()
|
||||
combinedDate.getMinutes(),
|
||||
).padStart(2, "0")}:00`;
|
||||
|
||||
const request = {
|
||||
|
|
@ -493,7 +493,7 @@ export default function CreateArticleForm() {
|
|||
}
|
||||
}
|
||||
const uniqueArray = temp.filter(
|
||||
(item, index) => temp.indexOf(item) === index
|
||||
(item, index) => temp.indexOf(item) === index,
|
||||
);
|
||||
|
||||
setValue("tags", uniqueArray as [string, ...string[]]);
|
||||
|
|
@ -514,7 +514,7 @@ export default function CreateArticleForm() {
|
|||
id="title"
|
||||
type="text"
|
||||
placeholder="Masukkan judul artikel"
|
||||
className="w-full border rounded-lg dark:border-gray-400"
|
||||
className="h-16 px-4 text-2xl leading-tight"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -578,7 +578,7 @@ export default function CreateArticleForm() {
|
|||
// });
|
||||
setValue(
|
||||
"description",
|
||||
data?.articleBody ? data?.articleBody : ""
|
||||
data?.articleBody ? data?.articleBody : "",
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -588,7 +588,7 @@ export default function CreateArticleForm() {
|
|||
setDiseData(data);
|
||||
setValue(
|
||||
"description",
|
||||
data?.articleBody ? data?.articleBody : ""
|
||||
data?.articleBody ? data?.articleBody : "",
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -781,7 +781,7 @@ export default function CreateArticleForm() {
|
|||
type="button"
|
||||
onClick={() => {
|
||||
const filteredTags = value.filter(
|
||||
(tag: string) => tag !== item
|
||||
(tag: string) => tag !== item,
|
||||
);
|
||||
if (filteredTags.length === 0) {
|
||||
setError("tags", {
|
||||
|
|
@ -792,7 +792,7 @@ export default function CreateArticleForm() {
|
|||
clearErrors("tags");
|
||||
setValue(
|
||||
"tags",
|
||||
filteredTags as [string, ...string[]]
|
||||
filteredTags as [string, ...string[]],
|
||||
);
|
||||
}
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import {
|
|||
deleteArticleFiles,
|
||||
getArticleByCategory,
|
||||
getArticleById,
|
||||
getArticleFiles,
|
||||
submitApproval,
|
||||
unPublishArticle,
|
||||
updateArticle,
|
||||
|
|
@ -64,13 +65,13 @@ const ViewEditor = dynamic(
|
|||
() => {
|
||||
return import("@/components/editor/view-editor");
|
||||
},
|
||||
{ ssr: false }
|
||||
{ ssr: false },
|
||||
);
|
||||
const CustomEditor = dynamic(
|
||||
() => {
|
||||
return import("@/components/editor/custom-editor");
|
||||
},
|
||||
{ ssr: false }
|
||||
{ ssr: false },
|
||||
);
|
||||
|
||||
interface FileWithPreview extends File {
|
||||
|
|
@ -141,7 +142,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
const [diseId, setDiseId] = useState(0);
|
||||
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
|
||||
const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
|
||||
null
|
||||
null,
|
||||
);
|
||||
const [thumbnailValidation, setThumbnailValidation] = useState("");
|
||||
// const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
||||
|
|
@ -154,7 +155,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
// const [startDateValue, setStartDateValue] = useState<any>(null);
|
||||
// const [timeValue, setTimeValue] = useState("00:00");
|
||||
const [status, setStatus] = useState<"publish" | "draft" | "scheduled">(
|
||||
"publish"
|
||||
"publish",
|
||||
);
|
||||
const [isScheduled, setIsScheduled] = useState(false);
|
||||
const [startDateValue, setStartDateValue] = useState<Date | undefined>();
|
||||
|
|
@ -196,27 +197,49 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
|
||||
async function initState() {
|
||||
loading();
|
||||
const res = await getArticleById(id);
|
||||
const data = res.data?.data;
|
||||
setDetailData(data);
|
||||
setValue("title", data?.title);
|
||||
setValue("customCreatorName", data?.customCreatorName);
|
||||
setValue("slug", data?.slug);
|
||||
setValue("source", data?.source);
|
||||
const cleanDescription = data?.htmlDescription
|
||||
? data.htmlDescription
|
||||
.replace(/\\"/g, '"')
|
||||
.replace(/\\n/g, "\n", "\\")
|
||||
.trim()
|
||||
: "";
|
||||
setValue("description", cleanDescription);
|
||||
setValue("tags", data?.tags ? data.tags.split(",") : []);
|
||||
setThumbnail(data?.thumbnailUrl);
|
||||
setDiseId(data?.aiArticleId);
|
||||
setDetailFiles(data?.files);
|
||||
try {
|
||||
// 1️⃣ Ambil ARTICLE
|
||||
const articleRes = await getArticleById(id);
|
||||
const articleData = articleRes.data?.data;
|
||||
|
||||
setupInitCategory(data?.categories);
|
||||
close();
|
||||
if (!articleData) return;
|
||||
|
||||
// ===== ARTICLE DATA =====
|
||||
setDetailData(articleData);
|
||||
setValue("title", articleData.title);
|
||||
setValue("customCreatorName", articleData.customCreatorName);
|
||||
setValue("slug", articleData.slug);
|
||||
setValue("source", articleData.source);
|
||||
|
||||
const cleanDescription = articleData.htmlDescription
|
||||
? articleData.htmlDescription
|
||||
.replace(/\\"/g, '"')
|
||||
.replace(/\\n/g, "\n")
|
||||
.trim()
|
||||
: "";
|
||||
|
||||
setValue("description", cleanDescription);
|
||||
setValue("tags", articleData.tags ? articleData.tags.split(",") : []);
|
||||
|
||||
setThumbnail(articleData.thumbnailUrl);
|
||||
setDiseId(articleData.aiArticleId);
|
||||
setupInitCategory(articleData.categories);
|
||||
|
||||
// 2️⃣ Ambil SEMUA article files
|
||||
const filesRes = await getArticleFiles();
|
||||
const allFiles = filesRes.data?.data ?? [];
|
||||
|
||||
// 3️⃣ FILTER berdasarkan ARTICLE ID yang sedang dibuka
|
||||
const filteredFiles = allFiles.filter(
|
||||
(file: any) => file.articleId === articleData.id,
|
||||
);
|
||||
|
||||
setDetailFiles(filteredFiles);
|
||||
} catch (error) {
|
||||
console.error("Init state error:", error);
|
||||
} finally {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
const setupInitCategory = (data: any) => {
|
||||
|
|
@ -329,12 +352,12 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
combinedDate.setHours(hours, minutes, 0, 0);
|
||||
|
||||
const formattedDateTime = `${combinedDate.getFullYear()}-${String(
|
||||
combinedDate.getMonth() + 1
|
||||
combinedDate.getMonth() + 1,
|
||||
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
|
||||
2,
|
||||
"0"
|
||||
"0",
|
||||
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
|
||||
combinedDate.getMinutes()
|
||||
combinedDate.getMinutes(),
|
||||
).padStart(2, "0")}:00`;
|
||||
|
||||
const response = await updateArticle(String(id), {
|
||||
|
|
@ -425,12 +448,12 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
|
||||
// format: 2025-10-08 14:30:00
|
||||
const formattedDateTime = `${combinedDate.getFullYear()}-${String(
|
||||
combinedDate.getMonth() + 1
|
||||
combinedDate.getMonth() + 1,
|
||||
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
|
||||
2,
|
||||
"0"
|
||||
"0",
|
||||
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
|
||||
combinedDate.getMinutes()
|
||||
combinedDate.getMinutes(),
|
||||
).padStart(2, "0")}:00`;
|
||||
|
||||
const request = {
|
||||
|
|
@ -667,9 +690,10 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
name="title"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<div className="w-full">
|
||||
<label htmlFor="title" className="block text-sm font-medium mb-1">
|
||||
<label htmlFor="title" className="block text-xl font-medium mb-2">
|
||||
Judul
|
||||
</label>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
id="title"
|
||||
|
|
@ -677,7 +701,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
value={value ?? ""}
|
||||
readOnly={isDetail}
|
||||
onChange={onChange}
|
||||
className="w-full border rounded-lg"
|
||||
className="h-16 px-4 text-2xl leading-tight"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -1046,7 +1070,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
className="w-3 h-3 cursor-pointer"
|
||||
onClick={() => {
|
||||
const filteredTags = value.filter(
|
||||
(tag: string) => tag !== item
|
||||
(tag: string) => tag !== item,
|
||||
);
|
||||
if (filteredTags.length === 0) {
|
||||
setError("tags", {
|
||||
|
|
@ -1057,7 +1081,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
clearErrors("tags");
|
||||
setValue(
|
||||
"tags",
|
||||
filteredTags as [string, ...string[]]
|
||||
filteredTags as [string, ...string[]],
|
||||
);
|
||||
}
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ type Article = {
|
|||
description: string;
|
||||
categoryName: string;
|
||||
createdAt: string;
|
||||
slug: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
|
|
@ -122,8 +123,8 @@ export default function CitizenNews() {
|
|||
|
||||
const citizenArticles = articles.filter((article) =>
|
||||
article.categories?.some((category) =>
|
||||
category.title?.toLowerCase().includes("berita warga")
|
||||
)
|
||||
category.title?.toLowerCase().includes("suara warga"),
|
||||
),
|
||||
);
|
||||
|
||||
// Pagination manually (front-end)
|
||||
|
|
@ -132,7 +133,7 @@ export default function CitizenNews() {
|
|||
|
||||
const paginatedArticles = citizenArticles.slice(
|
||||
(page - 1) * itemsPerPage,
|
||||
page * itemsPerPage
|
||||
page * itemsPerPage,
|
||||
);
|
||||
|
||||
function truncateText(text: string, wordLimit: number) {
|
||||
|
|
@ -149,7 +150,7 @@ export default function CitizenNews() {
|
|||
<div key={item.id}>
|
||||
<Link
|
||||
className="flex flex-col md:flex-row gap-6"
|
||||
href={`/detail/${item?.id}`}
|
||||
href={`/details/${item?.slug}`}
|
||||
>
|
||||
{/* Image + Category */}
|
||||
<div className="relative w-full md:w-1/2 h-64">
|
||||
|
|
@ -159,7 +160,7 @@ export default function CitizenNews() {
|
|||
fill
|
||||
className="object-cover rounded"
|
||||
/>
|
||||
<span className="absolute top-3 left-3 bg-yellow-400 text-black px-3 py-1 text-xs font-bold">
|
||||
<span className="absolute top-3 left-3 bg-green-400 text-white px-3 py-1 text-xs font-bold">
|
||||
{item.categories[0]?.title || "Pembangunan"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -171,7 +172,7 @@ export default function CitizenNews() {
|
|||
</h2>
|
||||
<div className="text-sm text-gray-600 mt-2">
|
||||
BY{" "}
|
||||
<span className="text-blue-600 font-semibold">
|
||||
<span className="text-green-600 font-semibold">
|
||||
{item?.customCreatorName || item.createdByName}
|
||||
</span>{" "}
|
||||
• {new Date(item.createdAt).toLocaleDateString("id-ID")}
|
||||
|
|
@ -218,7 +219,7 @@ export default function CitizenNews() {
|
|||
<button
|
||||
onClick={() => setPage(p)}
|
||||
className={`px-3 py-1 ${
|
||||
page === p ? "bg-blue-600 text-white" : "border"
|
||||
page === p ? "bg-green-600 text-white" : "border"
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
|
|
@ -285,7 +286,7 @@ export default function CitizenNews() {
|
|||
<p className="text-xl font-bold">205k</p>
|
||||
<p className="text-sm">Subscribers</p>
|
||||
</div>
|
||||
<div className="bg-yellow-400 text-black text-center p-3">
|
||||
<div className="bg-green-400 text-black text-center p-3">
|
||||
<p className="text-xl font-bold">23.9k</p>
|
||||
<p className="text-sm">Followers</p>
|
||||
</div>
|
||||
|
|
@ -318,7 +319,7 @@ export default function CitizenNews() {
|
|||
<div key={item.id} className="flex gap-3 items-center">
|
||||
<Link
|
||||
className="flex gap-3 items-center"
|
||||
href={`/detail/${item?.id}`}
|
||||
href={`/details/${item?.slug}`}
|
||||
>
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/no-image.jpg"}
|
||||
|
|
@ -343,7 +344,7 @@ export default function CitizenNews() {
|
|||
</h2>
|
||||
<div className=" w-full">
|
||||
<div className="relative w-full aspect-video mb-5">
|
||||
<Link href={`/detail/${articles[0]?.id}`}>
|
||||
<Link href={`/details/${articles[0]?.slug}`}>
|
||||
<Image
|
||||
src={
|
||||
articles[0]?.thumbnailUrl ||
|
||||
|
|
@ -381,7 +382,7 @@ export default function CitizenNews() {
|
|||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
},
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -393,7 +394,7 @@ export default function CitizenNews() {
|
|||
<div key={index}>
|
||||
<Link
|
||||
className="flex gap-3"
|
||||
href={`/detail/${article?.id}`}
|
||||
href={`/details/${article?.slug}`}
|
||||
>
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
|
|
@ -432,7 +433,7 @@ export default function CitizenNews() {
|
|||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
},
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ type Article = {
|
|||
description: string;
|
||||
categoryName: string;
|
||||
createdAt: string;
|
||||
slug: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
|
|
@ -78,8 +79,8 @@ export default function HeaderCitizen() {
|
|||
|
||||
const citizenArticles = articles.filter((article) =>
|
||||
article.categories?.some((category) =>
|
||||
category.title?.toLowerCase().includes("berita warga")
|
||||
)
|
||||
category.title?.toLowerCase().includes("suara warga"),
|
||||
),
|
||||
);
|
||||
|
||||
const mainArticle = citizenArticles[0];
|
||||
|
|
@ -101,7 +102,7 @@ export default function HeaderCitizen() {
|
|||
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
|
||||
{mainArticle && (
|
||||
<div className="md:col-span-2 relative">
|
||||
<Link href={`/detail/${mainArticle.id}`}>
|
||||
<Link href={`/details/${mainArticle.slug}`}>
|
||||
<Image
|
||||
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
|
||||
alt={mainArticle.title}
|
||||
|
|
@ -110,7 +111,7 @@ export default function HeaderCitizen() {
|
|||
className="w-full h-full max-h-[460px] object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
|
||||
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
|
||||
<span className="text-xs bg-green-400 text-white px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
|
||||
{mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
|
||||
</span>
|
||||
<h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
|
||||
|
|
@ -126,7 +127,7 @@ export default function HeaderCitizen() {
|
|||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
},
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -137,7 +138,7 @@ export default function HeaderCitizen() {
|
|||
<div className="grid grid-rows-2 gap-2">
|
||||
{otherArticles.map((article, index) => (
|
||||
<div key={index} className="relative">
|
||||
<Link href={`/detail/${article.id}`}>
|
||||
<Link href={`/details/${article.slug}`}>
|
||||
<Image
|
||||
src={
|
||||
article.thumbnailUrl ||
|
||||
|
|
@ -150,7 +151,7 @@ export default function HeaderCitizen() {
|
|||
className="w-full h-56 object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
|
||||
<span className="text-xs bg-green-400 text-white px-2 py-0.5 inline-block uppercase w-[130px]">
|
||||
{article.categories?.[0]?.title || "TANPA KATEGORI"}
|
||||
</span>
|
||||
<h3 className="text-sm font-semibold text-white leading-snug mb-1">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@ type Article = {
|
|||
title: string;
|
||||
description: string;
|
||||
categoryName: string;
|
||||
slug: string;
|
||||
createdAt: string;
|
||||
publishedAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
|
|
@ -66,183 +68,68 @@ export default function Development() {
|
|||
|
||||
return (
|
||||
<section className="max-w-7xl mx-auto px-4">
|
||||
<h2 className="text-lg font-bold text-white bg-red-600 inline-block px-4 py-2 border-b-2">
|
||||
PEMBANGUNAN
|
||||
</h2>
|
||||
<h2 className="border-b-2 mb-4"></h2>
|
||||
<div className="bg-white ">
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-black text-[#000]">JAGA NEGERI</h2>
|
||||
|
||||
{articles.length === 0 ? (
|
||||
<p className="text-center text-gray-500 py-10">Memuat berita...</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* === LEFT COLUMN === */}
|
||||
{leftMain && (
|
||||
<div className="w-full">
|
||||
<Link href={`/detail/${leftMain.id}`}>
|
||||
<div className="relative w-full aspect-video mb-2">
|
||||
<Image
|
||||
src={leftMain.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={leftMain.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
|
||||
{leftMain.categories?.[0]?.title}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-base mb-2">
|
||||
{leftMain.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||||
by {leftMain.customCreatorName || leftMain.createdByName} ·{" "}
|
||||
{formatDate(leftMain.createdAt)}
|
||||
</p>
|
||||
<p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
|
||||
{leftMain.description}
|
||||
</p>
|
||||
</Link>
|
||||
<div className="space-y-8">
|
||||
{leftList.map((item) => (
|
||||
<div key={item.id}>
|
||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-3 line-clamp-2">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500">
|
||||
{formatDate(item.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* === CENTER COLUMN === */}
|
||||
{centerMain && (
|
||||
<div className="w-full">
|
||||
<Link href={`/detail/${centerMain.id}`}>
|
||||
<div className="relative w-full aspect-video mb-2">
|
||||
<Image
|
||||
src={centerMain.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={centerMain.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
|
||||
{centerMain.categories?.[0]?.title}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-base mb-2">
|
||||
{centerMain.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||||
by {centerMain.customCreatorName || centerMain.createdByName}{" "}
|
||||
· {formatDate(centerMain.createdAt)}
|
||||
</p>
|
||||
<p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
|
||||
{centerMain.description}
|
||||
</p>
|
||||
</Link>
|
||||
<div className="space-y-8">
|
||||
{centerList.map((item) => (
|
||||
<div key={item.id}>
|
||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-3 line-clamp-2">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500">
|
||||
{formatDate(item.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* === RIGHT COLUMN === */}
|
||||
{rightMain && (
|
||||
<div className="w-full">
|
||||
<Link href={`/detail/${rightMain.id}`}>
|
||||
<div className="relative w-full aspect-video mb-2">
|
||||
<Image
|
||||
src={rightMain.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={rightMain.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
|
||||
{rightMain.categories?.[0]?.title}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-base mb-2">
|
||||
{rightMain.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||||
by {rightMain.customCreatorName || rightMain.createdByName} ·{" "}
|
||||
{formatDate(rightMain.createdAt)}
|
||||
</p>
|
||||
<p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
|
||||
{rightMain.description}
|
||||
</p>
|
||||
</Link>
|
||||
<div className="space-y-8">
|
||||
{rightList.map((item) => (
|
||||
<div key={item.id}>
|
||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-3 line-clamp-2">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500">
|
||||
{formatDate(item.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative my-8 h-[188px] overflow-hidden flex items-center mx-auto border">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
<div className="border-b border-gray-300 mb-5"></div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{articles.slice(0, 6).map((item) => (
|
||||
<Link
|
||||
href={`/details/${item.slug}`}
|
||||
key={item.id}
|
||||
className="flex gap-4 pb-4 border-b border-gray-200"
|
||||
>
|
||||
<div className="relative w-28 h-28 rounded-md overflow-hidden flex-shrink-0">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<p className="text-[11px] font-bold text-black">
|
||||
<span className="border-b-2 border-green-600 pb-[1px]">
|
||||
BERITA OPINI
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<h3 className="font-semibold text-[15px] leading-tight mt-1 line-clamp-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-[11px] text-gray-600 mt-2">
|
||||
By{" "}
|
||||
<span className="font-semibold">
|
||||
{item.customCreatorName}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p className="text-[11px] text-gray-600">
|
||||
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative h-[140px] w-full overflow-hidden rounded-none my-5">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-fill"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ type Article = {
|
|||
description: string;
|
||||
categoryName: string;
|
||||
createdAt: string;
|
||||
slug: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
|
|
@ -151,7 +152,7 @@ export default function DevelopmentNews() {
|
|||
<div key={item.id}>
|
||||
<Link
|
||||
className="flex flex-col md:flex-row gap-6"
|
||||
href={`/detail/${item?.id}`}
|
||||
href={`/details/${item?.slug}`}
|
||||
>
|
||||
{/* Image + Category */}
|
||||
<div className="relative w-full md:w-1/2 h-64">
|
||||
|
|
@ -317,7 +318,7 @@ export default function DevelopmentNews() {
|
|||
<div key={item.id} className="flex gap-3 items-center">
|
||||
<Link
|
||||
className="flex gap-3 items-center"
|
||||
href={`/detail/${item?.id}`}
|
||||
href={`/details/${item?.slug}`}
|
||||
>
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/no-image.jpg"}
|
||||
|
|
@ -342,7 +343,7 @@ export default function DevelopmentNews() {
|
|||
</h2>
|
||||
<div className=" w-full">
|
||||
<div className="relative w-full aspect-video mb-5">
|
||||
<Link href={`/detail/${articles[0]?.id}`}>
|
||||
<Link href={`/details/${articles[0]?.slug}`}>
|
||||
<Image
|
||||
src={
|
||||
articles[0]?.thumbnailUrl ||
|
||||
|
|
@ -392,7 +393,7 @@ export default function DevelopmentNews() {
|
|||
<div key={index}>
|
||||
<Link
|
||||
className="flex gap-3"
|
||||
href={`/detail/${article?.id}`}
|
||||
href={`/details/${article?.slug}`}
|
||||
>
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
slug: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
|
|
@ -107,7 +108,7 @@ export default function HeaderDevelopment() {
|
|||
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
|
||||
{mainArticle && (
|
||||
<div className="md:col-span-2 relative">
|
||||
<Link href={`/detail/${mainArticle.id}`}>
|
||||
<Link href={`/details/${mainArticle.slug}`}>
|
||||
<Image
|
||||
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
|
||||
alt={mainArticle.title}
|
||||
|
|
@ -143,7 +144,7 @@ export default function HeaderDevelopment() {
|
|||
<div className="grid grid-rows-2 gap-2">
|
||||
{otherArticles.map((article, index) => (
|
||||
<div key={index} className="relative">
|
||||
<Link href={`/detail/${article.id}`}>
|
||||
<Link href={`/details/${article.slug}`}>
|
||||
<Image
|
||||
src={
|
||||
article.thumbnailUrl ||
|
||||
|
|
|
|||
|
|
@ -1,118 +1,66 @@
|
|||
// components/Footer.tsx
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-white text-[#666666] text-sm font-sans border-t border-gray-200">
|
||||
<div className="max-w-[1350px] mx-auto py-6">
|
||||
{/* Top Menu Links */}
|
||||
<div className="flex flex-wrap justify-center md:justify-start gap-2 md:gap-3 text-xs mb-8 text-black">
|
||||
{[
|
||||
"Tentang Kami",
|
||||
"Disclaimer",
|
||||
"Kode Etik Jurnalistik",
|
||||
"Kebijakan Privasi",
|
||||
"Pedoman Pemberitaan Media Siber",
|
||||
].map((item, idx, arr) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="flex items-center gap-2 whitespace-nowrap"
|
||||
>
|
||||
<a href="#" className="hover:underline">
|
||||
{item}
|
||||
</a>
|
||||
{idx !== arr.length - 1 && (
|
||||
<span className="text-gray-400">/</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
<footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
|
||||
<div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
|
||||
{/* Logo */}
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<Image
|
||||
src="/wargabicara-logo.png"
|
||||
alt="Logo"
|
||||
width={230}
|
||||
height={230}
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr className="border-t border-gray-200 my-4" />
|
||||
{/* Subscribe Box */}
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<div className=" p-8 w-full md:w-[420px]">
|
||||
<h2 className="text-2xl font-semibold text-gray-800 leading-snug">
|
||||
Subscribe us to get <br />
|
||||
the latest news!
|
||||
</h2>
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-between">
|
||||
<p className="text-xs text-gray-500 mb-2 md:mb-0">
|
||||
© 2020 - © Copyright humasRI Team All Rights Reserved .
|
||||
</p>
|
||||
<div className="flex space-x-4 text-[#A0A0A0]">
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-[#A0A0A0]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-[#A0A0A0]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
<label className="block mt-6 mb-1 text-sm text-gray-600">
|
||||
Email address:
|
||||
</label>
|
||||
|
||||
// fill-rule="evenodd"
|
||||
>
|
||||
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 4c.855 0 1.732.022 2.582.058l1.004.048l.961.057l.9.061l.822.064a3.8 3.8 0 0 1 3.494 3.423l.04.425l.075.91c.07.943.122 1.971.122 2.954s-.052 2.011-.122 2.954l-.075.91l-.04.425a3.8 3.8 0 0 1-3.495 3.423l-.82.063l-.9.062l-.962.057l-1.004.048A62 62 0 0 1 12 20a62 62 0 0 1-2.582-.058l-1.004-.048l-.961-.057l-.9-.062l-.822-.063a3.8 3.8 0 0 1-3.494-3.423l-.04-.425l-.075-.91A41 41 0 0 1 2 12c0-.983.052-2.011.122-2.954l.075-.91l.04-.425A3.8 3.8 0 0 1 5.73 4.288l.821-.064l.9-.061l.962-.057l1.004-.048A62 62 0 0 1 12 4m-2 5.575v4.85c0 .462.5.75.9.52l4.2-2.425a.6.6 0 0 0 0-1.04l-4.2-2.424a.6.6 0 0 0-.9.52Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-[#A0A0A0]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-[#A0A0A0]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
// fill-rule="evenodd"
|
||||
d="M17.802 12.298s1.617 1.597 2.017 2.336a.1.1 0 0 1 .018.035q.244.409.123.645c-.135.261-.592.392-.747.403h-2.858c-.199 0-.613-.052-1.117-.4c-.385-.269-.768-.712-1.139-1.145c-.554-.643-1.033-1.201-1.518-1.201a.6.6 0 0 0-.18.03c-.367.116-.833.639-.833 2.032c0 .436-.344.684-.585.684H9.674c-.446 0-2.768-.156-4.827-2.327C2.324 10.732.058 5.4.036 5.353c-.141-.345.155-.533.475-.533h2.886c.387 0 .513.234.601.444c.102.241.48 1.205 1.1 2.288c1.004 1.762 1.621 2.479 2.114 2.479a.53.53 0 0 0 .264-.07c.644-.354.524-2.654.494-3.128c0-.092-.001-1.027-.331-1.479c-.236-.324-.638-.45-.881-.496c.065-.094.203-.238.38-.323c.441-.22 1.238-.252 2.029-.252h.439c.858.012 1.08.067 1.392.146c.628.15.64.557.585 1.943c-.016.396-.033.842-.033 1.367c0 .112-.005.237-.005.364c-.019.711-.044 1.512.458 1.841a.4.4 0 0 0 .217.062c.174 0 .695 0 2.108-2.425c.62-1.071 1.1-2.334 1.133-2.429c.028-.053.112-.202.214-.262a.5.5 0 0 1 .236-.056h3.395c.37 0 .621.056.67.196c.082.227-.016.92-1.566 3.016c-.261.349-.49.651-.691.915c-1.405 1.844-1.405 1.937.083 3.337"
|
||||
// clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email address"
|
||||
className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
|
||||
/>
|
||||
|
||||
<button className="mt-4 bg-green-600 hover:bg-green-500 text-white px-6 py-3 rounded-md font-medium">
|
||||
SIGN UP
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-8 mt-16 text-gray-600 text-sm">
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Contact</a>
|
||||
<a href="#">Kode Etik Jurnalistik</a>
|
||||
<a href="#">Kebijakan Privasi</a>
|
||||
<a href="#">Disclaimer</a>
|
||||
<a href="#">Pedoman Media Siber</a>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-8 mt-8 text-gray-700">
|
||||
<Facebook className="w-5 h-5 cursor-pointer" />
|
||||
<Twitter className="w-5 h-5 cursor-pointer" />
|
||||
<Instagram className="w-5 h-5 cursor-pointer" />
|
||||
<Youtube className="w-5 h-5 cursor-pointer" />
|
||||
</div>
|
||||
|
||||
<p className="text-start text-gray-500 text-sm mt-8 pl-5">
|
||||
© 2025 Warga Bicara - All Rights Reserved.
|
||||
</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -11,7 +11,9 @@ type Article = {
|
|||
description: string;
|
||||
categoryName: string;
|
||||
createdAt: string;
|
||||
slug: string;
|
||||
createdByName: string;
|
||||
publishedAt: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: { title: string }[];
|
||||
|
|
@ -23,74 +25,207 @@ export default function Header() {
|
|||
|
||||
useEffect(() => {
|
||||
const fetchArticles = async () => {
|
||||
try {
|
||||
const req = {
|
||||
limit: "5", // tampilkan 5 artikel seperti data dummy sebelumnya
|
||||
page: 1,
|
||||
search: "",
|
||||
categorySlug: "",
|
||||
sort: "desc",
|
||||
isPublish: true,
|
||||
sortBy: "created_at",
|
||||
};
|
||||
const req = {
|
||||
limit: "10",
|
||||
page: 1,
|
||||
search: "",
|
||||
categorySlug: "",
|
||||
sort: "desc",
|
||||
isPublish: true,
|
||||
sortBy: "created_at",
|
||||
};
|
||||
|
||||
const res = await getListArticle(req);
|
||||
setArticles(res?.data?.data || []);
|
||||
} catch (err) {
|
||||
console.error("Error fetching articles:", err);
|
||||
}
|
||||
const res = await getListArticle(req);
|
||||
setArticles(res?.data?.data || []);
|
||||
};
|
||||
|
||||
fetchArticles();
|
||||
}, []);
|
||||
|
||||
const flashArticles = articles.slice(0, 8);
|
||||
const mainArticle = articles[8] || articles[0];
|
||||
const recentPosts = articles.slice(1, 5);
|
||||
|
||||
return (
|
||||
<section className="px-4 py-8 bg-white">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-1 max-w-[1350px] mx-auto">
|
||||
{articles.map((article) => {
|
||||
const imageUrl =
|
||||
article.thumbnailUrl ||
|
||||
article.files?.[0]?.fileUrl ||
|
||||
"/placeholder.jpg"; // fallback jika gambar tidak ada
|
||||
<section className="max-w-7xl mx-auto bg-white px-4">
|
||||
{/* FLASH STRIP */}
|
||||
<div className="flex items-center justify-between mt-6 mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<h4 className="text-green-600 font-semibold">Flash</h4>
|
||||
<span className="text-red-500">⚡</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 hidden md:block">LOAD MORE ➜</div>
|
||||
</div>
|
||||
|
||||
const category =
|
||||
article.categoryName ||
|
||||
article.categories?.[0]?.title ||
|
||||
"SUARA WARGA";
|
||||
|
||||
// Format tanggal dari createdAt
|
||||
const date = new Date(article.createdAt).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
return (
|
||||
<div key={article.id}>
|
||||
<Link
|
||||
className="border border-gray-200 overflow-hidden shadow-sm bg-white h-[440px]"
|
||||
href={`/detail/${article?.id}`}
|
||||
>
|
||||
<div className="overflow-x-auto no-scrollbar py-2">
|
||||
<div className="flex gap-4">
|
||||
{flashArticles.map((item) => (
|
||||
<Link
|
||||
href={`/details/${item.slug}`}
|
||||
key={`flash-${item.id}`}
|
||||
className="min-w-[200px] md:min-w-[220px] bg-gray-800 rounded-lg overflow-hidden relative shadow"
|
||||
>
|
||||
<div className="relative w-[200px] md:w-[220px] h-[140px]">
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={article.title}
|
||||
width={267}
|
||||
height={191}
|
||||
className="w-full h-48 object-cover"
|
||||
src={
|
||||
item.thumbnailUrl ||
|
||||
item.files?.[0]?.fileUrl ||
|
||||
"/placeholder.jpg"
|
||||
}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="p-4 text-center">
|
||||
<p className="text-xs text-gray-400 font-medium tracking-wider uppercase py-2">
|
||||
{category}
|
||||
</div>
|
||||
|
||||
{/* dark overlay with text */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent text-white">
|
||||
<p className="text-xs line-clamp-2">{item.title}</p>
|
||||
<div className="flex items-center justify-between mt-2 text-[11px] text-gray-300">
|
||||
<span className="text-yellow-300 bg-black/30 px-1 rounded-sm">
|
||||
{item.categoryName ||
|
||||
item.categories?.[0]?.title ||
|
||||
"Berita"}
|
||||
</span>
|
||||
<span>●</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* play icon */}
|
||||
<div className="absolute top-3 right-3 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center">
|
||||
<svg
|
||||
className="w-4 h-4 text-black"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-[2.2fr_1fr] gap-6">
|
||||
{/* LEFT SIDE – MAIN ARTICLE */}
|
||||
{mainArticle ? (
|
||||
<div className="relative h-[500px] w-full rounded-xl overflow-hidden shadow-md">
|
||||
<Link href={`/details/${mainArticle.slug}`}>
|
||||
<Image
|
||||
src={
|
||||
mainArticle.thumbnailUrl ||
|
||||
mainArticle.files?.[0]?.fileUrl ||
|
||||
"/placeholder.jpg"
|
||||
}
|
||||
alt={mainArticle.files?.[0]?.file_alt || mainArticle.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
|
||||
{/* White Card Overlay */}
|
||||
<div className="absolute bottom-6 left-6 bg-white bg-opacity-95 backdrop-blur-sm p-6 shadow-lg max-w-lg">
|
||||
<span className="text-[11px] bg-green-700 text-white px-2 py-1 rounded-sm">
|
||||
{mainArticle.categoryName ||
|
||||
mainArticle.categories?.[0]?.title ||
|
||||
"Berita"}
|
||||
</span>
|
||||
|
||||
<h2 className="text-xl md:text-2xl font-bold text-gray-900 mt-2 leading-snug">
|
||||
{mainArticle.title}
|
||||
</h2>
|
||||
|
||||
<div className="flex items-center gap-2 text-gray-600 text-xs mt-3">
|
||||
<span>
|
||||
By{" "}
|
||||
{mainArticle.customCreatorName ||
|
||||
mainArticle.createdByName ||
|
||||
"Admin"}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
{new Date(mainArticle.publishedAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
},
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500">Loading...</p>
|
||||
)}
|
||||
|
||||
{/* RIGHT SIDE – RECENT POSTS */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3">Recent Posts</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{recentPosts.map((item) => (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={`/details/${item.slug}`}
|
||||
className="flex gap-3"
|
||||
>
|
||||
<div className="relative w-35 h-25 rounded-md overflow-hidden">
|
||||
<Image
|
||||
src={
|
||||
item.thumbnailUrl ||
|
||||
item.files?.[0]?.fileUrl ||
|
||||
"/placeholder.jpg"
|
||||
}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<p className="text-sm font-semibold line-clamp-2">
|
||||
{item.title}
|
||||
</p>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 leading-snug px-9">
|
||||
{article.title}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-400">{date}</p>
|
||||
<span className="text-xs text-gray-500 mt-1">
|
||||
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* LOAD MORE */}
|
||||
<div className="flex justify-center my-6">
|
||||
<button className="text-gray-600 text-sm flex items-center gap-2 border-b pb-1">
|
||||
<span>LOAD MORE</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M12 5v14M5 12h14"
|
||||
stroke="#9CA3AF"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* KOLOM PPS BOTTOM BANNER */}
|
||||
<div className="relative h-[140px] w-full overflow-hidden rounded-none my-5 border rounded-md">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Kolom PPS Bottom Banner"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
import { getListArticle } from "@/service/article";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -10,247 +11,175 @@ type Article = {
|
|||
description: string;
|
||||
categoryName: string;
|
||||
createdAt: string;
|
||||
publishedAt: string;
|
||||
slug: string;
|
||||
createdByName: string;
|
||||
categories: { title: string }[];
|
||||
customCreatorName?: string;
|
||||
thumbnailUrl?: string;
|
||||
files?: { fileUrl: string; file_alt: string }[];
|
||||
categories?: { title: string }[];
|
||||
};
|
||||
|
||||
export default function Health() {
|
||||
export default function NewsTerkini() {
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [popular, setPopular] = useState<Article[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchArticles();
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
async function fetchArticles() {
|
||||
setIsLoading(true);
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const res = await getListArticle({
|
||||
limit: "12",
|
||||
limit: "20",
|
||||
page: 1,
|
||||
search: "",
|
||||
categorySlug: "", // ubah sesuai slug kategori kamu
|
||||
isPublish: true,
|
||||
sortBy: "created_at",
|
||||
sort: "desc",
|
||||
sortBy: "created_at",
|
||||
});
|
||||
setArticles(res?.data?.data || []);
|
||||
} catch (error) {
|
||||
console.error("Error fetching Health articles:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
|
||||
const data = res?.data?.data || [];
|
||||
setArticles(data.slice(0, 5));
|
||||
setPopular(data.slice(0, 5));
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
// Format tanggal Indonesia
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString("id-ID", {
|
||||
day: "2-digit",
|
||||
const formatDate = (d: string) =>
|
||||
new Date(d).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
// Mapping artikel ke posisi layout
|
||||
const leftMain = articles[0];
|
||||
const leftList = articles.slice(1, 4);
|
||||
const centerMain = articles[4];
|
||||
const centerList = articles.slice(5, 8);
|
||||
const rightMain = articles[8];
|
||||
const rightList = articles.slice(9, 12);
|
||||
|
||||
if (isLoading)
|
||||
if (loading)
|
||||
return (
|
||||
<p className="text-center text-gray-500 py-10">
|
||||
Memuat berita kesehatan...
|
||||
<p className="text-center py-10 text-gray-500">
|
||||
Memuat berita terbaru...
|
||||
</p>
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="max-w-7xl mx-auto px-4">
|
||||
<h2 className="text-lg font-bold text-white bg-red-600 inline-block px-4 py-2 border-b-2">
|
||||
KESEHATAN
|
||||
</h2>
|
||||
<h2 className="border-b-2 mb-4"></h2>
|
||||
<section className="max-w-7xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-gray-900">BERITA TERKINI</h2>
|
||||
<div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
|
||||
|
||||
{articles.length === 0 ? (
|
||||
<p className="text-gray-500 text-center py-10">
|
||||
Belum ada berita di kategori kesehatan.
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* === LEFT COLUMN === */}
|
||||
{leftMain && (
|
||||
<div className="w-full">
|
||||
<Link href={`/detail/${leftMain.id}`}>
|
||||
<div className="relative w-full aspect-video mb-2">
|
||||
<div className="space-y-6">
|
||||
{articles.map((item) => (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={`/details/${item.slug}`}
|
||||
className="block border-b pb-6"
|
||||
>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
{/* CATEGORY */}
|
||||
<p className="text-[11px] text-green-700 font-semibold mb-1">
|
||||
{item.categoryName || "Kategori"}
|
||||
</p>
|
||||
|
||||
{/* JUDUL */}
|
||||
<h3 className="font-bold text-base leading-snug line-clamp-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
{/* DESKRIPSI */}
|
||||
<p className="text-sm text-gray-600 line-clamp-2 mt-1">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
{/* AUTHOR + DATE */}
|
||||
<p className="text-xs text-gray-400 mt-2">
|
||||
By {item.customCreatorName || item.createdByName} —{" "}
|
||||
{formatDate(item.publishedAt)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative w-40 h-28 rounded overflow-hidden flex-shrink-0">
|
||||
<Image
|
||||
src={leftMain.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={leftMain.title}
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
|
||||
{leftMain.categories?.[0]?.title}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-base mb-2">
|
||||
{leftMain.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||||
by {leftMain.customCreatorName || leftMain.createdByName} ·{" "}
|
||||
{formatDate(leftMain.createdAt)}
|
||||
</p>
|
||||
<p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
|
||||
{leftMain.description}
|
||||
</p>
|
||||
</Link>
|
||||
<div className="space-y-8">
|
||||
{leftList.map((item) => (
|
||||
<div key={item.id}>
|
||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-3 line-clamp-2">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500">
|
||||
{formatDate(item.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* === CENTER COLUMN === */}
|
||||
{centerMain && (
|
||||
<div className="w-full">
|
||||
<Link href={`/detail/${centerMain.id}`}>
|
||||
<div className="relative w-full aspect-video mb-2">
|
||||
<Image
|
||||
src={centerMain.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={centerMain.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
|
||||
{centerMain.categories?.[0]?.title}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-base mb-2">
|
||||
{centerMain.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||||
by {centerMain.customCreatorName || centerMain.createdByName}{" "}
|
||||
· {formatDate(centerMain.createdAt)}
|
||||
</p>
|
||||
<p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
|
||||
{centerMain.description}
|
||||
</p>
|
||||
</Link>
|
||||
<div className="space-y-8">
|
||||
{centerList.map((item) => (
|
||||
<div key={item.id}>
|
||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-3 line-clamp-2">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500">
|
||||
{formatDate(item.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* === RIGHT COLUMN === */}
|
||||
{rightMain && (
|
||||
<div className="w-full">
|
||||
<Link href={`/detail/${rightMain.id}`}>
|
||||
<div className="relative w-full aspect-video mb-2">
|
||||
<Image
|
||||
src={rightMain.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={rightMain.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
|
||||
{rightMain.categories?.[0]?.title}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-base mb-2">
|
||||
{rightMain.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||||
by {rightMain.customCreatorName || rightMain.createdByName} ·{" "}
|
||||
{formatDate(rightMain.createdAt)}
|
||||
</p>
|
||||
<p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
|
||||
{rightMain.description}
|
||||
</p>
|
||||
</Link>
|
||||
<div className="space-y-8">
|
||||
{rightList.map((item) => (
|
||||
<div key={item.id}>
|
||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-3 line-clamp-2">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500">
|
||||
{formatDate(item.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative my-8 h-[188px] overflow-hidden flex items-center mx-auto border">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
{/* LOAD MORE */}
|
||||
<div className="text-center mt-4 text-green-600 text-sm cursor-pointer">
|
||||
LOAD MORE ↓
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1">
|
||||
<h2 className="text-lg font-bold text-gray-900">TERBANYAK DIBAGIKAN</h2>
|
||||
<div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{popular.map((item, index) => (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={`/details/${item.slug}`}
|
||||
className="flex gap-3 border-b pb-4"
|
||||
>
|
||||
{/* NOMOR */}
|
||||
<div className="text-green-600 font-extrabold text-3xl leading-none">
|
||||
{(index + 1).toString().padStart(2, "0")}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<p className="text-[10px] text-gray-500">
|
||||
{item.categories?.[0]?.title || "Kategori"}
|
||||
</p>
|
||||
<h4 className="font-semibold text-sm leading-snug line-clamp-2">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-[10px] text-gray-400 mt-1">
|
||||
{formatDate(item.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* THUMBNAIL KECIL */}
|
||||
<div className="relative w-16 h-14 rounded overflow-hidden">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<div className="relative h-[180px] border rounded-lg overflow-hidden mb-6">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Kolom PPS"
|
||||
fill
|
||||
className="object-contain bg-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[180px] border rounded-lg overflow-hidden">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Kolom PPS"
|
||||
fill
|
||||
className="object-contain bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ type Article = {
|
|||
categoryName: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
slug: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: {
|
||||
|
|
@ -101,7 +102,7 @@ export default function HeaderHealth() {
|
|||
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
|
||||
{mainArticle && (
|
||||
<div className="md:col-span-2 relative">
|
||||
<Link href={`/detail/${mainArticle.id}`}>
|
||||
<Link href={`/details/${mainArticle.slug}`}>
|
||||
<Image
|
||||
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
|
||||
alt={mainArticle.title}
|
||||
|
|
@ -137,7 +138,7 @@ export default function HeaderHealth() {
|
|||
<div className="grid grid-rows-2 gap-2">
|
||||
{otherArticles.map((article, index) => (
|
||||
<div key={index} className="relative">
|
||||
<Link href={`/detail/${article.id}`}>
|
||||
<Link href={`/details/${article.slug}`}>
|
||||
<Image
|
||||
src={
|
||||
article.thumbnailUrl ||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ type Article = {
|
|||
title: string;
|
||||
description: string;
|
||||
categoryName: string;
|
||||
slug: string;
|
||||
createdAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
|
|
@ -148,7 +149,7 @@ export default function HealthNews() {
|
|||
<div key={item.id}>
|
||||
<Link
|
||||
className="flex flex-col md:flex-row gap-6"
|
||||
href={`/detail/${item?.id}`}
|
||||
href={`/details/${item?.slug}`}
|
||||
>
|
||||
<div className="relative w-full md:w-1/2 h-64">
|
||||
<Image
|
||||
|
|
@ -308,7 +309,7 @@ export default function HealthNews() {
|
|||
<div key={item.id} className="flex gap-3 items-center">
|
||||
<Link
|
||||
className="flex gap-3 items-center"
|
||||
href={`/detail/${item?.id}`}
|
||||
href={`/details/${item?.slug}`}
|
||||
>
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/no-image.jpg"}
|
||||
|
|
@ -333,7 +334,7 @@ export default function HealthNews() {
|
|||
</h2>
|
||||
<div className=" w-full">
|
||||
<div className="relative w-full aspect-video mb-5">
|
||||
<Link href={`/detail/${articles[0]?.id}`}>
|
||||
<Link href={`/details/${articles[0]?.slug}`}>
|
||||
<Image
|
||||
src={
|
||||
articles[0]?.thumbnailUrl ||
|
||||
|
|
@ -383,7 +384,7 @@ export default function HealthNews() {
|
|||
<div key={index}>
|
||||
<Link
|
||||
className="flex gap-3"
|
||||
href={`/detail/${article?.id}`}
|
||||
href={`/details/${article?.slug}`}
|
||||
>
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { getListArticle } from "@/service/article";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
|
|
@ -10,7 +11,9 @@ type Article = {
|
|||
title: string;
|
||||
description: string;
|
||||
categoryName: string;
|
||||
slug: string;
|
||||
createdAt: string;
|
||||
publishedAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
|
|
@ -30,7 +33,6 @@ export default function News() {
|
|||
endDate: null,
|
||||
});
|
||||
|
||||
// Fetch data setiap kali page berubah
|
||||
useEffect(() => {
|
||||
initState();
|
||||
}, [page, showData, startDateValue, selectedCategories]);
|
||||
|
|
@ -55,126 +57,70 @@ export default function News() {
|
|||
}
|
||||
}
|
||||
|
||||
const handlePrev = () => {
|
||||
if (page > 1) setPage((prev) => prev - 1);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (page < totalPage) setPage((prev) => prev + 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="max-w-screen-xl mx-auto px-4 py-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Berita Terbaru */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex flex-row items-center gap-2 mb-4">
|
||||
<h2 className="text-lg font-semibold">Berita Terbaru</h2>
|
||||
<div className="flex-grow border-t-2 border-gray-300 rounded-md" />
|
||||
</div>
|
||||
<div className="">
|
||||
{/* TITLE */}
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-black text-[#000]">BERITA POPULER</h2>
|
||||
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{articles.length > 0 ? (
|
||||
articles.map((item) => (
|
||||
<div key={item.id} className="group cursor-pointer">
|
||||
<Link href={`/detail/${item.id}`}>
|
||||
<div className="relative w-full aspect-[3/2] overflow-hidden">
|
||||
<Image
|
||||
src={
|
||||
item.thumbnailUrl ||
|
||||
item.files?.[0]?.fileUrl ||
|
||||
"/placeholder.jpg"
|
||||
}
|
||||
alt={item.files?.[0]?.file_alt || item.title}
|
||||
fill
|
||||
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-[10px] px-2 py-1">
|
||||
{item.categoryName ||
|
||||
item.categories?.[0]?.title ||
|
||||
"Umum"}
|
||||
</span>
|
||||
</div>
|
||||
{/* GRID 4 KOLOM */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{articles.slice(0, 4).map((item) => (
|
||||
<Link href={`/details/${item.slug}`} key={item.id}>
|
||||
<div>
|
||||
{/* GAMBAR */}
|
||||
<div className="relative w-full h-56 rounded-lg overflow-hidden">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
|
||||
<h3 className="mt-3 font-bold leading-snug line-clamp-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-xs text-[#A0A0A0] mt-1 flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
className="text-gray-400"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
|
||||
/>
|
||||
</svg>
|
||||
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</Link>
|
||||
{/* BADGE CATEGORY DI DALAM GAMBAR */}
|
||||
<div className="absolute bottom-2 left-2">
|
||||
<span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
|
||||
{item.categoryName || "Kategori"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="col-span-3 text-center text-gray-500">
|
||||
Tidak ada artikel tersedia.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="mt-8 flex flex-wrap gap-2 justify-start">
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
disabled={page === 1}
|
||||
className={`border px-3 py-1 text-xs rounded-sm ${
|
||||
page === 1
|
||||
? "opacity-50 cursor-not-allowed"
|
||||
: "hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
‹ PREV
|
||||
</button>
|
||||
{/* JUDUL */}
|
||||
<h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
<button
|
||||
onClick={handleNext}
|
||||
disabled={page >= totalPage}
|
||||
className={`border px-3 py-1 text-xs rounded-sm ${
|
||||
page >= totalPage
|
||||
? "opacity-50 cursor-not-allowed"
|
||||
: "hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
NEXT ›
|
||||
</button>
|
||||
</div>
|
||||
{/* AUTHOR + DATE */}
|
||||
<div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
|
||||
<span className="font-semibold">
|
||||
By {item.customCreatorName || item.createdByName || "Admin"}
|
||||
</span>
|
||||
<span className="text-yellow-500">-</span>
|
||||
<span>
|
||||
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Twitter Section */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold border-b-2 border-gray-300 mb-4">
|
||||
Twitter @ArahNegeri
|
||||
</h3>
|
||||
{/* Embed atau konten lain */}
|
||||
<div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Kolom PPS"
|
||||
fill
|
||||
className="object-contain bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Banner bawah */}
|
||||
<div className="relative my-5 h-[188px] overflow-hidden flex items-center mx-auto border">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,144 +1,170 @@
|
|||
"use client";
|
||||
import { Lock, Menu, Search } from "lucide-react";
|
||||
|
||||
import { Search } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Button } from "../ui/button";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export default function Navbar() {
|
||||
const pathname = usePathname();
|
||||
const isActive = (href: any) => {
|
||||
return pathname === href || pathname.startsWith(href + "/");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full bg-white ">
|
||||
<div className="flex flex-row items-center border-b-2 border-black mx-5">
|
||||
<div className="relative w-full h-[113px]">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Image
|
||||
src="/Warga.png"
|
||||
alt="Kritik Tajam Logo"
|
||||
width={100}
|
||||
height={93}
|
||||
className="object-contain"
|
||||
/>
|
||||
<div className="w-full bg-white py-4 border-b">
|
||||
<div className="max-w-screen-xl mx-auto flex flex-col justify-between px-4">
|
||||
{/* Left: Logo */}
|
||||
<div className="flex flex-row justify-between mb-3">
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
src="/wargabicara-logo.png"
|
||||
alt="Kritik Tajam Logo"
|
||||
width={140}
|
||||
height={100}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Social Icons */}
|
||||
<div className="hidden md:flex items-center gap-5 text-black text-xl">
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4 text-black mt-2 md:mt-0 mr-3 md:mr-3 lg:mr-3 xl:mr-0 ">
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 256 209"
|
||||
>
|
||||
<path
|
||||
fill="#55acee"
|
||||
d="M256 25.45a105 105 0 0 1-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.2 105.2 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.3 52.3 0 0 1-23.79-6.57q-.004.33-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.6 52.6 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435q0-3.417-.152-6.795A106.8 106.8 0 0 0 256 25.45"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 72 72"
|
||||
>
|
||||
<path
|
||||
fill="#ea5a47"
|
||||
d="M63.874 21.906a7.31 7.31 0 0 0-5.144-5.177C54.193 15.505 36 15.505 36 15.505s-18.193 0-22.73 1.224a7.31 7.31 0 0 0-5.144 5.177C6.91 26.472 6.91 36 6.91 36s0 9.528 1.216 14.095a7.31 7.31 0 0 0 5.144 5.177C17.807 56.495 36 56.495 36 56.495s18.193 0 22.73-1.223a7.31 7.31 0 0 0 5.144-5.177C65.09 45.528 65.09 36 65.09 36s0-9.528-1.216-14.094"
|
||||
/>
|
||||
<path fill="#fff" d="M30.05 44.65L45.256 36L30.05 27.35Z" />
|
||||
<g
|
||||
fill="none"
|
||||
stroke="#000"
|
||||
// stroke-miterlimit="10"
|
||||
// stroke-width="2"
|
||||
>
|
||||
<path d="M63.874 21.906a7.31 7.31 0 0 0-5.144-5.177C54.193 15.505 36 15.505 36 15.505s-18.193 0-22.73 1.224a7.31 7.31 0 0 0-5.144 5.177C6.91 26.472 6.91 36 6.91 36s0 9.528 1.216 14.095a7.31 7.31 0 0 0 5.144 5.177C17.807 56.495 36 56.495 36 56.495s18.193 0 22.73-1.223a7.31 7.31 0 0 0 5.144-5.177C65.09 45.528 65.09 36 65.09 36s0-9.528-1.216-14.094" />
|
||||
<path
|
||||
// stroke-linecap="round"
|
||||
// stroke-linejoin="round"
|
||||
d="M30.05 44.65L45.256 36L30.05 27.35Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-red-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-blue-800">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
// fill-rule="evenodd"
|
||||
d="M17.802 12.298s1.617 1.597 2.017 2.336a.1.1 0 0 1 .018.035q.244.409.123.645c-.135.261-.592.392-.747.403h-2.858c-.199 0-.613-.052-1.117-.4c-.385-.269-.768-.712-1.139-1.145c-.554-.643-1.033-1.201-1.518-1.201a.6.6 0 0 0-.18.03c-.367.116-.833.639-.833 2.032c0 .436-.344.684-.585.684H9.674c-.446 0-2.768-.156-4.827-2.327C2.324 10.732.058 5.4.036 5.353c-.141-.345.155-.533.475-.533h2.886c.387 0 .513.234.601.444c.102.241.48 1.205 1.1 2.288c1.004 1.762 1.621 2.479 2.114 2.479a.53.53 0 0 0 .264-.07c.644-.354.524-2.654.494-3.128c0-.092-.001-1.027-.331-1.479c-.236-.324-.638-.45-.881-.496c.065-.094.203-.238.38-.323c.441-.22 1.238-.252 2.029-.252h.439c.858.012 1.08.067 1.392.146c.628.15.64.557.585 1.943c-.016.396-.033.842-.033 1.367c0 .112-.005.237-.005.364c-.019.711-.044 1.512.458 1.841a.4.4 0 0 0 .217.062c.174 0 .695 0 2.108-2.425c.62-1.071 1.1-2.334 1.133-2.429c.028-.053.112-.202.214-.262a.5.5 0 0 1 .236-.056h3.395c.37 0 .621.056.67.196c.082.227-.016.92-1.566 3.016c-.261.349-.49.651-.691.915c-1.405 1.844-1.405 1.937.083 3.337"
|
||||
// clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" mx-auto flex items-center justify-between px-4 py-3">
|
||||
{/* Kiri: Hamburger */}
|
||||
<div className="flex items-center">
|
||||
<Menu className="w-6 h-6 text-black cursor-pointer" />
|
||||
</div>
|
||||
{/* Middle Menu */}
|
||||
<div className="flex flex-row justify-between">
|
||||
<nav className="hidden md:flex items-center gap-10 text-sm font-semibold">
|
||||
<Link
|
||||
href="/"
|
||||
className={
|
||||
isActive("/")
|
||||
? "text-green-400 underline"
|
||||
: "text-black hover:text-green-400"
|
||||
}
|
||||
>
|
||||
Beranda
|
||||
</Link>
|
||||
|
||||
{/* Tengah: Menu Utama */}
|
||||
<nav className="hidden md:flex space-x-8 font-bold text-sm text-black">
|
||||
<a href="/" className="relative">
|
||||
<span className="border-b-2 border-black pb-1">BERANDA</span>
|
||||
</a>
|
||||
<a href="/category/citizen-news" className="hover:text-gray-700">
|
||||
BERITA WARGA
|
||||
</a>
|
||||
<a href="/category/development" className="hover:text-gray-700">
|
||||
PEMBANGUNAN
|
||||
</a>
|
||||
<a href="/category/health" className="hover:text-gray-700">
|
||||
KESEHATAN
|
||||
</a>
|
||||
<Link
|
||||
href="/category/citizen-news"
|
||||
className={
|
||||
isActive("/category/citizen-news")
|
||||
? "text-green-400 underline"
|
||||
: "text-black hover:text-green-400"
|
||||
}
|
||||
>
|
||||
Berita Warga
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/category/development"
|
||||
className={
|
||||
isActive("/category/development")
|
||||
? "text-green-400 underline"
|
||||
: "text-black hover:text-green-400"
|
||||
}
|
||||
>
|
||||
Pembangunan
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/category/health"
|
||||
className={
|
||||
isActive("/category/health")
|
||||
? "text-green-400 underline"
|
||||
: "text-black hover:text-green-400"
|
||||
}
|
||||
>
|
||||
Kesehatan
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Kanan: Search Icon */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Search className="w-5 h-5 text-black cursor-pointer" />
|
||||
<Link href="/auth" className="font-medium hover:underline">
|
||||
<Button>
|
||||
{" "}
|
||||
<Lock className="w-4 h-4" />
|
||||
Login
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
// onClick={() => document.documentElement.classList.toggle("dark")}
|
||||
className="w-10 h-5 rounded-full bg-gray-300 dark:bg-gray-700 relative transition-all"
|
||||
>
|
||||
<div className="w-5 h-5 bg-white dark:bg-black rounded-full shadow absolute top-0 left-0 dark:left-5 transition-all"></div>
|
||||
</button>
|
||||
|
||||
{/* BURGER BUTTON (mobile menu) */}
|
||||
<button className="md:hidden p-2 rounded-lg border">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="p-2 border rounded-full">
|
||||
<Search size={15} />
|
||||
</button>
|
||||
<Link href={"/auth"}>
|
||||
<button className="bg-green-400 text-white px-5 py-2 rounded-full text-sm font-semibold">
|
||||
LOGIN
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
"use client";
|
||||
|
||||
import { getListArticle } from "@/service/article";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
categoryName: string;
|
||||
slug: string;
|
||||
createdAt: string;
|
||||
publishedAt: string;
|
||||
createdByName: string;
|
||||
customCreatorName: string;
|
||||
thumbnailUrl: string;
|
||||
categories: { title: string }[];
|
||||
files: { fileUrl: string; file_alt: string }[];
|
||||
};
|
||||
|
||||
export default function OpinionNews() {
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPage, setTotalPage] = useState(1);
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
const [showData, setShowData] = useState("6");
|
||||
const [search] = useState("");
|
||||
const [selectedCategories] = useState<any>("");
|
||||
const [startDateValue] = useState({
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
initState();
|
||||
}, [page, showData, startDateValue, selectedCategories]);
|
||||
|
||||
async function initState() {
|
||||
const req = {
|
||||
limit: showData,
|
||||
page,
|
||||
search,
|
||||
categorySlug: Array.from(selectedCategories).join(","),
|
||||
sort: "desc",
|
||||
isPublish: true,
|
||||
sortBy: "created_at",
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getListArticle(req);
|
||||
setArticles(res?.data?.data || []);
|
||||
setTotalPage(res?.data?.meta?.totalPage || 1);
|
||||
} catch (err) {
|
||||
console.error("Error fetching articles:", err);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="max-w-screen-xl mx-auto px-4 py-10">
|
||||
<div className="">
|
||||
{/* TITLE */}
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-black text-[#000]">BERITA OPINI</h2>
|
||||
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
||||
</div>
|
||||
|
||||
{/* GRID 4 KOLOM */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{articles.slice(0, 4).map((item) => (
|
||||
<Link href={`/details/${item.slug}`} key={item.id}>
|
||||
<div>
|
||||
{/* GAMBAR */}
|
||||
<div className="relative w-full h-56 rounded-lg overflow-hidden">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
|
||||
{/* BADGE CATEGORY DI DALAM GAMBAR */}
|
||||
<div className="absolute bottom-2 left-2">
|
||||
<span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
|
||||
{item.categoryName || "Kategori"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* JUDUL */}
|
||||
<h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
{/* AUTHOR + DATE */}
|
||||
<div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
|
||||
<span className="font-semibold">
|
||||
By {item.customCreatorName || item.createdByName || "Admin"}
|
||||
</span>
|
||||
<span className="text-yellow-500">-</span>
|
||||
<span>
|
||||
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Kolom PPS"
|
||||
fill
|
||||
className="object-contain bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
import { Eye, Heart, MessageCircle } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
interface VideoItem {
|
||||
id: number;
|
||||
title: string;
|
||||
thumbnail: string;
|
||||
duration: string;
|
||||
publishedAt: string;
|
||||
views: string;
|
||||
likes: string;
|
||||
comments: string;
|
||||
}
|
||||
|
||||
const sampleVideos: VideoItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Cuplikan Kegiatan Presiden di IKN",
|
||||
thumbnail: "/yt/thumb1.jpg",
|
||||
duration: "12:30",
|
||||
publishedAt: "2 jam yang lalu",
|
||||
views: "12K",
|
||||
likes: "230",
|
||||
comments: "45",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Pembangunan MRT Fase Berikutnya Resmi Dimulai",
|
||||
thumbnail: "/yt/thumb2.jpg",
|
||||
duration: "08:12",
|
||||
publishedAt: "5 jam yang lalu",
|
||||
views: "9.4K",
|
||||
likes: "180",
|
||||
comments: "30",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Wilayah Indonesia Siap Hadapi Cuaca Ekstrem",
|
||||
thumbnail: "/yt/thumb3.jpg",
|
||||
duration: "05:50",
|
||||
publishedAt: "1 hari lalu",
|
||||
views: "21K",
|
||||
likes: "540",
|
||||
comments: "121",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Peningkatan Ekonomi Regional Terus Dijaga",
|
||||
thumbnail: "/yt/thumb4.jpg",
|
||||
duration: "10:44",
|
||||
publishedAt: "2 hari lalu",
|
||||
views: "18K",
|
||||
likes: "420",
|
||||
comments: "88",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Laporan Khusus Perkembangan Industri Kreatif",
|
||||
thumbnail: "/yt/thumb5.jpg",
|
||||
duration: "14:02",
|
||||
publishedAt: "3 hari lalu",
|
||||
views: "30K",
|
||||
likes: "830",
|
||||
comments: "200",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Paparan Menteri Perhubungan Soal Transportasi",
|
||||
thumbnail: "/yt/thumb6.jpg",
|
||||
duration: "07:21",
|
||||
publishedAt: "4 hari lalu",
|
||||
views: "9K",
|
||||
likes: "114",
|
||||
comments: "26",
|
||||
},
|
||||
];
|
||||
|
||||
export default function YouTubeSection() {
|
||||
return (
|
||||
<section className="max-w-7xl mx-auto px-4 py-8">
|
||||
{/* Header Channel */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<Image
|
||||
src="/yt-logo.png"
|
||||
alt="Logo Channel"
|
||||
width={70}
|
||||
height={70}
|
||||
className="rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">YouTube • Channel Resmi</h2>
|
||||
<p className="text-sm text-gray-600">
|
||||
Lebih dari 3.5 juta pengikut • 12k video
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="ml-auto bg-red-600 text-white px-4 py-2 rounded-lg font-semibold"
|
||||
>
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Grid Video */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{sampleVideos.map((v) => (
|
||||
<div key={v.id} className="cursor-pointer">
|
||||
<div className="relative w-full h-44">
|
||||
<Image
|
||||
src={v.thumbnail}
|
||||
alt={v.title}
|
||||
fill
|
||||
className="rounded-lg object-cover"
|
||||
/>
|
||||
|
||||
<span className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-2 py-1 rounded">
|
||||
{v.duration}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold mt-2 leading-tight line-clamp-2">
|
||||
{v.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-gray-600">{v.publishedAt}</p>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-700 mt-1">
|
||||
<span className="flex items-center gap-1">
|
||||
<Eye size={16} /> {v.views}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Heart size={16} /> {v.likes}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MessageCircle size={16} /> {v.comments}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex justify-center mt-8">
|
||||
<button className="px-5 py-2 rounded-lg border hover:bg-gray-100">
|
||||
Lihat Selanjutnya →
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -199,11 +199,11 @@ export default function ArticleTable() {
|
|||
initState();
|
||||
};
|
||||
|
||||
const copyUrlArticle = async (id: number) => {
|
||||
const copyUrlArticle = async (slug: any) => {
|
||||
const url =
|
||||
`${window.location.protocol}//${window.location.host}` +
|
||||
"/detail/" +
|
||||
`${id}`;
|
||||
"/details/" +
|
||||
`${slug}`;
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
successToast("Success", "Article Copy to Clipboard");
|
||||
|
|
@ -263,7 +263,9 @@ export default function ArticleTable() {
|
|||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuItem onClick={() => copyUrlArticle(article.id)}>
|
||||
<DropdownMenuItem
|
||||
onClick={() => copyUrlArticle(article.slug)}
|
||||
>
|
||||
<CopyIcon className="mr-2 h-4 w-4" />
|
||||
Copy Url Article
|
||||
</DropdownMenuItem>
|
||||
|
|
@ -314,7 +316,7 @@ export default function ArticleTable() {
|
|||
return cellValue;
|
||||
}
|
||||
},
|
||||
[article, page]
|
||||
[article, page],
|
||||
);
|
||||
|
||||
let typingTimer: NodeJS.Timeout;
|
||||
|
|
@ -443,8 +445,8 @@ export default function ArticleTable() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="w-full overflow-x-hidden">
|
||||
<div className="w-full mx-auto overflow-x-hidden">
|
||||
<Table className="w-full table-fixed border text-sm">
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Table className="min-w-[1000px] w-full table-auto border text-sm">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{(username === "admin-mabes"
|
||||
|
|
@ -453,7 +455,18 @@ export default function ArticleTable() {
|
|||
).map((column) => (
|
||||
<TableHead
|
||||
key={column.uid}
|
||||
className="truncate bg-white dark:bg-black text-black dark:text-white border-b text-md"
|
||||
className={`bg-white dark:bg-black text-black dark:text-white
|
||||
text-sm font-semibold border-b px-3 py-3
|
||||
${
|
||||
column.uid === "no"
|
||||
? "min-w-[60px] text-center"
|
||||
: column.uid === "title"
|
||||
? "min-w-[280px]"
|
||||
: column.uid === "actions"
|
||||
? "min-w-[100px] text-center"
|
||||
: "min-w-[160px]"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{column.name}
|
||||
</TableHead>
|
||||
|
|
@ -470,7 +483,17 @@ export default function ArticleTable() {
|
|||
).map((column) => (
|
||||
<TableCell
|
||||
key={column.uid}
|
||||
className="truncate text-black dark:text-white max-w-[200px]"
|
||||
className={`text-black dark:text-white text-sm px-3 py-3 align-top
|
||||
${
|
||||
column.uid === "no"
|
||||
? "min-w-[60px] text-center font-medium"
|
||||
: column.uid === "title"
|
||||
? "min-w-[280px] whitespace-normal break-words leading-snug"
|
||||
: column.uid === "actions"
|
||||
? "min-w-[100px] text-center"
|
||||
: "min-w-[160px] whitespace-normal break-words"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{renderCell(item, column.uid)}
|
||||
</TableCell>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
images: {
|
||||
domains: ["mikulnews.com", "dev.mikulnews.com"],
|
||||
domains: ["mikulnews.com", "dev.mikulnews.com", "dev.wargabicara.com"],
|
||||
},
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
// Add experimental features for better chunk handling
|
||||
experimental: {
|
||||
optimizePackageImports: ["@ckeditor/ckeditor5-react", "react-apexcharts"],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -38,12 +38,12 @@
|
|||
"js-cookie": "^3.0.5",
|
||||
"lightningcss": "^1.30.1",
|
||||
"lucide-react": "^0.525.0",
|
||||
"next": "15.3.4",
|
||||
"react": "^19.0.0",
|
||||
"next": "^16.1.1",
|
||||
"react": "^19.2.3",
|
||||
"react-apexcharts": "^1.7.0",
|
||||
"react-datepicker": "^8.4.0",
|
||||
"react-day-picker": "^9.7.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-dropzone": "^14.3.8",
|
||||
"react-hook-form": "^7.65.0",
|
||||
"react-password-checklist": "^1.8.1",
|
||||
|
|
@ -1442,10 +1442,19 @@
|
|||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
|
||||
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
|
||||
},
|
||||
"node_modules/@img/colour": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
|
||||
"integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-win32-x64": {
|
||||
"version": "0.34.2",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.2.tgz",
|
||||
"integrity": "sha512-aUdT6zEYtDKCaxkofmmJDJYGCf0+pJg3eU9/oBuqvEeoB9dKI6ZLc/1iLJCTuJQDO4ptntAlkUmHgGjyuobZbw==",
|
||||
"version": "0.34.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
|
||||
"integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
|
@ -1509,9 +1518,9 @@
|
|||
"integrity": "sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw=="
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-15.3.4.tgz",
|
||||
"integrity": "sha512-ZkdYzBseS6UjYzz6ylVKPOK+//zLWvD6Ta+vpoye8cW11AjiQjGYVibF0xuvT4L0iJfAPfZLFidaEzAOywyOAQ=="
|
||||
"version": "16.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.1.tgz",
|
||||
"integrity": "sha512-3oxyM97Sr2PqiVyMyrZUtrtM3jqqFxOQJVuKclDsgj/L728iZt/GyslkN4NwarledZATCenbk4Offjk1hQmaAA=="
|
||||
},
|
||||
"node_modules/@next/eslint-plugin-next": {
|
||||
"version": "15.3.4",
|
||||
|
|
@ -1531,9 +1540,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-x64-msvc": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.3.4.tgz",
|
||||
"integrity": "sha512-4kDt31Bc9DGyYs41FTL1/kNpDeHyha2TC0j5sRRoKCyrhNcfZ/nRQkAUlF27mETwm8QyHqIjHJitfcza2Iykfg==",
|
||||
"version": "16.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.1.tgz",
|
||||
"integrity": "sha512-Ncwbw2WJ57Al5OX0k4chM68DKhEPlrXBaSXDCi2kPi5f4d8b3ejr3RRJGfKBLrn2YJL5ezNS7w2TZLHSti8CMw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
|
@ -2550,11 +2559,6 @@
|
|||
"@svgdotjs/svg.js": "^3.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/counter": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
|
||||
"integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.15",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
|
||||
|
|
@ -2712,7 +2716,6 @@
|
|||
"version": "19.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
|
||||
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
|
|
@ -2721,7 +2724,7 @@
|
|||
"version": "19.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
|
||||
"integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.0.0"
|
||||
}
|
||||
|
|
@ -3369,6 +3372,14 @@
|
|||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/baseline-browser-mapping": {
|
||||
"version": "2.9.11",
|
||||
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
|
||||
"integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
|
||||
"bin": {
|
||||
"baseline-browser-mapping": "dist/cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/blurhash": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz",
|
||||
|
|
@ -3396,17 +3407,6 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/busboy": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
|
||||
"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
|
||||
"dependencies": {
|
||||
"streamsearch": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
|
||||
|
|
@ -3597,19 +3597,6 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1",
|
||||
"color-string": "^1.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
|
|
@ -3634,16 +3621,6 @@
|
|||
"color-name": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-string": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
|
||||
"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"color-name": "^1.0.0",
|
||||
"simple-swizzle": "^0.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
|
|
@ -3836,9 +3813,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
|
||||
"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
|
|
@ -5049,12 +5026,6 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-arrayish": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
|
||||
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/is-async-function": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
|
||||
|
|
@ -5855,14 +5826,13 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/next": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-15.3.4.tgz",
|
||||
"integrity": "sha512-mHKd50C+mCjam/gcnwqL1T1vPx/XQNFlXqFIVdgQdVAFY9iIQtY0IfaVflEYzKiqjeA7B0cYYMaCrmAYFjs4rA==",
|
||||
"version": "16.1.1",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-16.1.1.tgz",
|
||||
"integrity": "sha512-QI+T7xrxt1pF6SQ/JYFz95ro/mg/1Znk5vBebsWwbpejj1T0A23hO7GYEaVac9QUOT2BIMiuzm0L99ooq7k0/w==",
|
||||
"dependencies": {
|
||||
"@next/env": "15.3.4",
|
||||
"@swc/counter": "0.1.3",
|
||||
"@next/env": "16.1.1",
|
||||
"@swc/helpers": "0.5.15",
|
||||
"busboy": "1.6.0",
|
||||
"baseline-browser-mapping": "^2.8.3",
|
||||
"caniuse-lite": "^1.0.30001579",
|
||||
"postcss": "8.4.31",
|
||||
"styled-jsx": "5.1.6"
|
||||
|
|
@ -5871,22 +5841,22 @@
|
|||
"next": "dist/bin/next"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
|
||||
"node": ">=20.9.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@next/swc-darwin-arm64": "15.3.4",
|
||||
"@next/swc-darwin-x64": "15.3.4",
|
||||
"@next/swc-linux-arm64-gnu": "15.3.4",
|
||||
"@next/swc-linux-arm64-musl": "15.3.4",
|
||||
"@next/swc-linux-x64-gnu": "15.3.4",
|
||||
"@next/swc-linux-x64-musl": "15.3.4",
|
||||
"@next/swc-win32-arm64-msvc": "15.3.4",
|
||||
"@next/swc-win32-x64-msvc": "15.3.4",
|
||||
"sharp": "^0.34.1"
|
||||
"@next/swc-darwin-arm64": "16.1.1",
|
||||
"@next/swc-darwin-x64": "16.1.1",
|
||||
"@next/swc-linux-arm64-gnu": "16.1.1",
|
||||
"@next/swc-linux-arm64-musl": "16.1.1",
|
||||
"@next/swc-linux-x64-gnu": "16.1.1",
|
||||
"@next/swc-linux-x64-musl": "16.1.1",
|
||||
"@next/swc-win32-arm64-msvc": "16.1.1",
|
||||
"@next/swc-win32-x64-msvc": "16.1.1",
|
||||
"sharp": "^0.34.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@opentelemetry/api": "^1.1.0",
|
||||
"@playwright/test": "^1.41.2",
|
||||
"@playwright/test": "^1.51.1",
|
||||
"babel-plugin-react-compiler": "*",
|
||||
"react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
|
||||
"react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
|
||||
|
|
@ -6279,9 +6249,9 @@
|
|||
]
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
|
||||
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
|
||||
"version": "19.2.4",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
|
||||
"integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -6333,14 +6303,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
|
||||
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
|
||||
"version": "19.2.4",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
|
||||
"integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
|
||||
"dependencies": {
|
||||
"scheduler": "^0.26.0"
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.1.0"
|
||||
"react": "^19.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dropzone": {
|
||||
|
|
@ -6652,14 +6622,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.26.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
|
||||
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="
|
||||
"version": "0.27.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
||||
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.7.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
||||
"integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
|
||||
"version": "7.7.3",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
|
||||
"integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
|
||||
"devOptional": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
|
|
@ -6715,15 +6685,15 @@
|
|||
}
|
||||
},
|
||||
"node_modules/sharp": {
|
||||
"version": "0.34.2",
|
||||
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.2.tgz",
|
||||
"integrity": "sha512-lszvBmB9QURERtyKT2bNmsgxXK0ShJrL/fvqlonCo7e6xBF8nT8xU6pW+PMIbLsz0RxQk3rgH9kd8UmvOzlMJg==",
|
||||
"version": "0.34.5",
|
||||
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
|
||||
"integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"color": "^4.2.3",
|
||||
"detect-libc": "^2.0.4",
|
||||
"semver": "^7.7.2"
|
||||
"@img/colour": "^1.0.0",
|
||||
"detect-libc": "^2.1.2",
|
||||
"semver": "^7.7.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
|
|
@ -6732,27 +6702,30 @@
|
|||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-darwin-arm64": "0.34.2",
|
||||
"@img/sharp-darwin-x64": "0.34.2",
|
||||
"@img/sharp-libvips-darwin-arm64": "1.1.0",
|
||||
"@img/sharp-libvips-darwin-x64": "1.1.0",
|
||||
"@img/sharp-libvips-linux-arm": "1.1.0",
|
||||
"@img/sharp-libvips-linux-arm64": "1.1.0",
|
||||
"@img/sharp-libvips-linux-ppc64": "1.1.0",
|
||||
"@img/sharp-libvips-linux-s390x": "1.1.0",
|
||||
"@img/sharp-libvips-linux-x64": "1.1.0",
|
||||
"@img/sharp-libvips-linuxmusl-arm64": "1.1.0",
|
||||
"@img/sharp-libvips-linuxmusl-x64": "1.1.0",
|
||||
"@img/sharp-linux-arm": "0.34.2",
|
||||
"@img/sharp-linux-arm64": "0.34.2",
|
||||
"@img/sharp-linux-s390x": "0.34.2",
|
||||
"@img/sharp-linux-x64": "0.34.2",
|
||||
"@img/sharp-linuxmusl-arm64": "0.34.2",
|
||||
"@img/sharp-linuxmusl-x64": "0.34.2",
|
||||
"@img/sharp-wasm32": "0.34.2",
|
||||
"@img/sharp-win32-arm64": "0.34.2",
|
||||
"@img/sharp-win32-ia32": "0.34.2",
|
||||
"@img/sharp-win32-x64": "0.34.2"
|
||||
"@img/sharp-darwin-arm64": "0.34.5",
|
||||
"@img/sharp-darwin-x64": "0.34.5",
|
||||
"@img/sharp-libvips-darwin-arm64": "1.2.4",
|
||||
"@img/sharp-libvips-darwin-x64": "1.2.4",
|
||||
"@img/sharp-libvips-linux-arm": "1.2.4",
|
||||
"@img/sharp-libvips-linux-arm64": "1.2.4",
|
||||
"@img/sharp-libvips-linux-ppc64": "1.2.4",
|
||||
"@img/sharp-libvips-linux-riscv64": "1.2.4",
|
||||
"@img/sharp-libvips-linux-s390x": "1.2.4",
|
||||
"@img/sharp-libvips-linux-x64": "1.2.4",
|
||||
"@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
|
||||
"@img/sharp-libvips-linuxmusl-x64": "1.2.4",
|
||||
"@img/sharp-linux-arm": "0.34.5",
|
||||
"@img/sharp-linux-arm64": "0.34.5",
|
||||
"@img/sharp-linux-ppc64": "0.34.5",
|
||||
"@img/sharp-linux-riscv64": "0.34.5",
|
||||
"@img/sharp-linux-s390x": "0.34.5",
|
||||
"@img/sharp-linux-x64": "0.34.5",
|
||||
"@img/sharp-linuxmusl-arm64": "0.34.5",
|
||||
"@img/sharp-linuxmusl-x64": "0.34.5",
|
||||
"@img/sharp-wasm32": "0.34.5",
|
||||
"@img/sharp-win32-arm64": "0.34.5",
|
||||
"@img/sharp-win32-ia32": "0.34.5",
|
||||
"@img/sharp-win32-x64": "0.34.5"
|
||||
}
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
|
|
@ -6848,15 +6821,6 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/simple-swizzle": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
|
||||
"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"is-arrayish": "^0.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
|
|
@ -6892,14 +6856,6 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/streamsearch": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
|
||||
"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string.prototype.includes": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
|
||||
|
|
@ -7618,111 +7574,6 @@
|
|||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-darwin-arm64": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.3.4.tgz",
|
||||
"integrity": "sha512-z0qIYTONmPRbwHWvpyrFXJd5F9YWLCsw3Sjrzj2ZvMYy9NPQMPZ1NjOJh4ojr4oQzcGYwgJKfidzehaNa1BpEg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-darwin-x64": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.3.4.tgz",
|
||||
"integrity": "sha512-Z0FYJM8lritw5Wq+vpHYuCIzIlEMjewG2aRkc3Hi2rcbULknYL/xqfpBL23jQnCSrDUGAo/AEv0Z+s2bff9Zkw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.3.4.tgz",
|
||||
"integrity": "sha512-l8ZQOCCg7adwmsnFm8m5q9eIPAHdaB2F3cxhufYtVo84pymwKuWfpYTKcUiFcutJdp9xGHC+F1Uq3xnFU1B/7g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-musl": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.3.4.tgz",
|
||||
"integrity": "sha512-wFyZ7X470YJQtpKot4xCY3gpdn8lE9nTlldG07/kJYexCUpX1piX+MBfZdvulo+t1yADFVEuzFfVHfklfEx8kw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-gnu": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.3.4.tgz",
|
||||
"integrity": "sha512-gEbH9rv9o7I12qPyvZNVTyP/PWKqOp8clvnoYZQiX800KkqsaJZuOXkWgMa7ANCCh/oEN2ZQheh3yH8/kWPSEg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-musl": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.3.4.tgz",
|
||||
"integrity": "sha512-Cf8sr0ufuC/nu/yQ76AnarbSAXcwG/wj+1xFPNbyNo8ltA6kw5d5YqO8kQuwVIxk13SBdtgXrNyom3ZosHAy4A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.3.4.tgz",
|
||||
"integrity": "sha512-ay5+qADDN3rwRbRpEhTOreOn1OyJIXS60tg9WMYTWCy3fB6rGoyjLVxc4dR9PYjEdR2iDYsaF5h03NA+XuYPQQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,12 +39,12 @@
|
|||
"js-cookie": "^3.0.5",
|
||||
"lightningcss": "^1.30.1",
|
||||
"lucide-react": "^0.525.0",
|
||||
"next": "15.3.4",
|
||||
"react": "^19.0.0",
|
||||
"next": "^16.1.1",
|
||||
"react": "^19.2.3",
|
||||
"react-apexcharts": "^1.7.0",
|
||||
"react-datepicker": "^8.4.0",
|
||||
"react-day-picker": "^9.7.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-dropzone": "^14.3.8",
|
||||
"react-hook-form": "^7.65.0",
|
||||
"react-password-checklist": "^1.8.1",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
|
|
@ -30,7 +30,7 @@ export async function getListArticle(props: PaginationRequest) {
|
|||
}&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
|
||||
sort || "desc"
|
||||
}&category=${categorySlug || ""}&isBanner=${isBanner || ""}`,
|
||||
null
|
||||
null,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ export async function getArticlePagination(props: PaginationRequest) {
|
|||
sortBy || "created_at"
|
||||
}&sort=${sort || "asc"}&category=${categorySlug || ""}&isBanner=${
|
||||
isBanner || ""
|
||||
}`
|
||||
}`,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ export async function getTopArticles(props: PaginationRequest) {
|
|||
}&title=${search}&startDate=${startDate || ""}&endDate=${
|
||||
endDate || ""
|
||||
}&category=${category || ""}&sortBy=view_count&sort=desc`,
|
||||
headers
|
||||
headers,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -106,6 +106,20 @@ export async function getArticleById(id: any) {
|
|||
return await httpGet(`/articles/${id}`, headers);
|
||||
}
|
||||
|
||||
export async function getArticleFiles() {
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
return await httpGet(`/article-files`, headers);
|
||||
}
|
||||
|
||||
export async function getArticleBySlug(slug: any) {
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
return await httpGet(`/articles/slug/${slug}`, headers);
|
||||
}
|
||||
|
||||
export async function deleteArticle(id: string) {
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
|
|
@ -118,7 +132,7 @@ export async function getArticleByCategory() {
|
|||
}
|
||||
export async function getCategoryPagination(data: any) {
|
||||
return await httpGet(
|
||||
`/article-categories?limit=${data?.limit}&page=${data?.page}&title=${data?.search}`
|
||||
`/article-categories?limit=${data?.limit}&page=${data?.page}&title=${data?.search}`,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -145,7 +159,7 @@ export async function deleteArticleFiles(id: number) {
|
|||
|
||||
export async function getUserLevelDataStat(startDate: string, endDate: string) {
|
||||
return await httpGet(
|
||||
`/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}`
|
||||
`/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}`,
|
||||
);
|
||||
}
|
||||
export async function getStatisticMonthly(year: string) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import axios from "axios";
|
||||
|
||||
const baseURL = "https://dev.mikulnews.com/api";
|
||||
const baseURL = "https://wargabicara.com/api";
|
||||
|
||||
const axiosBaseInstance = axios.create({
|
||||
baseURL,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import axios from "axios";
|
|||
import { postSignIn } from "../master-user";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
const baseURL = "https://dev.mikulnews.com/api";
|
||||
const baseURL = "https://wargabicara.com/api";
|
||||
|
||||
const refreshToken = Cookies.get("refresh_token");
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ axiosInterceptorInstance.interceptors.request.use(
|
|||
},
|
||||
(error) => {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// Response interceptor
|
||||
|
|
@ -66,7 +66,7 @@ axiosInterceptorInstance.interceptors.response.use(
|
|||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export default axiosInterceptorInstance;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export async function httpGetInterceptor(pathUrl: any) {
|
|||
export async function httpPostInterceptor(
|
||||
pathUrl: any,
|
||||
data: any,
|
||||
headers?: any
|
||||
headers?: any,
|
||||
) {
|
||||
const resCsrf = await getCsrfToken();
|
||||
const csrfToken = resCsrf?.data?.csrf_token;
|
||||
|
|
@ -74,7 +74,7 @@ export async function httpPostInterceptor(
|
|||
export async function httpPutInterceptor(
|
||||
pathUrl: any,
|
||||
data: any,
|
||||
headers?: any
|
||||
headers?: any,
|
||||
) {
|
||||
const resCsrf = await getCsrfToken();
|
||||
const csrfToken = resCsrf?.data?.csrf_token;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
/* ========== CKEditor Wrapper ========== */
|
||||
.ckeditor-wrapper {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* ========== Main Editor Container ========== */
|
||||
.ckeditor-wrapper .ck.ck-editor__main {
|
||||
min-height: var(--editor-min-height, 400px);
|
||||
max-height: var(--editor-max-height, 600px);
|
||||
}
|
||||
|
||||
/* ========== Editable Content Area (ClassicEditor) ========== */
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline {
|
||||
min-height: calc(var(--editor-min-height, 400px) - 50px);
|
||||
max-height: calc(var(--editor-max-height, 600px) - 50px);
|
||||
overflow-y: auto !important;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #cbd5e1 #f1f5f9;
|
||||
background: #fff !important;
|
||||
color: #111 !important;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
padding: 1rem;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* ========== Headings and Text Formatting ========== */
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h1,
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h2,
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h3,
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h4,
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h5,
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h6 {
|
||||
margin: 1em 0 0.5em 0;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline p {
|
||||
margin: 0.5em 0 !important;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline ul,
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline ol {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline blockquote {
|
||||
margin: 1em 0;
|
||||
padding: 0.5em 1em;
|
||||
border-left: 4px solid #d1d5db;
|
||||
background-color: #f9fafb;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* ========== Dark Mode Support ========== */
|
||||
.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline {
|
||||
background: #111 !important;
|
||||
color: #f9fafb !important;
|
||||
}
|
||||
|
||||
.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h1,
|
||||
.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h2,
|
||||
.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h3,
|
||||
.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h4,
|
||||
.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h5,
|
||||
.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h6 {
|
||||
color: #f9fafb !important;
|
||||
}
|
||||
|
||||
.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline blockquote {
|
||||
background-color: #1f2937 !important;
|
||||
border-left-color: #374151 !important;
|
||||
color: #f3f4f6 !important;
|
||||
}
|
||||
|
||||
/* ========== Custom Scrollbars (Light & Dark) ========== */
|
||||
.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper
|
||||
.ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper
|
||||
.ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ckeditor-wrapper
|
||||
.ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
.dark
|
||||
.ckeditor-wrapper
|
||||
.ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-track {
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
.dark
|
||||
.ckeditor-wrapper
|
||||
.ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-thumb {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.dark
|
||||
.ckeditor-wrapper
|
||||
.ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-thumb:hover {
|
||||
background: #6b7280;
|
||||
}
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
|
|
@ -11,7 +15,7 @@
|
|||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
|
|
@ -19,9 +23,19 @@
|
|||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue