medol
/
web-kebaikan-indonesia
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: medol:3417a5f62aca24243356e4c4248d136f6abbc70f
Branches Tags
medol:main
...
compare: medol:9ca177978f8352bde6358356578ed43612cebf74
Branches Tags
medol:main

10 Commits
3417a5f62a ... 9ca177978f

Author SHA1 Message Date
Anang Yusman 9ca177978f update ckeditor 2026-02-10 15:30:05 +08:00
Anang Yusman 2cb5b79958 update landingpage 2026-02-02 11:51:18 +08:00
Anang Yusman 5280bae040 update 2026-01-06 14:17:20 +08:00
Anang Yusman 5c0fc9715e update 2026-01-06 14:05:16 +08:00
Anang Yusman 33eb88cb88 update 2026-01-06 13:35:55 +08:00
Anang Yusman 6d9eed06d2 update 2025-12-23 16:54:33 +08:00
Anang Yusman 2d2640a55d update 2025-12-18 11:39:29 +08:00
Anang Yusman 7b6ef45f28 update 2025-12-15 11:12:28 +08:00
Anang Yusman c96ecdc57f update ci 2025-12-11 14:13:12 +08:00
Anang Yusman 06ab04b26a update 2025-11-02 18:56:27 +08:00
33 changed files with 1598 additions and 612 deletions
Show Stats Expand all files Collapse all files

15
.gitlab-ci.yml
View File

@ -7,15 +7,16 @@ build-dev:
when: on_success when: on_success
only: only:
- main - main
image: docker:stable image:
name: docker:25.0.3-cli
services: services:
- name: docker:dind - name: docker:25.0.3-dind
command: ["--insecure-registry=103.82.242.92:8900"] command: ["--insecure-registry=38.47.185.86:8900"]
script: script:
- docker logout - docker logout
- docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 103.82.242.92:8900 - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 38.47.185.86:8900
- docker build -t 103.82.242.92:8900/medols/web-kebaikan-indonesia:dev . - docker build -t 38.47.185.86:8900/medols/web-kebaikan-indonesia:dev .
- docker push 103.82.242.92:8900/medols/web-kebaikan-indonesia:dev - docker push 38.47.185.86:8900/medols/web-kebaikan-indonesia:dev
auto-deploy: auto-deploy:
stage: deploy stage: deploy
@ -26,4 +27,4 @@ auto-deploy:
services: services:
- docker:dind - docker:dind
script: script:
- curl --user admin:$JENKINS_PWD http://38.47.180.165:8080/job/auto-deploy-kebaikan-indonesia/build?token=autodeploymedols - curl --user admin:$JENKINS_PWD http://38.47.185.86:8080/job/auto-deploy-kebaikan-indonesia/build?token=autodeploymedols

19
app/details/[slug]/page.tsx Normal file
View File

@ -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 Slug() {
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>
);
}

21
app/page.tsx
View File

@ -1,18 +1,25 @@
import Development from "@/components/landing-page/development";
import Footer from "@/components/landing-page/footer"; import Footer from "@/components/landing-page/footer";
import Beranda from "@/components/landing-page/headers"; import Header from "@/components/landing-page/header";
import Lifestyle from "@/components/landing-page/lifestyle"; import NewsTerkini from "@/components/landing-page/health";
import News from "@/components/landing-page/latest-news";
import Navbar from "@/components/landing-page/navbar"; import Navbar from "@/components/landing-page/navbar";
import OnTheSpot from "@/components/landing-page/on-the-spot"; import OpinionNews from "@/components/landing-page/opinion-news";
import YouTubeSection from "@/components/landing-page/youtube-selection";
export default function Home() { export default function Home() {
return ( 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)]">
{/* Background fixed tidak ikut scroll */}
<Navbar /> <Navbar />
<div className="flex-1"> <div className="flex-1">
<Beranda /> <Header />
</div> </div>
<OnTheSpot /> <News />
<Lifestyle /> <Development />
<OpinionNews />
<NewsTerkini />
<YouTubeSection />
<Footer /> <Footer />
</div> </div>
); );

87
components/details/details-content.tsx
View File

@ -2,7 +2,11 @@
import Image from "next/image"; import Image from "next/image";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Link from "next/link"; 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 { close, error, loading } from "@/config/swal";
import { useParams, usePathname } from "next/navigation"; import { useParams, usePathname } from "next/navigation";
import { CommentIcon } from "../icons/sidebar-icon"; import { CommentIcon } from "../icons/sidebar-icon";
@ -15,6 +19,8 @@ import {
} from "@/service/master-user"; } from "@/service/master-user";
import { saveActivity } from "@/service/activity-log"; import { saveActivity } from "@/service/activity-log";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { Badge } from "../ui/badge";
import { formatTextToHtmlTag } from "@/utils/global";
type TabKey = "trending" | "comments" | "latest"; type TabKey = "trending" | "comments" | "latest";
@ -24,6 +30,7 @@ type Article = {
description: string; description: string;
categoryName: string; categoryName: string;
createdAt: string; createdAt: string;
slug: string;
createdByName: string; createdByName: string;
thumbnailUrl: string; thumbnailUrl: string;
categories: { categories: {
@ -44,6 +51,7 @@ interface CategoryType {
export default function DetailContent() { export default function DetailContent() {
const params = useParams(); const params = useParams();
const id = params?.id; const id = params?.id;
const slug = params?.slug;
const pathname = usePathname(); const pathname = usePathname();
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1); const [totalPage, setTotalPage] = useState(1);
@ -63,7 +71,7 @@ export default function DetailContent() {
const [diseId, setDiseId] = useState(0); const [diseId, setDiseId] = useState(0);
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]); const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
const [selectedMainImage, setSelectedMainImage] = useState<number | null>( const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
null null,
); );
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0);
@ -214,8 +222,8 @@ export default function DetailContent() {
async function initStateData() { async function initStateData() {
loading(); loading();
const res = await getArticleById(id); const res = await getArticleBySlug(slug);
const data = res.data?.data; const data = res?.data?.data;
setThumbnail(data?.thumbnailUrl); setThumbnail(data?.thumbnailUrl);
setDiseId(data?.aiArticleId); setDiseId(data?.aiArticleId);
@ -224,6 +232,16 @@ export default function DetailContent() {
close(); close();
} }
function removeImgTags(htmlString?: { __html: string }) {
const parser = new DOMParser();
const doc = parser.parseFromString(String(htmlString?.__html), "text/html");
const images = doc.querySelectorAll("img");
images.forEach((img) => img.remove());
return { __html: doc.body.innerHTML };
}
return ( return (
<> <>
<div className="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8"> <div className="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8">
@ -234,7 +252,7 @@ export default function DetailContent() {
</h1> </h1>
<div className="flex flex-row justify-between items-center space-x-2 text-sm text-black mb-4"> <div className="flex flex-row justify-between items-center space-x-2 text-sm text-black mb-4">
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<div className="text-[#31942E]"> <div className="text-yellow-400">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
@ -254,22 +272,26 @@ export default function DetailContent() {
</svg> </svg>
</div> </div>
<span className="text-[#31942E] font-medium"> <span className="text-yellow-400 font-medium">
{articleDetail?.customCreatorName || {articleDetail?.customCreatorName ||
articleDetail?.createdByName} articleDetail?.createdByName}
</span> </span>
<span>-</span> <span>-</span>
<span> <span>
<span> {new Date(
{new Date(articleDetail?.publishedAt).toLocaleDateString( articleDetail?.publishedAt ?? articleDetail?.createdAt,
"id-ID", )
{ .toLocaleString("id-ID", {
day: "numeric", day: "numeric",
month: "long", month: "long",
year: "numeric", year: "numeric",
} hour: "2-digit",
)} minute: "2-digit",
</span> hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
</span> </span>
<span className="text-gray-500">in</span> <span className="text-gray-500">in</span>
<span>{articleDetail?.categories?.[0]?.title}</span> <span>{articleDetail?.categories?.[0]?.title}</span>
@ -357,7 +379,7 @@ export default function DetailContent() {
<Link <Link
href="#" href="#"
aria-label="WhatsApp" aria-label="WhatsApp"
className="bg-green-700 p-4 flex justify-center items-center text-white" className="bg-yellow-700 p-4 flex justify-center items-center text-white"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -433,9 +455,10 @@ export default function DetailContent() {
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
<div className="text-gray-700 leading-relaxed text-justify"> <div className="text-gray-700 leading-relaxed text-justify">
<div <div
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={removeImgTags(
__html: articleDetail?.htmlDescription || "", formatTextToHtmlTag(articleDetail?.htmlDescription),
}} )}
className="text-sm lg:text-xl lg:leading-8 text-justify space-y-4"
/> />
</div> </div>
<div className="w-full bg-white py-6"> <div className="w-full bg-white py-6">
@ -486,9 +509,17 @@ export default function DetailContent() {
</span> </span>
<div className="flex flex-wrap gap-2 mt-1"> <div className="flex flex-wrap gap-2 mt-1">
{articleDetail?.tags ? ( {articleDetail?.tags ? (
<span className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded"> articleDetail.tags
{articleDetail.tags} .split(",") // pisahkan berdasarkan koma
</span> .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> <span className="text-sm text-gray-500">Tidak ada tag</span>
)} )}
@ -544,11 +575,11 @@ export default function DetailContent() {
htmlFor="komentar" htmlFor="komentar"
className="block text-sm font-medium mb-1" className="block text-sm font-medium mb-1"
> >
Komentar <span className="text-green-600">*</span> Komentar <span className="text-yellow-600">*</span>
</label> </label>
<textarea <textarea
id="komentar" id="komentar"
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600" className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-yellow-600"
{...register("comment", { required: true })} {...register("comment", { required: true })}
/> />
</div> </div>
@ -559,7 +590,7 @@ export default function DetailContent() {
htmlFor="nama" htmlFor="nama"
className="block text-sm font-medium mb-1" className="block text-sm font-medium mb-1"
> >
Nama <span className="text-green-600">*</span> Nama <span className="text-yellow-600">*</span>
</label> </label>
<input <input
type="text" type="text"
@ -575,7 +606,7 @@ export default function DetailContent() {
htmlFor="email" htmlFor="email"
className="block text-sm font-medium mb-1" className="block text-sm font-medium mb-1"
> >
Email <span className="text-green-600">*</span> Email <span className="text-yellow-600">*</span>
</label> </label>
<input <input
type="email" type="email"
@ -587,7 +618,7 @@ export default function DetailContent() {
<button <button
type="submit" type="submit"
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full" className="bg-yellow-600 hover:bg-yellow-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
> >
KIRIM KOMENTAR KIRIM KOMENTAR
</button> </button>
@ -620,7 +651,7 @@ export default function DetailContent() {
</div> </div>
<button <button
type="submit" type="submit"
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full" className="bg-yellow-600 hover:bg-yellow-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
> >
Kirim Kirim
</button> </button>
@ -638,7 +669,7 @@ export default function DetailContent() {
<div> <div>
<Link <Link
className="flex space-x-3 mb-2" className="flex space-x-3 mb-2"
href={`/detail/${article.id}`} href={`/details/${article.slug}`}
> >
<Image <Image
src={article.thumbnailUrl || "/default-thumb.png"} src={article.thumbnailUrl || "/default-thumb.png"}
@ -661,7 +692,7 @@ export default function DetailContent() {
day: "2-digit", day: "2-digit",
month: "long", month: "long",
year: "numeric", year: "numeric",
} },
)} )}
</span> </span>
<span>💬 0</span> <span>💬 0</span>

100
components/editor/custom-editor.js
View File

@ -1,7 +1,7 @@
// components/custom-editor.js import React, { useCallback, useEffect, useRef, useState } from "react";
import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react"; import { CKEditor } from "@ckeditor/ckeditor5-react";
import "@/styles/custom-editor.css";
import Editor from "@/vendor/ckeditor5/build/ckeditor"; import Editor from "@/vendor/ckeditor5/build/ckeditor";
function CustomEditor(props) { function CustomEditor(props) {
@ -47,7 +47,7 @@ function CustomEditor(props) {
padding: 1rem; padding: 1rem;
} }
p { p {
margin: 0.5em 0; margin: 0.5em 0 !important;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: 1em 0 0.5em 0; 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> </div>
); );
} }

3
components/editor/view-editor.js
View File

@ -48,7 +48,8 @@ function ViewEditor(props) {
.ckeditor-view-wrapper { .ckeditor-view-wrapper {
border-radius: 6px; border-radius: 6px;
overflow: hidden; 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); 0 1px 2px 0 rgba(0, 0, 0, 0.06);
} }

136
components/landing-page/development.tsx Normal file
View File

@ -0,0 +1,136 @@
"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import { getListArticle } from "@/service/article";
import Link from "next/link";
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 Development() {
const [articles, setArticles] = useState<Article[]>([]);
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
useEffect(() => {
initState();
}, [page]);
async function initState() {
const req = {
limit: "10",
page,
search: "",
categorySlug: "",
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);
}
}
// Format tanggal ke gaya lokal
const formatDate = (dateString: string) => {
const date = new Date(dateString);
return date.toLocaleDateString("id-ID", {
day: "2-digit",
month: "long",
year: "numeric",
});
};
// Mapping struktur seperti dummy sebelumnya
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);
return (
<section className="max-w-7xl mx-auto px-4">
<div className="bg-white ">
<div className="mb-4">
<h2 className="text-xl font-black text-[#000]">JAGA NEGERI</h2>
<div className="w-10 h-1 bg-yellow-400 mt-1 rounded"></div>
</div>
<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-yellow-400 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>
);
}

140
components/landing-page/footer.tsx
View File

@ -1,108 +1,66 @@
// components/Footer.tsx
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-[#F5F7FC] text-gray-600 text-sm"> <footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
<div className="max-w-7xl mx-auto py-10 flex flex-col items-center"> <div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
{/* Logo */} {/* Logo */}
<div className="mb-6"> <div className="flex justify-center md:justify-end">
<Image <Image
src="/kebaikan-indonesia.png" // ganti sesuai path logo kamu src="/kebaikanindonesia-logo.png"
alt="Kebaikan Indonesia" alt="Logo"
width={200} width={230}
height={200} height={230}
className="object-contain"
/> />
</div> </div>
{/* Menu Links */} {/* Subscribe Box */}
<div className="flex flex-wrap justify-center gap-4 mb-6 text-xs text-gray-700"> <div className="flex justify-center md:justify-end">
{[ <div className=" p-8 w-full md:w-[420px]">
"About Us", <h2 className="text-2xl font-semibold text-gray-800 leading-snug">
"Cart", Subscribe us to get <br />
"Checkout", the latest news!
"Contact", </h2>
"Homepage – Fast News",
"Login/Register", <label className="block mt-6 mb-1 text-sm text-gray-600">
"My account", Email address:
"Sample Page", </label>
"Shop",
].map((item, idx) => ( <input
<Link type="email"
key={idx} placeholder="Your email address"
href="#" className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
className="hover:underline whitespace-nowrap" />
>
{item} <button className="mt-4 bg-yellow-400 hover:bg-yellow-500 text-black px-6 py-3 rounded-md font-medium">
</Link> SIGN UP
))} </button>
</div>
</div>
</div> </div>
{/* Social Icons */} <div className="flex flex-wrap justify-center gap-8 mt-16 text-gray-600 text-sm">
<div className="hidden sm:flex items-center space-x-3 text-black"> <a href="#">About Us</a>
<Link href="#" className="text-black"> <a href="#">Contact</a>
<svg <a href="#">Kode Etik Jurnalistik</a>
xmlns="http://www.w3.org/2000/svg" <a href="#">Kebijakan Privasi</a>
width="24" <a href="#">Disclaimer</a>
height="24" <a href="#">Pedoman Media Siber</a>
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-black">
<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-black">
<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-black">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none">
<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 4m0 2c-.825 0-1.674.022-2.5.056l-.978.047l-.939.055l-.882.06l-.808.063a1.8 1.8 0 0 0-1.666 1.623C4.11 9.113 4 10.618 4 12s.11 2.887.227 4.096c.085.872.777 1.55 1.666 1.623l.808.062l.882.06l.939.056l.978.047c.826.034 1.675.056 2.5.056s1.674-.022 2.5-.056l.978-.047l.939-.055l.882-.06l.808-.063a1.8 1.8 0 0 0 1.666-1.623C19.89 14.887 20 13.382 20 12s-.11-2.887-.227-4.096a1.8 1.8 0 0 0-1.666-1.623l-.808-.062l-.882-.06l-.939-.056l-.978-.047A61 61 0 0 0 12 6m-2 3.575a.6.6 0 0 1 .819-.559l.081.04l4.2 2.424a.6.6 0 0 1 .085.98l-.085.06l-4.2 2.425a.6.6 0 0 1-.894-.43l-.006-.09z"
/>
</g>
</svg>
</Link>
</div> </div>
{/* Copyright */} <div className="flex justify-center gap-8 mt-8 text-gray-700">
<p className="text-xs text-gray-500 mt-3"> <Facebook className="w-5 h-5 cursor-pointer" />
© 2025 KebaikanIndonesia - All Rights Reserved. <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 Mikul News - All Rights Reserved.
</p> </p>
</div>
</footer> </footer>
); );
} }

232
components/landing-page/header.tsx Normal file
View File

@ -0,0 +1,232 @@
"use client";
import { getListArticle } from "@/service/article";
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;
createdAt: string;
slug: string;
createdByName: string;
publishedAt: string;
customCreatorName: string;
thumbnailUrl: string;
categories: { title: string }[];
files: { fileUrl: string; file_alt: string }[];
};
export default function Header() {
const [articles, setArticles] = useState<Article[]>([]);
useEffect(() => {
const fetchArticles = async () => {
const req = {
limit: "10",
page: 1,
search: "",
categorySlug: "",
sort: "desc",
isPublish: true,
sortBy: "created_at",
};
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="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-yellow-400 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>
<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={
item.thumbnailUrl ||
item.files?.[0]?.fileUrl ||
"/placeholder.jpg"
}
alt={item.title}
fill
className="object-cover"
/>
</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-yellow-400 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>
<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>
{/* 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>
);
}

7
components/landing-page/headers-guard.tsx
View File

@ -12,6 +12,7 @@ type Article = {
description: string; description: string;
categoryName: string; categoryName: string;
createdAt: string; createdAt: string;
slug: string;
createdByName: string; createdByName: string;
thumbnailUrl: string; thumbnailUrl: string;
categories: { title: string }[]; categories: { title: string }[];
@ -111,7 +112,7 @@ export default function HeaderGuard() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{articles.map((article) => ( {articles.map((article) => (
<div key={article.id}> <div key={article.id}>
<Link href={`/detail/${article.id}`}> <Link href={`/details/${article.slug}`}>
<Image <Image
src={article.thumbnailUrl || "/default.jpg"} src={article.thumbnailUrl || "/default.jpg"}
alt={article.title} alt={article.title}
@ -137,7 +138,7 @@ export default function HeaderGuard() {
})} })}
</p> </p>
<Link <Link
href={`/detail/${article.id}`} href={`/details/${article.slug}`}
className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline" className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline"
> >
READ MORE &gt; READ MORE &gt;
@ -168,7 +169,7 @@ export default function HeaderGuard() {
<h4 className="text-xl font-bold">Recent Posts</h4> <h4 className="text-xl font-bold">Recent Posts</h4>
{recentPosts.map((post, index) => ( {recentPosts.map((post, index) => (
<div key={post.id}> <div key={post.id}>
<Link className="flex gap-3" href={`/detail/${post.id}`}> <Link className="flex gap-3" href={`/details/${post.slug}`}>
<Image <Image
src={post.thumbnailUrl || "/default.jpg"} src={post.thumbnailUrl || "/default.jpg"}
alt={post.title} alt={post.title}

7
components/landing-page/headers-latest.tsx
View File

@ -12,6 +12,7 @@ type Article = {
description: string; description: string;
categoryName: string; categoryName: string;
createdAt: string; createdAt: string;
slug: string;
createdByName: string; createdByName: string;
thumbnailUrl: string; thumbnailUrl: string;
categories: { title: string }[]; categories: { title: string }[];
@ -112,7 +113,7 @@ export default function HeaderLatest() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{articles.map((article) => ( {articles.map((article) => (
<div key={article.id}> <div key={article.id}>
<Link href={`/detail/${article.id}`}> <Link href={`/details/${article.slug}`}>
<Image <Image
src={article.thumbnailUrl || "/default.jpg"} src={article.thumbnailUrl || "/default.jpg"}
alt={article.title} alt={article.title}
@ -138,7 +139,7 @@ export default function HeaderLatest() {
})} })}
</p> </p>
<Link <Link
href={`/detail/${article.id}`} href={`/details/${article.slug}`}
className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline" className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline"
> >
READ MORE &gt; READ MORE &gt;
@ -169,7 +170,7 @@ export default function HeaderLatest() {
<h4 className="text-xl font-bold">Recent Posts</h4> <h4 className="text-xl font-bold">Recent Posts</h4>
{recentPosts.map((post, index) => ( {recentPosts.map((post, index) => (
<div key={post.id}> <div key={post.id}>
<Link className="flex gap-3" href={`/detail/${post.id}`}> <Link className="flex gap-3" href={`/details/${post.slug}`}>
<Image <Image
src={post.thumbnailUrl || "/default.jpg"} src={post.thumbnailUrl || "/default.jpg"}
alt={post.title} alt={post.title}

7
components/landing-page/headers-opinion.tsx
View File

@ -10,6 +10,7 @@ type Article = {
id: number; id: number;
title: string; title: string;
description: string; description: string;
slug: string;
categoryName: string; categoryName: string;
createdAt: string; createdAt: string;
createdByName: string; createdByName: string;
@ -111,7 +112,7 @@ export default function HeaderOpinion() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{articles.map((article) => ( {articles.map((article) => (
<div key={article.id}> <div key={article.id}>
<Link href={`/detail/${article.id}`}> <Link href={`/details/${article.slug}`}>
<Image <Image
src={article.thumbnailUrl || "/default.jpg"} src={article.thumbnailUrl || "/default.jpg"}
alt={article.title} alt={article.title}
@ -137,7 +138,7 @@ export default function HeaderOpinion() {
})} })}
</p> </p>
<Link <Link
href={`/detail/${article.id}`} href={`/details/${article.slug}`}
className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline" className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline"
> >
READ MORE &gt; READ MORE &gt;
@ -168,7 +169,7 @@ export default function HeaderOpinion() {
<h4 className="text-xl font-bold">Recent Posts</h4> <h4 className="text-xl font-bold">Recent Posts</h4>
{recentPosts.map((post, index) => ( {recentPosts.map((post, index) => (
<div key={post.id}> <div key={post.id}>
<Link className="flex gap-3" href={`/detail/${post.id}`}> <Link className="flex gap-3" href={`/details/${post.slug}`}>
<Image <Image
src={post.thumbnailUrl || "/default.jpg"} src={post.thumbnailUrl || "/default.jpg"}
alt={post.title} alt={post.title}

7
components/landing-page/headers-peace.tsx
View File

@ -11,6 +11,7 @@ type Article = {
title: string; title: string;
description: string; description: string;
categoryName: string; categoryName: string;
slug: string;
createdAt: string; createdAt: string;
createdByName: string; createdByName: string;
thumbnailUrl: string; thumbnailUrl: string;
@ -111,7 +112,7 @@ export default function HeaderPeace() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{articles.map((article) => ( {articles.map((article) => (
<div key={article.id}> <div key={article.id}>
<Link href={`/detail/${article.id}`}> <Link href={`/details/${article.slug}`}>
<Image <Image
src={article.thumbnailUrl || "/default.jpg"} src={article.thumbnailUrl || "/default.jpg"}
alt={article.title} alt={article.title}
@ -137,7 +138,7 @@ export default function HeaderPeace() {
})} })}
</p> </p>
<Link <Link
href={`/detail/${article.id}`} href={`/details/${article.slug}`}
className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline" className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline"
> >
READ MORE &gt; READ MORE &gt;
@ -168,7 +169,7 @@ export default function HeaderPeace() {
<h4 className="text-xl font-bold">Recent Posts</h4> <h4 className="text-xl font-bold">Recent Posts</h4>
{recentPosts.map((post, index) => ( {recentPosts.map((post, index) => (
<div key={post.id}> <div key={post.id}>
<Link className="flex gap-3" href={`/detail/${post.id}`}> <Link className="flex gap-3" href={`/details/${post.slug}`}>
<Image <Image
src={post.thumbnailUrl || "/default.jpg"} src={post.thumbnailUrl || "/default.jpg"}
alt={post.title} alt={post.title}

7
components/landing-page/headers-popular.tsx
View File

@ -11,6 +11,7 @@ type Article = {
title: string; title: string;
description: string; description: string;
categoryName: string; categoryName: string;
slug: string;
createdAt: string; createdAt: string;
createdByName: string; createdByName: string;
thumbnailUrl: string; thumbnailUrl: string;
@ -111,7 +112,7 @@ export default function HeaderPopular() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{articles.map((article) => ( {articles.map((article) => (
<div key={article.id}> <div key={article.id}>
<Link href={`/detail/${article.id}`}> <Link href={`/details/${article.slug}`}>
<Image <Image
src={article.thumbnailUrl || "/default.jpg"} src={article.thumbnailUrl || "/default.jpg"}
alt={article.title} alt={article.title}
@ -137,7 +138,7 @@ export default function HeaderPopular() {
})} })}
</p> </p>
<Link <Link
href={`/detail/${article.id}`} href={`/details/${article.slug}`}
className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline" className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline"
> >
READ MORE &gt; READ MORE &gt;
@ -168,7 +169,7 @@ export default function HeaderPopular() {
<h4 className="text-xl font-bold">Recent Posts</h4> <h4 className="text-xl font-bold">Recent Posts</h4>
{recentPosts.map((post, index) => ( {recentPosts.map((post, index) => (
<div key={post.id}> <div key={post.id}>
<Link className="flex gap-3" href={`/detail/${post.id}`}> <Link className="flex gap-3" href={`/details/${post.slug}`}>
<Image <Image
src={post.thumbnailUrl || "/default.jpg"} src={post.thumbnailUrl || "/default.jpg"}
alt={post.title} alt={post.title}

5
components/landing-page/headers.tsx
View File

@ -12,6 +12,7 @@ type Article = {
categoryName: string; categoryName: string;
createdAt: string; createdAt: string;
createdByName: string; createdByName: string;
slug: string;
customCreatorName: string; customCreatorName: string;
thumbnailUrl: string; thumbnailUrl: string;
categories: { categories: {
@ -68,7 +69,7 @@ export default function Beranda() {
{highlightArticles.map((item) => ( {highlightArticles.map((item) => (
<Link <Link
key={item.id} key={item.id}
href={`/detail/${item.id}`} href={`/details/${item.slug}`}
className="relative rounded-xl overflow-hidden group" className="relative rounded-xl overflow-hidden group"
> >
<Image <Image
@ -103,7 +104,7 @@ export default function Beranda() {
{otherArticles.slice(1, 3).map((item) => ( {otherArticles.slice(1, 3).map((item) => (
<Link <Link
key={item.id} key={item.id}
href={`/detail/${item.id}`} href={`/details/${item.slug}`}
className="flex gap-4 rounded-sm overflow-hidden transition" className="flex gap-4 rounded-sm overflow-hidden transition"
> >
<Image <Image

186
components/landing-page/health.tsx Normal file
View File

@ -0,0 +1,186 @@
"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
type Article = {
id: number;
title: string;
description: string;
categoryName: string;
createdAt: string;
publishedAt: string;
slug: string;
createdByName: string;
customCreatorName?: string;
thumbnailUrl?: string;
categories?: { title: string }[];
};
export default function NewsTerkini() {
const [articles, setArticles] = useState<Article[]>([]);
const [popular, setPopular] = useState<Article[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
loadData();
}, []);
async function loadData() {
setLoading(true);
try {
const res = await getListArticle({
limit: "20",
page: 1,
search: "",
isPublish: true,
sort: "desc",
sortBy: "created_at",
});
const data = res?.data?.data || [];
setArticles(data.slice(0, 5));
setPopular(data.slice(0, 5));
} catch (err) {
console.log(err);
}
setLoading(false);
}
const formatDate = (d: string) =>
new Date(d).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
});
if (loading)
return (
<p className="text-center py-10 text-gray-500">
Memuat berita terbaru...
</p>
);
return (
<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-yellow-400 mt-1 mb-4"></div>
<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-yellow-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={item.thumbnailUrl || "/placeholder.jpg"}
alt={item.title}
fill
className="object-cover"
/>
</div>
</div>
</Link>
))}
</div>
{/* LOAD MORE */}
<div className="text-center mt-4 text-yellow-400 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-yellow-400 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-yellow-400 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>
);
}

126
components/landing-page/latest-news.tsx Normal file
View File

@ -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 News() {
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 POPULER</h2>
<div className="w-10 h-1 bg-yellow-400 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-yellow-400 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>
);
}

11
components/landing-page/lifestyle.tsx
View File

@ -14,6 +14,7 @@ type Article = {
title: string; title: string;
description: string; description: string;
categoryName: string; categoryName: string;
slug: string;
createdAt: string; createdAt: string;
createdByName: string; createdByName: string;
customCreatorName: string; customCreatorName: string;
@ -111,7 +112,7 @@ export default function Lifestyle() {
{articles.slice(0, visibleCount).map((item) => ( {articles.slice(0, visibleCount).map((item) => (
<Link <Link
key={item.id} key={item.id}
href={`/detail/${item.id}`} href={`/details/${item.slug}`}
className="group block rounded-lg overflow-hidden" className="group block rounded-lg overflow-hidden"
> >
<Image <Image
@ -322,7 +323,7 @@ export default function Lifestyle() {
{articles.slice(0, visibleCount).map((item) => ( {articles.slice(0, visibleCount).map((item) => (
<Link <Link
key={item.id} key={item.id}
href={`/detail/${item.id}`} href={`/details/${item.slug}`}
className="group block rounded-lg overflow-hidden" className="group block rounded-lg overflow-hidden"
> >
<Image <Image
@ -453,7 +454,7 @@ export default function Lifestyle() {
{articles.slice(0, visibleCount).map((item) => ( {articles.slice(0, visibleCount).map((item) => (
<Link <Link
key={item.id} key={item.id}
href={`/detail/${item.id}`} href={`/details/${item.slug}`}
className="group block rounded-lg overflow-hidden" className="group block rounded-lg overflow-hidden"
> >
<Image <Image
@ -522,7 +523,7 @@ export default function Lifestyle() {
{articles.slice(0, visibleCount).map((item) => ( {articles.slice(0, visibleCount).map((item) => (
<Link <Link
key={item.id} key={item.id}
href={`/detail/${item.id}`} href={`/details/${item.slug}`}
className="flex flex-col md:flex-row gap-5 group" className="flex flex-col md:flex-row gap-5 group"
> >
<Image <Image
@ -590,7 +591,7 @@ export default function Lifestyle() {
{articles.map((post, idx) => ( {articles.map((post, idx) => (
<Link <Link
key={post.id} key={post.id}
href={`/detail/${post.id}`} href={`/details/${post.slug}`}
className="flex items-start gap-3 group" className="flex items-start gap-3 group"
> >
{/* Thumbnail */} {/* Thumbnail */}

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

@ -1,83 +1,36 @@
"use client"; "use client";
import { Menu, Search } from "lucide-react"; import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
const navItems = [ import { usePathname } from "next/navigation";
{ label: "BERANDA", href: "/", active: true },
{ label: "BERITA TERKINI", href: "/category/latest-news" },
{ label: "BERITA POPULER", href: "/category/popular-news" },
{ label: "DAMAI INDONESIAKU", href: "/category/peace-indonesia" },
{ label: "JAGA NEGERI", href: "/category/guard-the-country" },
{ label: "BERITA OPINI", href: "/category/opinion-news" },
];
export default function Navbar() { export default function Navbar() {
return ( const pathname = usePathname();
<header className="w-full border-b bg-white"> const isActive = (href: any) => {
<div className="mx-auto flex max-w-7xl items-center justify-between px-6"> return pathname === href || pathname.startsWith(href + "/");
<Link href="/" className="flex items-center"> };
<Image
src="/kebaikan-indonesia.png"
alt="Kebaikan Indonesia"
width={180}
height={40}
priority
/>
</Link>
<div className="flex items-center space-x-4"> return (
<div className="hidden sm:flex items-center space-x-3 text-black"> <div className="w-full bg-white py-4 border-b">
<Link href="#" className="text-black"> <div className="max-w-screen-xl mx-auto flex flex-col justify-between px-4">
<svg {/* Left: Logo */}
xmlns="http://www.w3.org/2000/svg" <div className="flex flex-row justify-between mb-3">
width="24" <div className="flex items-center">
height="24" <Image
viewBox="0 0 24 24" src="/kebaikanindonesia-logo.png"
> alt="Kritik Tajam Logo"
<path width={140}
fill="currentColor" height={100}
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> </div>
</Link> <div className="flex items-center gap-6">
<Link href="#" className="text-black"> {/* Social Icons */}
<div className="hidden md:flex items-center gap-5 text-black text-xl">
<Link href="#">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="18"
height="24"
viewBox="0 0 24 24"
>
<g fill="none">
<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 4m0 2c-.825 0-1.674.022-2.5.056l-.978.047l-.939.055l-.882.06l-.808.063a1.8 1.8 0 0 0-1.666 1.623C4.11 9.113 4 10.618 4 12s.11 2.887.227 4.096c.085.872.777 1.55 1.666 1.623l.808.062l.882.06l.939.056l.978.047c.826.034 1.675.056 2.5.056s1.674-.022 2.5-.056l.978-.047l.939-.055l.882-.06l.808-.063a1.8 1.8 0 0 0 1.666-1.623C19.89 14.887 20 13.382 20 12s-.11-2.887-.227-4.096a1.8 1.8 0 0 0-1.666-1.623l-.808-.062l-.882-.06l-.939-.056l-.978-.047A61 61 0 0 0 12 6m-2 3.575a.6.6 0 0 1 .819-.559l.081.04l4.2 2.424a.6.6 0 0 1 .085.98l-.085.06l-4.2 2.425a.6.6 0 0 1-.894-.43l-.006-.09z"
/>
</g>
</svg>
</Link>
<Link href="#" className="text-black">
<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-black">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<path <path
@ -86,35 +39,152 @@ export default function Navbar() {
/> />
</svg> </svg>
</Link> </Link>
</div>
<Search className="cursor-pointer hover:text-yellow-500" size={20} /> <Link href="#">
<Link href={"/auth"}> <svg
<Button className="bg-black text-white rounded-md px-5 py-2 hover:bg-yellow-500"> xmlns="http://www.w3.org/2000/svg"
Login width="18"
</Button> viewBox="0 0 24 24"
</Link>
</div>
</div>
<nav className="mx-auto flex max-w-7xl justify-between space-x-8 px-6 py-2 text-sm font-semibold">
<div className="flex gap-5">
{navItems.map((item) => (
<Link
key={item.label}
href={item.href}
className={cn(
"hover:text-yellow-500 transition-colors",
item.active ? "text-yellow-500" : "text-black"
)}
> >
{item.label} <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>
))}
</div>
<Menu className=" cursor-pointer" /> <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>
{/* 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-yellow-400 underline"
: "text-black hover:text-yellow-400"
}
>
Beranda
</Link>
<Link
href="/category/latest-news"
className={
isActive("/category/latest-news")
? "text-yellow-400 underline"
: "text-black hover:text-yellow-400"
}
>
Berita Terkini
</Link>
<Link
href="/category/popular-news"
className={
isActive("/category/popular-news")
? "text-yellow-400 underline"
: "text-black hover:text-yellow-400"
}
>
Berita Populer
</Link>
<Link
href="/category/peace-indonesia"
className={
isActive("/category/peace-indonesia")
? "text-yellow-400 underline"
: "text-black hover:text-yellow-400"
}
>
Damai Indonesiaku
</Link>
<Link
href="/category/guard-the-country"
className={
isActive("/category/guard-the-country")
? "text-yellow-400 underline"
: "text-black hover:text-yellow-400"
}
>
Jaga Negeri
</Link>
<Link
href="/category/opinion-news"
className={
isActive("/category/opinion-news")
? "text-yellow-400 underline"
: "text-black hover:text-yellow-400"
}
>
Berita Opini
</Link>
</nav> </nav>
</header>
<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-yellow-400 text-white px-5 py-2 rounded-full text-sm font-semibold">
LOGIN
</button>
</Link>
</div>
</div>
</div>
</div>
); );
} }

3
components/landing-page/on-the-spot.tsx
View File

@ -12,6 +12,7 @@ type Article = {
description: string; description: string;
categoryName: string; categoryName: string;
createdAt: string; createdAt: string;
slug: string;
createdByName: string; createdByName: string;
customCreatorName: string; customCreatorName: string;
thumbnailUrl: string; thumbnailUrl: string;
@ -114,7 +115,7 @@ export default function OnTheSpot() {
{articles.map((item) => ( {articles.map((item) => (
<Link <Link
key={item.id} key={item.id}
href={`/detail/${item.id}`} href={`/details/${item.slug}`}
className="flex gap-4 rounded-sm overflow-hidden transition" className="flex gap-4 rounded-sm overflow-hidden transition"
> >
<Image <Image

126
components/landing-page/opinion-news.tsx Normal file
View File

@ -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-yellow-400 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-yellow-400 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>
);
}

151
components/landing-page/youtube-selection.tsx Normal file
View File

@ -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>
);
}

41
components/table/article-table.tsx
View File

@ -199,11 +199,11 @@ export default function ArticleTable() {
initState(); initState();
}; };
const copyUrlArticle = async (id: number) => { const copyUrlArticle = async (slug: any) => {
const url = const url =
`${window.location.protocol}//${window.location.host}` + `${window.location.protocol}//${window.location.host}` +
"/detail/" + "/details/" +
`${id}`; `${slug}`;
try { try {
await navigator.clipboard.writeText(url); await navigator.clipboard.writeText(url);
successToast("Success", "Article Copy to Clipboard"); successToast("Success", "Article Copy to Clipboard");
@ -263,7 +263,9 @@ export default function ArticleTable() {
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-56"> <DropdownMenuContent className="w-56">
<DropdownMenuItem onClick={() => copyUrlArticle(article.id)}> <DropdownMenuItem
onClick={() => copyUrlArticle(article.slug)}
>
<CopyIcon className="mr-2 h-4 w-4" /> <CopyIcon className="mr-2 h-4 w-4" />
Copy Url Article Copy Url Article
</DropdownMenuItem> </DropdownMenuItem>
@ -314,7 +316,7 @@ export default function ArticleTable() {
return cellValue; return cellValue;
} }
}, },
[article, page] [article, page],
); );
let typingTimer: NodeJS.Timeout; let typingTimer: NodeJS.Timeout;
@ -443,8 +445,8 @@ export default function ArticleTable() {
</div> </div>
</div> </div>
<div className="w-full overflow-x-hidden"> <div className="w-full overflow-x-hidden">
<div className="w-full mx-auto overflow-x-hidden"> <div className="w-full overflow-x-auto">
<Table className="w-full table-fixed border text-sm"> <Table className="min-w-[1000px] w-full table-auto border text-sm">
<TableHeader> <TableHeader>
<TableRow> <TableRow>
{(username === "admin-mabes" {(username === "admin-mabes"
@ -453,7 +455,18 @@ export default function ArticleTable() {
).map((column) => ( ).map((column) => (
<TableHead <TableHead
key={column.uid} 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} {column.name}
</TableHead> </TableHead>
@ -470,7 +483,17 @@ export default function ArticleTable() {
).map((column) => ( ).map((column) => (
<TableCell <TableCell
key={column.uid} 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)} {renderCell(item, column.uid)}
</TableCell> </TableCell>

12
next.config.ts
View File

@ -1,13 +1,15 @@
import type { NextConfig } from "next"; /** @type {import('next').NextConfig} */
const nextConfig = {
const nextConfig: NextConfig = {
images: { images: {
domains: ["mikulnews.com", "dev.mikulnews.com"], domains: [
"mikulnews.com",
"dev.mikulnews.com",
"dev.kebaikanindonesia.com",
],
}, },
eslint: { eslint: {
ignoreDuringBuilds: true, ignoreDuringBuilds: true,
}, },
// Add experimental features for better chunk handling
experimental: { experimental: {
optimizePackageImports: ["@ckeditor/ckeditor5-react", "react-apexcharts"], optimizePackageImports: ["@ckeditor/ckeditor5-react", "react-apexcharts"],
}, },

323
package-lock.json generated
View File

@ -35,12 +35,12 @@
"framer-motion": "^12.23.12", "framer-motion": "^12.23.12",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"lucide-react": "^0.542.0", "lucide-react": "^0.542.0",
"next": "15.5.2", "next": "^16.1.1",
"react": "19.1.0", "react": "^19.2.3",
"react-apexcharts": "^1.7.0", "react-apexcharts": "^1.7.0",
"react-datepicker": "^8.7.0", "react-datepicker": "^8.7.0",
"react-day-picker": "^9.9.0", "react-day-picker": "^9.9.0",
"react-dom": "19.1.0", "react-dom": "^19.2.4",
"react-dropzone": "^14.3.8", "react-dropzone": "^14.3.8",
"react-hook-form": "^7.59.0", "react-hook-form": "^7.59.0",
"react-password-checklist": "^1.8.1", "react-password-checklist": "^1.8.1",
@ -1247,10 +1247,19 @@
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==" "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": { "node_modules/@img/sharp-win32-x64": {
"version": "0.34.3", "version": "0.34.5",
"resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.3.tgz", "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
"integrity": "sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==", "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -1319,119 +1328,14 @@
} }
}, },
"node_modules/@next/env": { "node_modules/@next/env": {
"version": "15.5.2", "version": "16.1.1",
"resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.2.tgz", "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.1.tgz",
"integrity": "sha512-Qe06ew4zt12LeO6N7j8/nULSOe3fMXE4dM6xgpBQNvdzyK1sv5y4oAP3bq4LamrvGCZtmRYnW8URFCeX5nFgGg==" "integrity": "sha512-3oxyM97Sr2PqiVyMyrZUtrtM3jqqFxOQJVuKclDsgj/L728iZt/GyslkN4NwarledZATCenbk4Offjk1hQmaAA=="
},
"node_modules/@next/swc-darwin-arm64": {
"version": "15.5.2",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.2.tgz",
"integrity": "sha512-8bGt577BXGSd4iqFygmzIfTYizHb0LGWqH+qgIF/2EDxS5JsSdERJKA8WgwDyNBZgTIIA4D8qUtoQHmxIIquoQ==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "15.5.2",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.2.tgz",
"integrity": "sha512-2DjnmR6JHK4X+dgTXt5/sOCu/7yPtqpYt8s8hLkHFK3MGkka2snTv3yRMdHvuRtJVkPwCGsvBSwmoQCHatauFQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "15.5.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.2.tgz",
"integrity": "sha512-3j7SWDBS2Wov/L9q0mFJtEvQ5miIqfO4l7d2m9Mo06ddsgUK8gWfHGgbjdFlCp2Ek7MmMQZSxpGFqcC8zGh2AA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "15.5.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.2.tgz",
"integrity": "sha512-s6N8k8dF9YGc5T01UPQ08yxsK6fUow5gG1/axWc1HVVBYQBgOjca4oUZF7s4p+kwhkB1bDSGR8QznWrFZ/Rt5g==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "15.5.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.2.tgz",
"integrity": "sha512-o1RV/KOODQh6dM6ZRJGZbc+MOAHww33Vbs5JC9Mp1gDk8cpEO+cYC/l7rweiEalkSm5/1WGa4zY7xrNwObN4+Q==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "15.5.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.2.tgz",
"integrity": "sha512-/VUnh7w8RElYZ0IV83nUcP/J4KJ6LLYliiBIri3p3aW2giF+PAVgZb6mk8jbQSB3WlTai8gEmCAr7kptFa1H6g==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "15.5.2",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.2.tgz",
"integrity": "sha512-sMPyTvRcNKXseNQ/7qRfVRLa0VhR0esmQ29DD6pqvG71+JdVnESJaHPA8t7bc67KD5spP3+DOCNLhqlEI2ZgQg==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
}, },
"node_modules/@next/swc-win32-x64-msvc": { "node_modules/@next/swc-win32-x64-msvc": {
"version": "15.5.2", "version": "16.1.1",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.2.tgz", "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.1.tgz",
"integrity": "sha512-W5VvyZHnxG/2ukhZF/9Ikdra5fdNftxI6ybeVKYvBPDtyx7x4jPPSNduUkfH5fo3zG0JQ0bPxgy41af2JX5D4Q==", "integrity": "sha512-Ncwbw2WJ57Al5OX0k4chM68DKhEPlrXBaSXDCi2kPi5f4d8b3ejr3RRJGfKBLrn2YJL5ezNS7w2TZLHSti8CMw==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -2634,6 +2538,14 @@
"url": "https://github.com/sponsors/wooorm" "url": "https://github.com/sponsors/wooorm"
} }
}, },
"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": { "node_modules/blurhash": {
"version": "2.0.5", "version": "2.0.5",
"resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz", "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz",
@ -2815,37 +2727,6 @@
"node": ">=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",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"optional": true,
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"optional": true
},
"node_modules/color-parse": { "node_modules/color-parse": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz", "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz",
@ -2862,16 +2743,6 @@
"node": ">=12.20" "node": ">=12.20"
} }
}, },
"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": { "node_modules/combined-stream": {
"version": "1.0.8", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@ -2976,9 +2847,9 @@
} }
}, },
"node_modules/detect-libc": { "node_modules/detect-libc": {
"version": "2.0.4", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==", "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
"devOptional": true, "devOptional": true,
"engines": { "engines": {
"node": ">=8" "node": ">=8"
@ -3551,12 +3422,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"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-core-module": { "node_modules/is-core-module": {
"version": "2.16.1", "version": "2.16.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
@ -4580,12 +4445,13 @@
} }
}, },
"node_modules/next": { "node_modules/next": {
"version": "15.5.2", "version": "16.1.1",
"resolved": "https://registry.npmjs.org/next/-/next-15.5.2.tgz", "resolved": "https://registry.npmjs.org/next/-/next-16.1.1.tgz",
"integrity": "sha512-H8Otr7abj1glFhbGnvUt3gz++0AF1+QoCXEBmd/6aKbfdFwrn0LpA836Ed5+00va/7HQSDD+mOoVhn3tNy3e/Q==", "integrity": "sha512-QI+T7xrxt1pF6SQ/JYFz95ro/mg/1Znk5vBebsWwbpejj1T0A23hO7GYEaVac9QUOT2BIMiuzm0L99ooq7k0/w==",
"dependencies": { "dependencies": {
"@next/env": "15.5.2", "@next/env": "16.1.1",
"@swc/helpers": "0.5.15", "@swc/helpers": "0.5.15",
"baseline-browser-mapping": "^2.8.3",
"caniuse-lite": "^1.0.30001579", "caniuse-lite": "^1.0.30001579",
"postcss": "8.4.31", "postcss": "8.4.31",
"styled-jsx": "5.1.6" "styled-jsx": "5.1.6"
@ -4594,18 +4460,18 @@
"next": "dist/bin/next" "next": "dist/bin/next"
}, },
"engines": { "engines": {
"node": "^18.18.0 || ^19.8.0 || >= 20.0.0" "node": ">=20.9.0"
}, },
"optionalDependencies": { "optionalDependencies": {
"@next/swc-darwin-arm64": "15.5.2", "@next/swc-darwin-arm64": "16.1.1",
"@next/swc-darwin-x64": "15.5.2", "@next/swc-darwin-x64": "16.1.1",
"@next/swc-linux-arm64-gnu": "15.5.2", "@next/swc-linux-arm64-gnu": "16.1.1",
"@next/swc-linux-arm64-musl": "15.5.2", "@next/swc-linux-arm64-musl": "16.1.1",
"@next/swc-linux-x64-gnu": "15.5.2", "@next/swc-linux-x64-gnu": "16.1.1",
"@next/swc-linux-x64-musl": "15.5.2", "@next/swc-linux-x64-musl": "16.1.1",
"@next/swc-win32-arm64-msvc": "15.5.2", "@next/swc-win32-arm64-msvc": "16.1.1",
"@next/swc-win32-x64-msvc": "15.5.2", "@next/swc-win32-x64-msvc": "16.1.1",
"sharp": "^0.34.3" "sharp": "^0.34.4"
}, },
"peerDependencies": { "peerDependencies": {
"@opentelemetry/api": "^1.1.0", "@opentelemetry/api": "^1.1.0",
@ -4764,9 +4630,9 @@
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
}, },
"node_modules/react": { "node_modules/react": {
"version": "19.1.0", "version": "19.2.4",
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@ -4818,14 +4684,14 @@
} }
}, },
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "19.1.0", "version": "19.2.4",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
"dependencies": { "dependencies": {
"scheduler": "^0.26.0" "scheduler": "^0.27.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^19.1.0" "react": "^19.2.4"
} }
}, },
"node_modules/react-dropzone": { "node_modules/react-dropzone": {
@ -5126,14 +4992,14 @@
} }
}, },
"node_modules/scheduler": { "node_modules/scheduler": {
"version": "0.26.0", "version": "0.27.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==" "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="
}, },
"node_modules/semver": { "node_modules/semver": {
"version": "7.7.2", "version": "7.7.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
"integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==", "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
"optional": true, "optional": true,
"bin": { "bin": {
"semver": "bin/semver.js" "semver": "bin/semver.js"
@ -5143,15 +5009,15 @@
} }
}, },
"node_modules/sharp": { "node_modules/sharp": {
"version": "0.34.3", "version": "0.34.5",
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
"integrity": "sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==", "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
"hasInstallScript": true, "hasInstallScript": true,
"optional": true, "optional": true,
"dependencies": { "dependencies": {
"color": "^4.2.3", "@img/colour": "^1.0.0",
"detect-libc": "^2.0.4", "detect-libc": "^2.1.2",
"semver": "^7.7.2" "semver": "^7.7.3"
}, },
"engines": { "engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0" "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@ -5160,37 +5026,30 @@
"url": "https://opencollective.com/libvips" "url": "https://opencollective.com/libvips"
}, },
"optionalDependencies": { "optionalDependencies": {
"@img/sharp-darwin-arm64": "0.34.3", "@img/sharp-darwin-arm64": "0.34.5",
"@img/sharp-darwin-x64": "0.34.3", "@img/sharp-darwin-x64": "0.34.5",
"@img/sharp-libvips-darwin-arm64": "1.2.0", "@img/sharp-libvips-darwin-arm64": "1.2.4",
"@img/sharp-libvips-darwin-x64": "1.2.0", "@img/sharp-libvips-darwin-x64": "1.2.4",
"@img/sharp-libvips-linux-arm": "1.2.0", "@img/sharp-libvips-linux-arm": "1.2.4",
"@img/sharp-libvips-linux-arm64": "1.2.0", "@img/sharp-libvips-linux-arm64": "1.2.4",
"@img/sharp-libvips-linux-ppc64": "1.2.0", "@img/sharp-libvips-linux-ppc64": "1.2.4",
"@img/sharp-libvips-linux-s390x": "1.2.0", "@img/sharp-libvips-linux-riscv64": "1.2.4",
"@img/sharp-libvips-linux-x64": "1.2.0", "@img/sharp-libvips-linux-s390x": "1.2.4",
"@img/sharp-libvips-linuxmusl-arm64": "1.2.0", "@img/sharp-libvips-linux-x64": "1.2.4",
"@img/sharp-libvips-linuxmusl-x64": "1.2.0", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
"@img/sharp-linux-arm": "0.34.3", "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
"@img/sharp-linux-arm64": "0.34.3", "@img/sharp-linux-arm": "0.34.5",
"@img/sharp-linux-ppc64": "0.34.3", "@img/sharp-linux-arm64": "0.34.5",
"@img/sharp-linux-s390x": "0.34.3", "@img/sharp-linux-ppc64": "0.34.5",
"@img/sharp-linux-x64": "0.34.3", "@img/sharp-linux-riscv64": "0.34.5",
"@img/sharp-linuxmusl-arm64": "0.34.3", "@img/sharp-linux-s390x": "0.34.5",
"@img/sharp-linuxmusl-x64": "0.34.3", "@img/sharp-linux-x64": "0.34.5",
"@img/sharp-wasm32": "0.34.3", "@img/sharp-linuxmusl-arm64": "0.34.5",
"@img/sharp-win32-arm64": "0.34.3", "@img/sharp-linuxmusl-x64": "0.34.5",
"@img/sharp-win32-ia32": "0.34.3", "@img/sharp-wasm32": "0.34.5",
"@img/sharp-win32-x64": "0.34.3" "@img/sharp-win32-arm64": "0.34.5",
} "@img/sharp-win32-ia32": "0.34.5",
}, "@img/sharp-win32-x64": "0.34.5"
"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": { "node_modules/source-map": {

6
package.json
View File

@ -35,12 +35,12 @@
"framer-motion": "^12.23.12", "framer-motion": "^12.23.12",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"lucide-react": "^0.542.0", "lucide-react": "^0.542.0",
"next": "15.5.2", "next": "^16.1.1",
"react": "19.1.0", "react": "^19.2.3",
"react-apexcharts": "^1.7.0", "react-apexcharts": "^1.7.0",
"react-datepicker": "^8.7.0", "react-datepicker": "^8.7.0",
"react-day-picker": "^9.9.0", "react-day-picker": "^9.9.0",
"react-dom": "19.1.0", "react-dom": "^19.2.4",
"react-dropzone": "^14.3.8", "react-dropzone": "^14.3.8",
"react-hook-form": "^7.59.0", "react-hook-form": "^7.59.0",
"react-password-checklist": "^1.8.1", "react-password-checklist": "^1.8.1",

BIN
public/kebaikanindonesia-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/yt-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

7
service/article.ts
View File

@ -106,6 +106,13 @@ export async function getArticleById(id: any) {
return await httpGet(`/articles/${id}`, headers); return await httpGet(`/articles/${id}`, 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) { export async function deleteArticle(id: string) {
const headers = { const headers = {
"content-type": "application/json", "content-type": "application/json",

2
service/http-config/axios-base-instance.ts
View File

@ -1,6 +1,6 @@
import axios from "axios"; import axios from "axios";
const baseURL = "https://dev.mikulnews.com/api"; const baseURL = "https://dev.kebaikanindonesia.com/api";
const axiosBaseInstance = axios.create({ const axiosBaseInstance = axios.create({
baseURL, baseURL,

2
service/http-config/axios-interceptor-instance.ts
View File

@ -2,7 +2,7 @@ import axios from "axios";
import { postSignIn } from "../master-user"; import { postSignIn } from "../master-user";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
const baseURL = "https://dev.mikulnews.com/api"; const baseURL = "https://dev.kebaikanindonesia.com/api";
const refreshToken = Cookies.get("refresh_token"); const refreshToken = Cookies.get("refresh_token");

121
styles/custom-editor.css Normal file
View File

@ -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;
}

24
tsconfig.json
View File

@ -1,7 +1,11 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2017", "target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"], "lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": true,
@ -11,7 +15,7 @@
"moduleResolution": "bundler", "moduleResolution": "bundler",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"jsx": "preserve", "jsx": "react-jsx",
"incremental": true, "incremental": true,
"plugins": [ "plugins": [
{ {
@ -19,9 +23,19 @@
} }
], ],
"paths": { "paths": {
"@/*": ["./*"] "@/*": [
"./*"
]
} }
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "include": [
"exclude": ["node_modules"] "next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
} }