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

Compare commits

base: medol:main
Branches Tags
medol:main
medol:dev-anang
medol:main-mirror
..
compare: medol:main-mirror
Branches Tags
medol:main
medol:dev-anang
medol:main-mirror

No commits in common. "main" and "main-mirror" have entirely different histories.
main ... main-mirro

9924 changed files with 27940 additions and 931970 deletions
Show Stats Expand all files Collapse all files

42
.drone.yml
View File

@ -1,42 +0,0 @@
kind: pipeline
type: ssh
name: mikul-news-build-deploy
server:
host:
from_secret: ssh_host
user:
from_secret: ssh_user
ssh_key:
from_secret: ssh_key
steps:
- name: prepare repo
when:
branch:
- main
commands:
- rm -rf /opt/build/web-mikul-news
- mkdir -p /opt/build
- cd /opt/build
- git clone http://38.47.180.165:3000/medol/web-mikul-news.git
- name: build image
when:
branch:
- main
commands:
- docker login 38.47.180.165:3000 -u administrator -p HarborDockerImageRep0
- cd /opt/build/web-mikul-news
- docker build -t 38.47.180.165:3000/medol/mikul-news:$DRONE_BRANCH .
- docker push 38.47.180.165:3000/medol/mikul-news:$DRONE_BRANCH
- name: deploy
when:
branch:
- main
commands:
- docker pull 38.47.180.165:3000/medol/mikul-news:$DRONE_BRANCH
- docker stop web-mikul-news || true
- docker rm web-mikul-news || true
- docker run -dt -p 4600:3000 --restart always --name web-mikul-news 38.47.180.165:3000/medol/mikul-news:$DRONE_BRANCH

15
.gitlab-ci.yml
View File

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

6
app/category/citizen-news/page.tsx
View File

@ -1,5 +1,4 @@
import Author from "@/components/landing-page/author";
import CitizenNews from "@/components/landing-page/citizen-news/citizen-news";
import HeaderCitizen from "@/components/landing-page/citizen-news/header-citizen";
import Footer from "@/components/landing-page/footer";
import Header from "@/components/landing-page/header";
@ -12,7 +11,7 @@ import Image from "next/image";
export default function Development() {
return (
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
{/* <div className="fixed top-0 left-0 w-full h-auto z-0">
<div className="fixed top-0 left-0 w-full h-auto z-0">
<Image
src="/rumput.jpg"
alt="Background"
@ -21,13 +20,12 @@ export default function Development() {
className="w-full h-auto object-cover"
priority
/>
</div> */}
</div>
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
<Navbar />
<div className="flex-1">
<HeaderCitizen />
<CitizenNews />
</div>
<Footer />
</div>

4
app/category/development/page.tsx
View File

@ -8,7 +8,7 @@ import Image from "next/image";
export default function Development() {
return (
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
{/* <div className="fixed top-0 left-0 w-full h-auto z-0">
<div className="fixed top-0 left-0 w-full h-auto z-0">
<Image
src="/rumput.jpg"
alt="Background"
@ -17,7 +17,7 @@ export default function Development() {
className="w-full h-auto object-cover"
priority
/>
</div> */}
</div>
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
<Navbar />

7
app/category/health/page.tsx
View File

@ -1,8 +1,6 @@
import Author from "@/components/landing-page/author";
import DevelopmentNews from "@/components/landing-page/development/development-news";
import Footer from "@/components/landing-page/footer";
import Header from "@/components/landing-page/header";
import HealthNews from "@/components/landing-page/health/health-news";
import HeaderHealth from "@/components/landing-page/health/header-health";
import Latest from "@/components/landing-page/latest";
import LatestandPopular from "@/components/landing-page/latest-and-popular";
@ -13,7 +11,7 @@ import Image from "next/image";
export default function Development() {
return (
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
{/* <div className="fixed top-0 left-0 w-full h-auto z-0">
<div className="fixed top-0 left-0 w-full h-auto z-0">
<Image
src="/rumput.jpg"
alt="Background"
@ -22,13 +20,12 @@ export default function Development() {
className="w-full h-auto object-cover"
priority
/>
</div> */}
</div>
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
<Navbar />
<div className="flex-1">
<HeaderHealth />
<HealthNews />
</div>
<Footer />
</div>

4
app/category/popular/page.tsx
View File

@ -6,7 +6,7 @@ import Image from "next/image";
export default function Home() {
return (
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
{/* <div className="fixed top-0 left-0 w-full h-auto z-0">
<div className="fixed top-0 left-0 w-full h-auto z-0">
<Image
src="/rumput.jpg"
alt="Background"
@ -15,7 +15,7 @@ export default function Home() {
className="w-full h-auto object-cover"
priority
/>
</div> */}
</div>
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
<Navbar />

30
app/details/[slug]/page.tsx
View File

@ -1,30 +0,0 @@
import DetailContent from "@/components/details/details-content";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/navbar";
import Image from "next/image";
export default function Home() {
return (
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
<div className="fixed top-0 left-0 w-full h-auto z-0">
<Image
src="/rumput.jpg"
alt="Background"
width={1450}
height={600}
className="w-full h-auto object-cover"
priority
/>
</div>
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
<Navbar />
<div className="flex-1">
<DetailContent />
</div>
<Footer />
</div>
</div>
);
}

41
app/page.tsx
View File

@ -1,26 +1,39 @@
import Author from "@/components/landing-page/author";
import Footer from "@/components/landing-page/footer";
import Header from "@/components/landing-page/header";
import Latest from "@/components/landing-page/latest";
import LatestandPopular from "@/components/landing-page/latest-and-popular";
import Navbar from "@/components/landing-page/navbar";
import LatestNews from "@/components/landing-page/latest-news";
import Development from "@/components/landing-page/development";
import OpinionNews from "@/components/landing-page/opinion-news";
import NewsTerkini from "@/components/landing-page/health";
import YouTubeSection from "@/components/landing-page/youtube-selection";
import News from "@/components/landing-page/news";
import { id } from "date-fns/locale";
import Image from "next/image";
export default function Home() {
return (
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
{/* Background fixed tidak ikut scroll */}
<Navbar />
<div className="flex-1">
<Header />
<div className="fixed top-0 left-0 w-full h-auto z-0">
<Image
src="/rumput.jpg"
alt="Background"
width={1450}
height={600}
className="w-full h-auto object-cover"
priority
/>
</div>
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
<Navbar />
<div className="flex-1">
<Header />
</div>
<Latest id={2} />
<News />
<Author />
<LatestandPopular />
<Footer />
</div>
<LatestNews />
<Development />
<OpinionNews />
<NewsTerkini />
<YouTubeSection />
<Footer />
</div>
);
}

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

@ -3,46 +3,25 @@ import Image from "next/image";
import Author from "../landing-page/author";
import { useEffect, useState } from "react";
import Link from "next/link";
import {
getArticleById,
getArticleBySlug,
getArticleFiles,
getListArticle,
} from "@/service/article";
import { close, error, loading } from "@/config/swal";
import { useParams, usePathname } from "next/navigation";
import { Link2, MailIcon } from "lucide-react";
import { getAdvertise } from "@/service/advertisement";
import { saveActivity } from "@/service/activity-log";
import {
getArticleComment,
otpRequest,
otpValidation,
postArticleComment,
} from "@/service/master-user";
import { useForm } from "react-hook-form";
import { Badge } from "../ui/badge";
import { map } from "zod";
import { formatTextToHtmlTag } from "@/utils/global";
import { getArticleById, getListArticle } from "@/service/article";
import { close, loading } from "@/config/swal";
import { useParams } from "next/navigation";
type TabKey = "trending" | "comments" | "latest";
type Article = {
id: number;
slug: string;
title: string;
description: string;
htmlDescription: string;
categoryName: string;
createdAt: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_url: string;
file_alt: string;
}[];
};
@ -53,20 +32,9 @@ interface CategoryType {
value: number;
}
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function DetailContent() {
const params = useParams();
const id = params?.id;
const slug = params?.slug;
const pathname = usePathname();
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
@ -79,82 +47,18 @@ export default function DetailContent() {
startDate: null,
endDate: null,
});
// const [detailfiles, setDetailFiles] = useState<any>([]);
const [detailFiles, setDetailFiles] = useState<any[]>([]);
const [detailfiles, setDetailFiles] = useState<any>([]);
const [mainImage, setMainImage] = useState(0);
const [thumbnail, setThumbnail] = useState("-");
const [diseId, setDiseId] = useState(0);
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
null,
null
);
const [selectedIndex, setSelectedIndex] = useState(0);
const [tabArticles, setTabArticles] = useState<Article[]>([]);
const [activeTab, setActiveTab] = useState<TabKey>("trending");
const [needOtp, setNeedOtp] = useState(false);
const [otpValue, setOtpValue] = useState("");
const { register, handleSubmit, reset, watch } = useForm();
const [commentList, setCommentList] = useState<any>([]);
useEffect(() => {
fetchData();
}, [id]);
const fetchData = async () => {
try {
const res = await getArticleComment(String(id));
const data = res?.data?.data;
setCommentList(data);
console.log("komen", data);
} catch (err) {
console.error("❌ Gagal memuat komentar:", err);
setCommentList([]);
}
};
const onSubmit = async (values: any) => {
if (!needOtp) {
const res = await otpRequest(values.email, values?.name);
if (res?.error) {
error(res.message);
return false;
}
setNeedOtp(true);
} else {
const validation = await otpValidation(values.email, otpValue);
if (validation?.error) {
error("OTP Tidak Sesuai");
return false;
}
const data = {
commentFromName: values.name,
commentFromEmail: values.email,
articleId: Number(id),
isPublic: false,
message: values.comment,
parentId: 0,
};
const res = await postArticleComment(data);
if (res?.error) {
error(res?.message);
return false;
}
const req: any = {
activityTypeId: 5,
url: "https://dev.mikulnews/" + pathname,
articleId: Number(id),
};
const resActivity = await saveActivity(req);
reset();
fetchData();
setNeedOtp(false);
}
};
const tabs: { id: TabKey; label: string }[] = [
{ id: "trending", label: "Trending" },
@ -162,35 +66,6 @@ export default function DetailContent() {
{ id: "latest", label: "Latest" },
];
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
useEffect(() => {
initStateAdver();
}, []);
async function initStateAdver() {
const req = {
limit: 100,
page: 1,
sort: "desc",
sortBy: "created_at",
isPublish: true,
};
try {
const res = await getAdvertise(req);
const data: Advertise[] = res?.data?.data || [1];
const banner = data.find((ad) => ad.placement === "jumbotron");
if (banner) {
setBannerAd(banner);
}
} catch (err) {
console.error("Error fetching advertisement:", err);
}
}
useEffect(() => {
fetchTabArticles();
}, [activeTab]);
@ -205,6 +80,7 @@ export default function DetailContent() {
sortBy: "created_at",
};
// Sesuaikan sortBy berdasarkan tab
if (activeTab === "trending") {
req.sortBy = "view_count";
} else if (activeTab === "comments") {
@ -213,6 +89,7 @@ export default function DetailContent() {
req.sortBy = "created_at";
}
// Hanya kirimkan search jika valid
if (search && search !== "-" && search !== "") {
req.search = search;
}
@ -303,48 +180,16 @@ export default function DetailContent() {
initStateData();
}, [listCategory]);
useEffect(() => {
setSelectedIndex(0);
}, [detailFiles]);
async function initStateData() {
loading();
try {
// 1️⃣ Ambil artikel by slug
const res = await getArticleBySlug(slug);
const data = res?.data?.data;
const res = await getArticleById(id);
const data = res.data?.data;
if (!data?.id) return;
setArticleDetail(data);
setThumbnail(data.thumbnailUrl);
setDiseId(data.aiArticleId);
// 2️⃣ Ambil SEMUA article files
const filesRes = await getArticleFiles();
const allFiles = filesRes?.data?.data ?? [];
// 3️⃣ FILTER sesuai articleId
const filteredFiles = allFiles.filter(
(file: any) => file.articleId === data.id,
);
setDetailFiles(filteredFiles);
} catch (error) {
console.error("Init state detail error:", error);
} finally {
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 };
setThumbnail(data?.thumbnailUrl);
setDiseId(data?.aiArticleId);
setDetailFiles(data?.files);
setArticleDetail(data); // <-- Add this
close();
}
return (
@ -387,69 +232,39 @@ export default function DetailContent() {
</div>
<span className="text-[#31942E] font-medium">
{articleDetail?.customCreatorName || articleDetail?.createdByName}
{articleDetail?.createdByName}
</span>
<span>•</span>
<span>
{new Date(articleDetail?.publishedAt ?? articleDetail?.createdAt)
.toLocaleString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
<span>
{new Date(articleDetail?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
}
)}
</span>
</span>
<span>•</span>
<span>{articleDetail?.categories?.[0]?.title}</span>
</div>
<div className="w-full h-auto mb-6">
{/* Gambar utama */}
{detailFiles.length > 0 ? (
<>
<Image
src={detailFiles[selectedIndex]?.fileUrl}
alt={detailFiles[selectedIndex]?.fileAlt || "Berita"}
width={800}
height={400}
className="rounded-lg w-full object-cover"
/>
<div className="flex gap-2 mt-3 overflow-x-auto">
{detailFiles.map((file, index) => (
<button
key={file.id}
onClick={() => setSelectedIndex(index)}
className={`border-2 rounded-lg ${
selectedIndex === index
? "border-red-500"
: "border-transparent"
}`}
>
<Image
src={file.fileUrl}
alt={file.fileAlt || "Thumbnail"}
width={100}
height={80}
className="object-cover"
/>
</button>
))}
</div>
</>
{articleDetail?.files?.[0]?.file_url ? (
<Image
src={articleDetail.files[0].file_url}
alt="Berita"
width={800}
height={400}
className="rounded-lg w-full object-cover"
/>
) : (
<div className="h-[400px] flex items-center justify-center bg-gray-100 rounded-lg">
<p className="text-gray-400">Gambar tidak tersedia</p>
<div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
<p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
</div>
)}
{/* Slug */}
<p className="text-sm text-gray-500 mt-2 text-end">
{articleDetail?.slug}
</p>
@ -521,75 +336,23 @@ export default function DetailContent() {
</Link>
</div>
<div className="flex-1 overflow-y-auto">
<div className="prose max-w-none text-justify">
<div
dangerouslySetInnerHTML={removeImgTags(
formatTextToHtmlTag(articleDetail?.htmlDescription),
)}
className="text-sm lg:text-xl lg:leading-8 text-justify space-y-4"
/>
</div>
<p className="text-gray-700 leading-relaxed text-justify">
<span className="text-black font-bold text-md">
Mikulnews.com -
</span>
{/* <Author /> */}
<div className="w-full bg-white py-6">
<p className="mx-10 text-2xl mb-4 ">AUTHOR</p>
<div className=" border border-black p-6 flex items-center gap-6 max-w-[1200px] mx-auto">
{/* Foto Profil */}
<div className="w-20 h-20 relative ">
<Image
src="/profile.jpg"
alt="Author"
fill
className="rounded-full object-cover"
/>
</div>
{/* Info Author */}
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-800">
{articleDetail?.customCreatorName ||
articleDetail?.createdByName}
</h3>
<div className="mt-2 flex items-center gap-4 flex-wrap">
{/* Button lihat semua post */}
<button className="text-sm font-medium text-white hover:underline bg-[#655997] py-1 px-5 rounded-xl">
Lihat Semua Pos
</button>
<div className="bg-[#655997] rounded-full p-1">
<MailIcon
size={18}
className="text-white hover:text-black cursor-pointer "
></MailIcon>
</div>
<div className="bg-[#655997] rounded-full p-1">
<Link2
size={18}
className="text-white hover:text-black cursor-pointer "
></Link2>
</div>
</div>
</div>
</div>
</div>
{articleDetail?.description}
</p>
<Author />
<div className="flex flex-row gap-2 items-center">
<span className="font-semibold text-sm text-gray-700">
Tags:
</span>
<div className="flex flex-wrap gap-2 mt-1">
{articleDetail?.tags ? (
articleDetail.tags
.split(",") // pisahkan berdasarkan koma
.map((tag: string, index: number) => (
<Badge
key={index}
variant="secondary"
className="text-sm"
>
{tag.trim()}
</Badge>
))
<span className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded">
{articleDetail.tags}
</span>
) : (
<span className="text-sm text-gray-500">Tidak ada tag</span>
)}
@ -597,16 +360,16 @@ export default function DetailContent() {
</div>
</div>
</div>
{/* <div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
<div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
<Image
src={"/image-kolom.png"}
alt="Berita Utama"
fill
className="object-contain"
/>
</div> */}
</div>
<div className="mt-10">
{/* <div className="flex items-center space-x-4 p-4 border rounded-lg mb-6">
<div className="flex items-center space-x-4 p-4 border rounded-lg mb-6">
<Image
src={"/author.png"}
alt="Author"
@ -619,128 +382,93 @@ export default function DetailContent() {
christine natalia
</p>
</div>
</div> */}
</div>
<h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
<p className="text-gray-600 mb-4 text-sm">
Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
ditandai <span className="text-green-600">*</span>
</p>
<div>
<h3 className="text-lg font-semibold border-b pb-2">Komentar</h3>
{commentList?.length === 0 ? (
<p className="text-sm text-gray-500">Belum ada komentar.</p>
) : (
commentList?.map((comment: any) => (
<div
key={comment?.id}
className="border rounded-lg p-3 bg-gray-50 shadow-sm"
>
<p className="text-sm text-gray-800 whitespace-pre-line">
{comment?.message}
</p>
<p className="text-xs text-gray-500 mt-1">
{comment?.commentFromName || "Anonim"} •{" "}
{new Date(comment?.createdAt).toLocaleString("id-ID", {
dateStyle: "short",
timeStyle: "short",
})}
</p>
</div>
))
)}
</div>
<form className="space-y-6 mt-6" onSubmit={handleSubmit(onSubmit)}>
{!needOtp ? (
<>
{/* Komentar */}
<div>
<label
htmlFor="komentar"
className="block text-sm font-medium mb-1"
>
Komentar <span className="text-green-600">*</span>
</label>
<textarea
id="komentar"
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
{...register("comment", { required: true })}
/>
</div>
{/* Nama */}
<div>
<label
htmlFor="nama"
className="block text-sm font-medium mb-1"
>
Nama <span className="text-green-600">*</span>
</label>
<input
type="text"
id="nama"
className="w-full border border-gray-300 rounded-md p-2"
{...register("name", { required: true })}
/>
</div>
<form className="space-y-6 mt-6">
<div>
<label
htmlFor="komentar"
className="block text-sm font-medium mb-1"
>
Komentar <span className="text-green-600">*</span>
</label>
<textarea
id="komentar"
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
required
/>
</div>
{/* Email */}
<div>
<label
htmlFor="email"
className="block text-sm font-medium mb-1"
>
Email <span className="text-green-600">*</span>
</label>
<input
type="email"
id="email"
className="w-full border border-gray-300 rounded-md p-2"
{...register("email", { required: true })}
/>
</div>
<div>
<label
htmlFor="nama"
className="block text-sm font-medium mb-1"
>
Nama <span className="text-green-600">*</span>
</label>
<input
type="text"
id="nama"
className="w-full border border-gray-300 rounded-md p-2"
required
/>
</div>
<button
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"
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label
htmlFor="email"
className="block text-sm font-medium mb-1"
>
KIRIM KOMENTAR
</button>
</>
) : (
<>
<p className="text-sm text-gray-600">
Kode verifikasi sudah dikirimkan. Silakan cek Email Anda!
</p>
<div>
<label className="block text-sm font-medium mb-1 mt-4">
OTP
</label>
<div className="flex gap-2 justify-center">
{[...Array(6)].map((_, i) => (
<input
key={i}
type="text"
maxLength={1}
className="w-10 h-10 text-center border border-gray-300 rounded-md text-lg"
value={otpValue[i] || ""}
onChange={(e) => {
const newValue = otpValue.split("");
newValue[i] = e.target.value.replace(/[^0-9]/g, "");
setOtpValue(newValue.join(""));
}}
/>
))}
</div>
</div>
<button
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"
Email <span className="text-green-600">*</span>
</label>
<input
type="email"
id="email"
className="w-full border border-gray-300 rounded-md p-2"
required
/>
</div>
<div>
<label
htmlFor="website"
className="block text-sm font-medium mb-1"
>
Kirim
</button>
</>
)}
Situs Web
</label>
<input
type="url"
id="website"
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
</div>
<div className="flex items-start space-x-2 mt-2">
<input type="checkbox" id="saveInfo" className="mt-1" />
<label htmlFor="saveInfo" className="text-sm text-gray-700">
Simpan nama, email, dan situs web saya pada peramban ini untuk
komentar saya berikutnya.
</label>
</div>
<p className="text-red-600 text-sm">
The reCAPTCHA verification period has expired. Please reload the
page.
</p>
<button
type="submit"
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2"
>
KIRIM KOMENTAR
</button>
</form>
</div>
</div>
@ -748,32 +476,13 @@ export default function DetailContent() {
<div className="md:col-span-1 space-y-6">
<div className="sticky top-0 space-y-6">
<div className="bg-white shadow p-4 rounded-lg">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
<Image
src={"/kolom.png"}
alt="Iklan"
width={345}
height={345}
className="rounded"
/>
<button className="mt-4 w-full bg-black text-white py-2 rounded hover:opacity-90">
Learn More
</button>

BIN
components/editor/basic-editor.js
View File

Binary file not shown.

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

@ -1,78 +1,40 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
// components/custom-editor.js
import "@/styles/custom-editor.css";
import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "@/vendor/ckeditor5/build/ckeditor";
function CustomEditor(props) {
const maxHeight = props.maxHeight || 600;
return (
<div className="ckeditor-wrapper">
<CKEditor
editor={Editor}
data={props.initialData}
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
props.onChange(data);
}}
config={{
toolbar: [
"heading",
"fontsize",
"bold",
"italic",
"link",
"numberedList",
"bulletedList",
"undo",
"redo",
"alignment",
"outdent",
"indent",
"blockQuote",
"insertTable",
"codeBlock",
"sourceEditing",
],
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #111 !important;
background: #fff !important;
margin: 0;
padding: 1rem;
}
p {
margin: 0.5em 0 !important;
}
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 0.5em 0;
color: inherit !important;
}
ul, ol {
margin: 0.5em 0;
padding-left: 2em;
}
blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 4px solid #d1d5db;
background-color: #f9fafb;
color: inherit !important;
}
`,
height: props.height || 400,
removePlugins: ["Title"],
mobile: {
theme: "silver",
},
}}
/>
</div>
<CKEditor
editor={Editor}
data={props.initialData}
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
props.onChange(data);
}}
config={{
toolbar: [
"heading",
"fontsize",
"bold",
"italic",
"link",
"numberedList",
"bulletedList",
"undo",
"redo",
"alignment",
"outdent",
"indent",
"blockQuote",
"insertTable",
"codeBlock",
"sourceEditing",
],
}}
/>
);
}

164
components/editor/editor-example.tsx
View File

@ -1,164 +0,0 @@
"use client";
import React, { useState } from 'react';
// Import the optimized editor (choose one based on your migration)
// import OptimizedEditor from './optimized-editor'; // TinyMCE
// import OptimizedCKEditor from './optimized-ckeditor'; // CKEditor5 Classic
// import MinimalEditor from './minimal-editor'; // React Quill
interface EditorExampleProps {
editorType?: 'tinymce' | 'ckeditor' | 'quill';
}
const EditorExample: React.FC<EditorExampleProps> = ({
editorType = 'tinymce'
}) => {
const [content, setContent] = useState('<p>Hello, this is the editor content!</p>');
const [savedContent, setSavedContent] = useState('');
const handleContentChange = (newContent: string) => {
setContent(newContent);
};
const handleSave = () => {
setSavedContent(content);
console.log('Content saved:', content);
};
const handleReset = () => {
setContent('<p>Content has been reset!</p>');
};
return (
<div className="p-6 max-w-4xl mx-auto">
<div className="mb-6">
<h2 className="text-2xl font-bold mb-4">Rich Text Editor Example</h2>
<p className="text-gray-600 mb-4">
This is an optimized editor with {editorType} - much smaller bundle size and better performance!
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Editor Panel */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold">Editor</h3>
<div className="flex gap-2">
<button
onClick={handleSave}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Save
</button>
<button
onClick={handleReset}
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
>
Reset
</button>
</div>
</div>
<div className="border border-gray-200 rounded-lg">
{/* Choose your editor based on migration */}
{editorType === 'tinymce' && (
<div className="p-4">
<p className="text-gray-500 text-sm mb-2">
TinyMCE Editor (200KB bundle)
</p>
{/* <OptimizedEditor
initialData={content}
onChange={handleContentChange}
height={400}
placeholder="Start typing your content..."
/> */}
<div className="h-96 bg-gray-50 border border-gray-200 rounded flex items-center justify-center">
<p className="text-gray-500">TinyMCE Editor Component</p>
</div>
</div>
)}
{editorType === 'ckeditor' && (
<div className="p-4">
<p className="text-gray-500 text-sm mb-2">
CKEditor5 Classic (800KB bundle)
</p>
{/* <OptimizedCKEditor
initialData={content}
onChange={handleContentChange}
height={400}
placeholder="Start typing your content..."
/> */}
<div className="h-96 bg-gray-50 border border-gray-200 rounded flex items-center justify-center">
<p className="text-gray-500">CKEditor5 Classic Component</p>
</div>
</div>
)}
{editorType === 'quill' && (
<div className="p-4">
<p className="text-gray-500 text-sm mb-2">
React Quill (100KB bundle)
</p>
{/* <MinimalEditor
initialData={content}
onChange={handleContentChange}
height={400}
placeholder="Start typing your content..."
/> */}
<div className="h-96 bg-gray-50 border border-gray-200 rounded flex items-center justify-center">
<p className="text-gray-500">React Quill Component</p>
</div>
</div>
)}
</div>
</div>
{/* Preview Panel */}
<div className="space-y-4">
<h3 className="text-lg font-semibold">Preview</h3>
<div className="border border-gray-200 rounded-lg p-4">
<h4 className="font-medium mb-2">Current Content:</h4>
<div
className="prose max-w-none"
dangerouslySetInnerHTML={{ __html: content }}
/>
</div>
{savedContent && (
<div className="border border-gray-200 rounded-lg p-4">
<h4 className="font-medium mb-2">Saved Content:</h4>
<div
className="prose max-w-none"
dangerouslySetInnerHTML={{ __html: savedContent }}
/>
</div>
)}
<div className="border border-gray-200 rounded-lg p-4">
<h4 className="font-medium mb-2">Raw HTML:</h4>
<pre className="text-xs bg-gray-100 p-2 rounded overflow-auto max-h-32">
{content}
</pre>
</div>
</div>
</div>
{/* Performance Info */}
<div className="mt-8 p-4 bg-blue-50 rounded-lg">
<h4 className="font-medium text-blue-900 mb-2">Performance Benefits:</h4>
<ul className="text-sm text-blue-800 space-y-1">
<li>• 90% smaller bundle size compared to custom CKEditor5</li>
<li>• Faster initial load time</li>
<li>• Better mobile performance</li>
<li>• Reduced memory usage</li>
<li>• Improved Lighthouse score</li>
</ul>
</div>
</div>
);
};
export default EditorExample;

176
components/editor/editor-test.tsx
View File

@ -1,176 +0,0 @@
"use client";
import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card } from '@/components/ui/card';
import CustomEditor from './custom-editor';
import FormEditor from './form-editor';
export default function EditorTest() {
const [testData, setTestData] = useState('Initial test content');
const [editorType, setEditorType] = useState('custom');
const { control, setValue, watch, handleSubmit } = useForm({
defaultValues: {
title: 'Test Title',
description: testData,
creatorName: 'Test Creator'
}
});
const watchedValues = watch();
const handleSetValue = () => {
const newContent = `<p>Updated content at ${new Date().toLocaleTimeString()}</p><p>This content was set via setValue</p>`;
setValue('description', newContent);
setTestData(newContent);
};
const handleSetEmpty = () => {
setValue('description', '');
setTestData('');
};
const handleSetHTML = () => {
const htmlContent = `
<h2>HTML Content Test</h2>
<p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>Updated at: ${new Date().toLocaleTimeString()}</p>
`;
setValue('description', htmlContent);
setTestData(htmlContent);
};
const onSubmit = (data: any) => {
console.log('Form submitted:', data);
alert('Form submitted! Check console for data.');
};
return (
<div className="p-6 max-w-4xl mx-auto space-y-6">
<h1 className="text-2xl font-bold">Editor Test Component</h1>
<Card className="p-4">
<div className="space-y-4">
<div>
<Label>Editor Type:</Label>
<div className="flex gap-2 mt-2">
<Button
variant={editorType === 'custom' ? 'default' : 'outline'}
onClick={() => setEditorType('custom')}
>
CustomEditor
</Button>
<Button
variant={editorType === 'form' ? 'default' : 'outline'}
onClick={() => setEditorType('form')}
>
FormEditor
</Button>
</div>
</div>
<div className="flex gap-2 flex-wrap">
<Button onClick={handleSetValue} variant="outline">
Set Value (Current Time)
</Button>
<Button onClick={handleSetEmpty} variant="outline">
Set Empty
</Button>
<Button onClick={handleSetHTML} variant="outline">
Set HTML Content
</Button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<Label>Current Test Data:</Label>
<div className="mt-2 p-2 bg-gray-100 rounded text-sm">
{testData || '(empty)'}
</div>
</div>
<div>
<Label>Watched Form Values:</Label>
<div className="mt-2 p-2 bg-gray-100 rounded text-sm">
<pre>{JSON.stringify(watchedValues, null, 2)}</pre>
</div>
</div>
</div>
</div>
</Card>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<Card className="p-4">
<div className="space-y-4">
<div>
<Label>Title:</Label>
<Controller
control={control}
name="title"
render={({ field }) => (
<Input {...field} className="mt-1" />
)}
/>
</div>
<div>
<Label>Description (Editor):</Label>
<Controller
control={control}
name="description"
render={({ field }) => (
editorType === 'custom' ? (
<CustomEditor
onChange={field.onChange}
initialData={field.value}
/>
) : (
<FormEditor
onChange={field.onChange}
initialData={field.value}
/>
)
)}
/>
</div>
<div>
<Label>Creator Name:</Label>
<Controller
control={control}
name="creatorName"
render={({ field }) => (
<Input {...field} className="mt-1" />
)}
/>
</div>
<Button type="submit" className="w-full">
Submit Form
</Button>
</div>
</Card>
</form>
<Card className="p-4">
<h3 className="font-semibold mb-2">Instructions:</h3>
<ul className="list-disc list-inside space-y-1 text-sm">
<li>Switch between CustomEditor and FormEditor to test both</li>
<li>Click "Set Value" to test setValue functionality</li>
<li>Click "Set Empty" to test empty content handling</li>
<li>Click "Set HTML Content" to test rich HTML content</li>
<li>Type in the editor to test onChange functionality</li>
<li>Submit the form to see all data</li>
</ul>
</Card>
</div>
);
}

BIN
components/editor/fixed-editor.js
View File

Binary file not shown.

102
components/editor/form-editor.js
View File

@ -1,102 +0,0 @@
import React, { useRef, useEffect, useState, useCallback } from "react";
import { Editor } from "@tinymce/tinymce-react";
function FormEditor({ onChange, initialData }) {
const editorRef = useRef(null);
const [isEditorReady, setIsEditorReady] = useState(false);
const [editorContent, setEditorContent] = useState(initialData || "");
// Handle editor initialization
const handleInit = useCallback((evt, editor) => {
editorRef.current = editor;
setIsEditorReady(true);
// Set initial content when editor is ready
if (editorContent) {
editor.setContent(editorContent);
}
// Handle content changes
editor.on('change', () => {
const content = editor.getContent();
setEditorContent(content);
if (onChange) {
onChange(content);
}
});
}, [editorContent, onChange]);
// Watch for initialData changes (from setValue)
useEffect(() => {
if (initialData !== editorContent) {
setEditorContent(initialData || "");
// Update editor content if ready
if (editorRef.current && isEditorReady) {
editorRef.current.setContent(initialData || "");
}
}
}, [initialData, editorContent, isEditorReady]);
// Handle initial data when editor becomes ready
useEffect(() => {
if (isEditorReady && editorContent && editorRef.current) {
editorRef.current.setContent(editorContent);
}
}, [isEditorReady, editorContent]);
return (
<Editor
onInit={handleInit}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
init={{
height: 400,
menubar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic forecolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | table | code | help',
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
}
.mce-content-body {
padding: 16px;
min-height: 368px;
}
`,
placeholder: 'Start typing...',
branding: false,
elementpath: false,
resize: false,
statusbar: false,
auto_focus: false,
forced_root_block: 'p',
entity_encoding: 'raw',
verify_html: false,
cleanup: false,
cleanup_on_startup: false,
auto_resize: false,
paste_as_text: false,
paste_enable_default_filters: true,
paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,h4,h5,h6',
paste_retain_style_properties: 'color background-color font-size font-weight',
mobile: {
theme: 'silver',
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
toolbar: 'bold italic | bullist numlist | link image'
}
}}
/>
);
}
export default FormEditor;

81
components/editor/minimal-editor.js
View File

@ -1,81 +0,0 @@
// components/minimal-editor.js
import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";
function MinimalEditor(props) {
const editorRef = useRef(null);
const handleInit = (evt, editor) => {
editorRef.current = editor;
// Set initial content if provided
if (props.initialData) {
editor.setContent(props.initialData);
}
// Simple onChange handler - no debouncing, no complex logic
editor.on('change', () => {
if (props.onChange) {
props.onChange(editor.getContent());
}
});
};
return (
<Editor
onInit={handleInit}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
init={{
height: 400,
menubar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic forecolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | table | code | help',
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
}
.mce-content-body {
padding: 16px;
min-height: 368px;
}
`,
placeholder: 'Start typing...',
branding: false,
elementpath: false,
resize: false,
statusbar: false,
// Minimal settings to prevent cursor jumping
auto_focus: false,
forced_root_block: 'p',
entity_encoding: 'raw',
// Disable problematic features
verify_html: false,
cleanup: false,
cleanup_on_startup: false,
auto_resize: false,
// Basic content handling
paste_as_text: false,
paste_enable_default_filters: true,
// Mobile support
mobile: {
theme: 'silver',
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
toolbar: 'bold italic | bullist numlist | link image'
}
}}
/>
);
}
export default MinimalEditor;

105
components/editor/optimized-editor.tsx
View File

@ -1,105 +0,0 @@
"use client";
import React, { useEffect, useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";
interface OptimizedEditorProps {
initialData?: string;
onChange?: (data: string) => void;
height?: number;
placeholder?: string;
disabled?: boolean;
readOnly?: any;
}
const OptimizedEditor: React.FC<OptimizedEditorProps> = ({
initialData = "",
onChange,
height = 400,
placeholder = "Start typing...",
disabled = false,
readOnly = false,
}) => {
const editorRef = useRef<any>(null);
const handleEditorChange = (content: string) => {
if (onChange) {
onChange(content);
}
};
const handleInit = (evt: any, editor: any) => {
editorRef.current = editor;
};
return (
<Editor
onInit={handleInit}
initialValue={initialData}
onEditorChange={handleEditorChange}
disabled={disabled}
init={{
height,
menubar: false,
plugins: [
"advlist",
"autolink",
"lists",
"link",
"image",
"charmap",
"preview",
"anchor",
"searchreplace",
"visualblocks",
"code",
"fullscreen",
"insertdatetime",
"media",
"table",
"code",
"help",
"wordcount",
],
toolbar:
"undo redo | blocks | " +
"bold italic forecolor | alignleft aligncenter " +
"alignright alignjustify | bullist numlist outdent indent | " +
"removeformat | table | code | help",
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
}
.mce-content-body {
padding: 16px;
min-height: ${height - 32}px;
}
`,
placeholder,
readonly: readOnly,
branding: false,
elementpath: false,
resize: false,
statusbar: false,
// Performance optimizations
cache_suffix: "?v=1.0",
browser_spellcheck: false,
gecko_spellcheck: false,
// Auto-save feature
auto_save: true,
auto_save_interval: "30s",
// Better mobile support
mobile: {
theme: "silver",
plugins: ["lists", "autolink", "link", "image", "table"],
toolbar: "bold italic | bullist numlist | link image",
},
}}
/>
);
};
export default OptimizedEditor;

136
components/editor/readonly-editor.js
View File

@ -1,136 +0,0 @@
// components/readonly-editor.js
import React, { useRef, useEffect } from "react";
import { Editor } from "@tinymce/tinymce-react";
function ReadOnlyEditor(props) {
const editorRef = useRef(null);
const handleInit = (evt, editor) => {
editorRef.current = editor;
// Set initial content if provided
if (props.initialData) {
editor.setContent(props.initialData);
}
// Disable all editing capabilities
editor.on('keydown keyup keypress input', (e) => {
e.preventDefault();
e.stopPropagation();
return false;
});
editor.on('paste', (e) => {
e.preventDefault();
e.stopPropagation();
return false;
});
editor.on('drop', (e) => {
e.preventDefault();
e.stopPropagation();
return false;
});
// Disable mouse events that might allow editing
editor.on('mousedown mousemove mouseup click dblclick', (e) => {
if (e.target.closest('.mce-content-body')) {
e.preventDefault();
e.stopPropagation();
return false;
}
});
};
// Update content when props change
useEffect(() => {
if (editorRef.current && props.initialData) {
editorRef.current.setContent(props.initialData);
}
}, [props.initialData]);
return (
<Editor
onInit={handleInit}
initialValue={props.initialData || ''}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
init={{
height: props.height || 400,
menubar: false,
toolbar: false, // No toolbar for read-only mode
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
'anchor', 'searchreplace', 'visualblocks', 'code',
'insertdatetime', 'media', 'table'
],
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.mce-content-body {
padding: 16px;
min-height: ${(props.height || 400) - 32}px;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.mce-content-body * {
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
`,
readonly: true,
branding: false,
elementpath: false,
resize: false,
statusbar: false,
// Minimal settings to prevent cursor jumping
auto_focus: false,
forced_root_block: 'p',
entity_encoding: 'raw',
// Disable problematic features
verify_html: false,
cleanup: false,
cleanup_on_startup: false,
auto_resize: false,
// Performance optimizations for read-only
cache_suffix: '?v=1.0',
browser_spellcheck: false,
gecko_spellcheck: false,
// Disable editing features
paste_as_text: true,
paste_enable_default_filters: false,
paste_word_valid_elements: false,
paste_retain_style_properties: false,
// Additional read-only settings
contextmenu: false,
selection: false,
// Disable all editing
object_resizing: false,
element_format: 'html',
// Mobile support
mobile: {
theme: 'silver',
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
toolbar: false
}
}}
/>
);
}
export default ReadOnlyEditor;

95
components/editor/simple-editor.js
View File

@ -1,95 +0,0 @@
// components/simple-editor.js
import React, { useRef, useState, useCallback } from "react";
import { Editor } from "@tinymce/tinymce-react";
function SimpleEditor(props) {
const editorRef = useRef(null);
const [editorInstance, setEditorInstance] = useState(null);
const handleInit = useCallback((evt, editor) => {
editorRef.current = editor;
setEditorInstance(editor);
// Set initial content
if (props.initialData) {
editor.setContent(props.initialData);
}
// Disable automatic content updates
editor.settings.auto_focus = false;
editor.settings.forced_root_block = 'p';
// Store the onChange callback
editor.onChangeCallback = props.onChange;
// Handle content changes without triggering re-renders
editor.on('change keyup input', (e) => {
if (editor.onChangeCallback) {
const content = editor.getContent();
editor.onChangeCallback(content);
}
});
}, [props.initialData, props.onChange]);
return (
<Editor
onInit={handleInit}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
init={{
height: 400,
menubar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic forecolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | table | code | help',
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
}
.mce-content-body {
padding: 16px;
min-height: 368px;
}
`,
placeholder: 'Start typing...',
branding: false,
elementpath: false,
resize: false,
statusbar: false,
// Critical settings to prevent cursor jumping
auto_focus: false,
forced_root_block: 'p',
entity_encoding: 'raw',
keep_styles: true,
// Disable problematic features
verify_html: false,
cleanup: false,
cleanup_on_startup: false,
auto_resize: false,
// Better content handling
paste_as_text: false,
paste_enable_default_filters: true,
paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,h4,h5,h6',
paste_retain_style_properties: 'color background-color font-size font-weight',
// Mobile support
mobile: {
theme: 'silver',
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
toolbar: 'bold italic | bullist numlist | link image'
}
}}
/>
);
}
export default SimpleEditor;

109
components/editor/simple-readonly-editor.js
View File

@ -1,109 +0,0 @@
// components/simple-readonly-editor.js
import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";
function SimpleReadOnlyEditor(props) {
const editorRef = useRef(null);
const handleInit = (evt, editor) => {
editorRef.current = editor;
// Disable all editing capabilities
editor.on('keydown keyup keypress input', (e) => {
e.preventDefault();
e.stopPropagation();
return false;
});
editor.on('paste', (e) => {
e.preventDefault();
e.stopPropagation();
return false;
});
editor.on('drop', (e) => {
e.preventDefault();
e.stopPropagation();
return false;
});
// Disable mouse events that might allow editing
editor.on('mousedown mousemove mouseup click dblclick', (e) => {
if (e.target.closest('.mce-content-body')) {
e.preventDefault();
e.stopPropagation();
return false;
}
});
};
return (
<Editor
onInit={handleInit}
initialValue={props.initialData || ''}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
init={{
height: props.height || 400,
menubar: false,
toolbar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
'anchor', 'searchreplace', 'visualblocks', 'code',
'insertdatetime', 'media', 'table'
],
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.mce-content-body {
padding: 16px;
min-height: ${(props.height || 400) - 32}px;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.mce-content-body * {
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
`,
readonly: true,
branding: false,
elementpath: false,
resize: false,
statusbar: false,
auto_focus: false,
forced_root_block: 'p',
entity_encoding: 'raw',
verify_html: false,
cleanup: false,
cleanup_on_startup: false,
auto_resize: false,
browser_spellcheck: false,
gecko_spellcheck: false,
paste_as_text: true,
paste_enable_default_filters: false,
contextmenu: false,
selection: false,
object_resizing: false,
element_format: 'html'
}}
/>
);
}
export default SimpleReadOnlyEditor;

93
components/editor/stable-editor.js
View File

@ -1,93 +0,0 @@
import React, { useRef, useEffect } from "react";
import { Editor } from "@tinymce/tinymce-react";
function StableEditor(props) {
const editorRef = useRef(null);
const onChangeRef = useRef(props.onChange);
// Update onChange ref when props change
useEffect(() => {
onChangeRef.current = props.onChange;
}, [props.onChange]);
const handleInit = (evt, editor) => {
editorRef.current = editor;
// Set initial content if provided
if (props.initialData) {
editor.setContent(props.initialData);
}
// Use a simple change handler that doesn't trigger re-renders
editor.on('change', () => {
if (onChangeRef.current) {
onChangeRef.current(editor.getContent());
}
});
};
return (
<Editor
onInit={handleInit}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
init={{
height: 400,
menubar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic forecolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | table | code | help',
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
}
.mce-content-body {
padding: 16px;
min-height: 368px;
}
`,
placeholder: 'Start typing...',
branding: false,
elementpath: false,
resize: false,
statusbar: false,
// Critical settings for stability
auto_focus: false,
forced_root_block: 'p',
entity_encoding: 'raw',
keep_styles: true,
// Disable all problematic features
verify_html: false,
cleanup: false,
cleanup_on_startup: false,
auto_resize: false,
// Content handling
paste_as_text: false,
paste_enable_default_filters: true,
paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,h4,h5,h6',
paste_retain_style_properties: 'color background-color font-size font-weight',
// Prevent automatic updates
element_format: 'html',
valid_children: '+body[style]',
extended_valid_elements: 'span[*]',
custom_elements: '~span',
// Mobile support
mobile: {
theme: 'silver',
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
toolbar: 'bold italic | bullist numlist | link image'
}
}}
/>
);
}
export default StableEditor;

93
components/editor/static-editor.js
View File

@ -1,93 +0,0 @@
import React, { useRef, useEffect } from "react";
import { Editor } from "@tinymce/tinymce-react";
function StaticEditor(props) {
const editorRef = useRef(null);
const onChangeRef = useRef(props.onChange);
// Update onChange ref when props change
useEffect(() => {
onChangeRef.current = props.onChange;
}, [props.onChange]);
const handleInit = (evt, editor) => {
editorRef.current = editor;
// Set initial content if provided
if (props.initialData) {
editor.setContent(props.initialData);
}
// Use a simple change handler that doesn't trigger re-renders
editor.on('change', () => {
if (onChangeRef.current) {
onChangeRef.current(editor.getContent());
}
});
};
return (
<Editor
onInit={handleInit}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
init={{
height: 400,
menubar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic forecolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | table | code | help',
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
}
.mce-content-body {
padding: 16px;
min-height: 368px;
}
`,
placeholder: 'Start typing...',
branding: false,
elementpath: false,
resize: false,
statusbar: false,
// Critical settings to prevent cursor jumping
auto_focus: false,
forced_root_block: 'p',
entity_encoding: 'raw',
keep_styles: true,
// Disable all problematic features
verify_html: false,
cleanup: false,
cleanup_on_startup: false,
auto_resize: false,
// Content handling
paste_as_text: false,
paste_enable_default_filters: true,
paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,h4,h5,h6',
paste_retain_style_properties: 'color background-color font-size font-weight',
// Prevent automatic updates
element_format: 'html',
valid_children: '+body[style]',
extended_valid_elements: 'span[*]',
custom_elements: '~span',
// Mobile support
mobile: {
theme: 'silver',
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
toolbar: 'bold italic | bullist numlist | link image'
}
}}
/>
);
}
export default StaticEditor;

113
components/editor/strict-readonly-editor.js
View File

@ -1,113 +0,0 @@
// components/strict-readonly-editor.js
import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";
function StrictReadOnlyEditor(props) {
const editorRef = useRef(null);
const handleInit = (evt, editor) => {
editorRef.current = editor;
// Disable all possible editing events
const disableEvents = ['keydown', 'keyup', 'keypress', 'input', 'paste', 'drop', 'cut', 'copy'];
disableEvents.forEach(eventType => {
editor.on(eventType, (e) => {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
});
// Disable mouse events that might allow editing
editor.on('mousedown mousemove mouseup click dblclick', (e) => {
if (e.target.closest('.mce-content-body')) {
e.preventDefault();
e.stopPropagation();
return false;
}
});
// Disable focus events
editor.on('focus blur', (e) => {
e.preventDefault();
e.stopPropagation();
return false;
});
};
return (
<Editor
onInit={handleInit}
initialValue={props.initialData || ''}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
init={{
height: props.height || 400,
menubar: false,
toolbar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
'anchor', 'searchreplace', 'visualblocks', 'code',
'insertdatetime', 'media', 'table'
],
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
.mce-content-body {
padding: 16px;
min-height: ${(props.height || 400) - 32}px;
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
.mce-content-body * {
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
`,
readonly: true,
branding: false,
elementpath: false,
resize: false,
statusbar: false,
auto_focus: false,
forced_root_block: 'p',
entity_encoding: 'raw',
verify_html: false,
cleanup: false,
cleanup_on_startup: false,
auto_resize: false,
browser_spellcheck: false,
gecko_spellcheck: false,
paste_as_text: true,
paste_enable_default_filters: false,
contextmenu: false,
selection: false,
object_resizing: false,
element_format: 'html',
// Additional strict settings
valid_children: false,
extended_valid_elements: false,
custom_elements: false
}}
/>
);
}
export default StrictReadOnlyEditor;

303
components/editor/tinymce-editor.tsx
View File

@ -1,303 +0,0 @@
"use client";
import React, { useRef, useState, useEffect } from "react";
import { Editor } from "@tinymce/tinymce-react";
interface TinyMCEEditorProps {
initialData?: string;
onChange?: (data: string) => void;
onReady?: (editor: any) => void;
height?: number;
placeholder?: string;
disabled?: boolean;
readOnly?: boolean;
features?: "basic" | "standard" | "full";
toolbar?: string;
language?: string;
uploadUrl?: string;
uploadHeaders?: Record<string, string>;
className?: string;
autoSave?: boolean;
autoSaveInterval?: number;
}
const TinyMCEEditor: React.FC<TinyMCEEditorProps> = ({
initialData = "",
onChange,
onReady,
height = 400,
placeholder = "Start typing...",
disabled = false,
readOnly = false,
features = "standard",
toolbar,
language = "en",
uploadUrl,
uploadHeaders,
className = "",
autoSave = true,
autoSaveInterval = 30000,
}) => {
const editorRef = useRef<any>(null);
const [isEditorLoaded, setIsEditorLoaded] = useState(false);
const [lastSaved, setLastSaved] = useState<Date | null>(null);
const [wordCount, setWordCount] = useState(0);
// Feature-based configurations
const getFeatureConfig = (featureLevel: string) => {
const configs = {
basic: {
plugins: ["lists", "link", "autolink", "wordcount"],
toolbar: "bold italic | bullist numlist | link",
menubar: false,
},
standard: {
plugins: [
"advlist",
"autolink",
"lists",
"link",
"image",
"charmap",
"preview",
"anchor",
"searchreplace",
"visualblocks",
"code",
"fullscreen",
"insertdatetime",
"media",
"table",
"help",
"wordcount",
],
toolbar:
"undo redo | blocks | " +
"bold italic forecolor | alignleft aligncenter " +
"alignright alignjustify | bullist numlist outdent indent | " +
"removeformat | table | code | help",
menubar: false,
},
full: {
plugins: [
"advlist",
"autolink",
"lists",
"link",
"image",
"charmap",
"preview",
"anchor",
"searchreplace",
"visualblocks",
"code",
"fullscreen",
"insertdatetime",
"media",
"table",
"help",
"wordcount",
"emoticons",
"paste",
"textcolor",
"colorpicker",
"hr",
"pagebreak",
"nonbreaking",
"toc",
"imagetools",
"textpattern",
"codesample",
],
toolbar:
"undo redo | formatselect | bold italic backcolor | " +
"alignleft aligncenter alignright alignjustify | " +
"bullist numlist outdent indent | removeformat | help",
menubar: "file edit view insert format tools table help",
},
};
return configs[featureLevel as keyof typeof configs] || configs.standard;
};
const handleEditorChange = (content: string) => {
if (onChange) {
onChange(content);
}
};
const handleEditorInit = (evt: any, editor: any) => {
editorRef.current = editor;
setIsEditorLoaded(true);
if (onReady) {
onReady(editor);
}
// Set up word count tracking
editor.on("keyup", () => {
const count = editor.plugins.wordcount.body.getCharacterCount();
setWordCount(count);
});
// Set up auto-save
if (autoSave && !readOnly) {
setInterval(() => {
const content = editor.getContent();
localStorage.setItem("tinymce-autosave", content);
setLastSaved(new Date());
}, autoSaveInterval);
}
// Fix cursor jumping issues
editor.on("keyup", (e: any) => {
// Prevent cursor jumping on content changes
e.stopPropagation();
});
editor.on("input", (e: any) => {
// Prevent unnecessary re-renders
e.stopPropagation();
});
// Handle paste events properly
editor.on("paste", (e: any) => {
// Allow default paste behavior
return true;
});
};
const handleImageUpload = (blobInfo: any, progress: any) => {
return new Promise((resolve, reject) => {
if (!uploadUrl) {
reject("No upload URL configured");
return;
}
const formData = new FormData();
formData.append("file", blobInfo.blob(), blobInfo.filename());
fetch(uploadUrl, {
method: "POST",
headers: uploadHeaders || {},
body: formData,
})
.then((response) => response.json())
.then((result) => {
resolve(result.url);
})
.catch((error) => {
reject(error);
});
});
};
const featureConfig = getFeatureConfig(features);
const editorConfig = {
height,
language,
placeholder,
branding: false,
elementpath: false,
resize: false,
statusbar: !readOnly,
// Performance optimizations
cache_suffix: "?v=1.0",
browser_spellcheck: false,
gecko_spellcheck: false,
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
margin: 0;
padding: 16px;
}
.mce-content-body {
min-height: ${height - 32}px;
}
.mce-content-body:focus {
outline: none;
}
`,
images_upload_handler: uploadUrl ? handleImageUpload : undefined,
automatic_uploads: !!uploadUrl,
file_picker_types: "image",
mobile: {
theme: "silver",
plugins: ["lists", "autolink", "link", "image", "table"],
toolbar: "bold italic | bullist numlist | link image",
},
paste_as_text: false,
paste_enable_default_filters: true,
paste_word_valid_elements: "b,strong,i,em,h1,h2,h3,h4,h5,h6",
paste_retain_style_properties:
"color background-color font-size font-weight",
table_default_styles: { width: "100%" },
table_default_attributes: { border: "1" },
codesample_languages: [
{ text: "HTML/XML", value: "markup" },
{ text: "JavaScript", value: "javascript" },
{ text: "CSS", value: "css" },
{ text: "PHP", value: "php" },
{ text: "Python", value: "python" },
{ text: "Java", value: "java" },
{ text: "C", value: "c" },
{ text: "C++", value: "cpp" },
],
...featureConfig,
...(toolbar && { toolbar }),
setup: (editor: any) => {
// ⬅️ Set readOnly di sini
editor.on("init", () => {
if (readOnly) {
editor.mode.set("readonly");
}
});
},
};
return (
<div className={`tinymce-editor-container ${className}`}>
<Editor
onInit={handleEditorInit}
initialValue={initialData}
onEditorChange={handleEditorChange}
disabled={disabled}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
init={editorConfig}
/>
{/* Status bar */}
{isEditorLoaded && (
<div className="text-xs text-gray-500 mt-2 flex items-center justify-between">
<div className="flex items-center space-x-4">
<span>
{autoSave && !readOnly ? "Auto-save enabled" : "Read-only mode"}
</span>
{lastSaved && autoSave && !readOnly && (
<span>• Last saved: {lastSaved.toLocaleTimeString()}</span>
)}
<span>• {wordCount} characters</span>
</div>
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
{features} mode
</span>
</div>
)}
{/* Performance indicator */}
<div className="text-xs text-gray-400 mt-1">
Bundle size:{" "}
{features === "basic"
? "~150KB"
: features === "standard"
? "~200KB"
: "~300KB"}
</div>
</div>
);
};
export default TinyMCEEditor;

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

@ -3,262 +3,17 @@ import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "@/vendor/ckeditor5/build/ckeditor";
function ViewEditor(props) {
const maxHeight = props.maxHeight || 600; // Default max height 600px
return (
<div className="ckeditor-view-wrapper">
<CKEditor
editor={Editor}
data={props.initialData}
disabled={true}
config={{
isReadOnly: true,
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #111;
background: #fff;
margin: 0;
padding: 0;
}
p {
margin: 0.5em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 0.5em 0;
}
ul, ol {
margin: 0.5em 0;
padding-left: 2em;
}
blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 4px solid #d1d5db;
background-color: #f9fafb;
}
`,
height: props.height || 400,
removePlugins: ["Title"],
}}
/>
<style jsx>{`
.ckeditor-view-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-view-wrapper :global(.ck.ck-editor__main) {
min-height: ${props.height || 400}px;
max-height: ${maxHeight}px;
}
.ckeditor-view-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-color: #fdfdfd;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #111;
}
/* 🌙 Dark mode support */
:global(.dark) .ckeditor-view-wrapper :global(.ck.ck-editor__editable) {
background-color: #111 !important;
color: #f9fafb !important;
border-color: #374151;
}
:global(.dark) .ckeditor-view-wrapper h1,
:global(.dark) .ckeditor-view-wrapper h2,
:global(.dark) .ckeditor-view-wrapper h3,
:global(.dark) .ckeditor-view-wrapper h4,
:global(.dark) .ckeditor-view-wrapper h5,
:global(.dark) .ckeditor-view-wrapper h6 {
color: #f9fafb !important;
}
:global(.dark) .ckeditor-view-wrapper blockquote {
background-color: #1f2937 !important;
border-left: 4px solid #374151 !important;
color: #f3f4f6 !important;
}
/* Custom scrollbar styling */
.ckeditor-view-wrapper
:global(.ck.ck-editor__editable::-webkit-scrollbar) {
width: 8px;
}
.ckeditor-view-wrapper
:global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
background: #f1f5f9;
border-radius: 4px;
}
.ckeditor-view-wrapper
:global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
background: #cbd5e1;
border-radius: 4px;
}
.ckeditor-view-wrapper
:global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
background: #94a3b8;
}
/* 🌙 Dark mode scrollbar */
:global(.dark)
.ckeditor-view-wrapper
:global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
background: #1f2937;
}
:global(.dark)
.ckeditor-view-wrapper
:global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
background: #4b5563;
}
:global(.dark)
.ckeditor-view-wrapper
:global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
background: #6b7280;
}
/* Read-only specific styling */
.ckeditor-view-wrapper :global(.ck.ck-editor__editable.ck-read-only) {
cursor: default;
}
/* Hide toolbar */
.ckeditor-view-wrapper :global(.ck.ck-toolbar) {
display: none !important;
}
`}</style>
</div>
<CKEditor
editor={Editor}
data={props.initialData}
disabled={true}
config={{
// toolbar: [],
isReadOnly: true,
}}
/>
);
}
export default ViewEditor;
// import React from "react";
// import { CKEditor } from "@ckeditor/ckeditor5-react";
// import Editor from "ckeditor5-custom-build";
// function ViewEditor(props) {
// const maxHeight = props.maxHeight || 600;
// return (
// <div className="ckeditor-view-wrapper">
// <CKEditor
// editor={Editor}
// data={props.initialData}
// disabled={true}
// config={{
// // toolbar: [],
// isReadOnly: true,
// // Add content styling configuration for read-only mode
// content_style: `
// body {
// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
// font-size: 14px;
// line-height: 1.6;
// color: #333;
// margin: 0;
// padding: 0;
// }
// p {
// margin: 0.5em 0;
// }
// h1, h2, h3, h4, h5, h6 {
// margin: 1em 0 0.5em 0;
// }
// ul, ol {
// margin: 0.5em 0;
// padding-left: 2em;
// }
// blockquote {
// margin: 1em 0;
// padding: 0.5em 1em;
// border-left: 4px solid #d1d5db;
// background-color: #f9fafb;
// }
// `,
// // Editor appearance settings
// height: props.height || 400,
// removePlugins: ['Title'],
// }}
// />
// <style jsx>{`
// .ckeditor-view-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-view-wrapper :global(.ck.ck-editor__main) {
// min-height: ${props.height || 400}px;
// max-height: ${maxHeight}px;
// }
// .ckeditor-view-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-color:rgb(253, 253, 253);
// border: 1px solid #d1d5db;
// border-radius: 6px;
// }
// /* Custom scrollbar styling for webkit browsers */
// .ckeditor-view-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar) {
// width: 8px;
// }
// .ckeditor-view-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
// background: #f1f5f9;
// border-radius: 4px;
// }
// .ckeditor-view-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
// background: #cbd5e1;
// border-radius: 4px;
// }
// .ckeditor-view-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
// background: #94a3b8;
// }
// /* Ensure content doesn't overflow */
// .ckeditor-view-wrapper :global(.ck.ck-editor__editable .ck-content) {
// overflow: hidden;
// }
// /* Read-only specific styling */
// .ckeditor-view-wrapper :global(.ck.ck-editor__editable.ck-read-only) {
// background-color: #f8fafc;
// color: #4b5563;
// cursor: default;
// }
// /* Hide toolbar for view-only mode */
// .ckeditor-view-wrapper :global(.ck.ck-toolbar) {
// display: none !important;
// }
// `}</style>
// </div>
// );
// }
// export default ViewEditor;

183
components/form/article/create-article-form.tsx
View File

@ -9,7 +9,7 @@ import { CloudUploadIcon, TimesIcon } from "@/components/icons";
import Image from "next/image";
import ReactSelect from "react-select";
import makeAnimated from "react-select/animated";
import { convertDateFormatNoTime, htmlToString } from "@/utils/global";
import { htmlToString } from "@/utils/global";
import { close, error, loading, successToast } from "@/config/swal";
import { useRouter } from "next/navigation";
import Link from "next/link";
@ -44,13 +44,6 @@ import GenerateSingleArticleForm from "./generate-ai-single-form";
import GenerateContentRewriteForm from "./generate-ai-content-rewrite-form";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import DatePicker from "react-datepicker";
const CustomEditor = dynamic(
() => {
@ -89,9 +82,6 @@ const createArticleSchema = z.object({
title: z.string().min(2, {
message: "Judul harus diisi",
}),
customCreatorName: z.string().min(2, {
message: "Judul harus diisi",
}),
slug: z.string().min(2, {
message: "Slug harus diisi",
}),
@ -104,7 +94,6 @@ const createArticleSchema = z.object({
tags: z.array(z.string()).nonempty({
message: "Minimal 1 tag",
}),
source: z.enum(["internal", "external"]).optional(),
});
export default function CreateArticleForm() {
@ -128,8 +117,8 @@ export default function CreateArticleForm() {
"publish"
);
const [isScheduled, setIsScheduled] = useState(false);
const [startDateValue, setStartDateValue] = useState<Date | undefined>();
const [startTimeValue, setStartTimeValue] = useState<string>("");
const [startDateValue, setStartDateValue] = useState<any>(null);
const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => {
@ -236,8 +225,6 @@ export default function CreateArticleForm() {
const request = {
id: diseData?.id,
title: values.title,
customCreatorName: values.customCreatorName,
source: values.source,
articleBody: removeImgTags(values.description),
metaDescription: diseData?.metaDescription,
metaTitle: diseData?.metaTitle,
@ -293,8 +280,6 @@ export default function CreateArticleForm() {
title: values.title,
typeId: 1,
slug: values.slug,
customCreatorName: values.customCreatorName,
source: values.source,
categoryIds: values.category.map((a) => a.id).join(","),
tags: values.tags.join(","),
description: htmlToString(removeImgTags(values.description)),
@ -339,34 +324,12 @@ export default function CreateArticleForm() {
}
}
if (status === "scheduled" && startDateValue) {
// ambil waktu, default 00:00 jika belum diisi
const [hours, minutes] = startTimeValue
? startTimeValue.split(":").map(Number)
: [0, 0];
// gabungkan tanggal + waktu
const combinedDate = new Date(startDateValue);
combinedDate.setHours(hours, minutes, 0, 0);
// format: 2025-10-08 14:30:00
const formattedDateTime = `${combinedDate.getFullYear()}-${String(
combinedDate.getMonth() + 1
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
2,
"0"
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
combinedDate.getMinutes()
).padStart(2, "0")}:00`;
if (status === "scheduled") {
const request = {
id: articleId,
date: formattedDateTime,
date: `${startDateValue?.year}-${startDateValue?.month}-${startDateValue?.day}`,
};
console.log("📤 Sending schedule request:", request);
const res = await createArticleSchedule(request);
console.log("✅ Schedule response:", res);
}
close();
@ -561,21 +524,13 @@ export default function CreateArticleForm() {
</SelectTrigger>
<SelectContent>
<SelectItem value="single">Single Article</SelectItem>
{/* <SelectItem value="rewrite">Content Rewrite</SelectItem> */}
<SelectItem value="rewrite">Content Rewrite</SelectItem>
</SelectContent>
</Select>
{selectedWritingType === "single" ? (
<GenerateSingleArticleForm
content={(data) => {
setDiseData(data);
// setValue("title", data?.title ?? "", {
// shouldValidate: true,
// shouldDirty: true,
// });
// setValue("slug", generateSlug(data?.title ?? ""), {
// shouldValidate: true,
// shouldDirty: true,
// });
setValue(
"description",
data?.articleBody ? data?.articleBody : ""
@ -696,38 +651,7 @@ export default function CreateArticleForm() {
)}
</>
)}
<p className="text-sm">Kreator</p>
<Controller
control={control}
name="customCreatorName"
render={({ field }) => (
<Input
id="customCreatorName"
type="text"
placeholder="Masukkan judul artikel"
className="w-full border rounded-lg dark:border-gray-400"
{...field}
/>
)}
/>
<div className="mt-2">
<p className="text-sm">Tipe Kreator</p>
<Controller
control={control}
name="source"
render={({ field }) => (
<Select onValueChange={field.onChange} value={field.value}>
<SelectTrigger className="w-full border rounded-lg text-sm dark:border-gray-400">
<SelectValue placeholder="Pilih tipe kreator" />
</SelectTrigger>
<SelectContent>
<SelectItem value="internal">Internal</SelectItem>
<SelectItem value="external">External</SelectItem>
</SelectContent>
</Select>
)}
/>
</div>
<p className="text-sm mt-3">Kategori</p>
<Controller
control={control}
@ -740,10 +664,7 @@ export default function CreateArticleForm() {
"!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500",
}}
classNamePrefix="select"
value={value}
onChange={(selected) => {
onChange(selected);
}}
onChange={onChange}
closeMenuOnSelect={false}
components={animatedComponents}
isClearable={true}
@ -762,7 +683,60 @@ export default function CreateArticleForm() {
)}
<p className="text-sm">Tags</p>
{/* <Controller
control={control}
name="tags"
render={({ field: { onChange, value } }) => (
<Textarea
type="text"
id="tags"
placeholder=""
label=""
value={tag}
onValueChange={setTag}
startContent={
<div className="flex flex-wrap gap-1">
{value.map((item, index) => (
<Chip
color="primary"
key={index}
className=""
onClose={() => {
const filteredTags = value.filter((tag) => tag !== item);
if (filteredTags.length === 0) {
setError("tags", {
type: "manual",
message: "Tags tidak boleh kosong",
});
} else {
clearErrors("tags");
setValue("tags", filteredTags as [string, ...string[]]);
}
}}
>
{item}
</Chip>
))}
</div>
}
onKeyDown={(e) => {
if (e.key === "Enter") {
if (tag.trim() !== "") {
setValue("tags", [...value, tag.trim()]);
setTag("");
e.preventDefault();
}
}
}}
labelPlacement="outside"
className="w-full h-fit"
classNames={{
inputWrapper: ["border-1 rounded-lg", "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400"],
}}
variant="bordered"
/>
)}
/> */}
<Controller
control={control}
name="tags"
@ -841,49 +815,32 @@ export default function CreateArticleForm() {
</label>
</div>
{isScheduled && (
<div className="flex flex-col lg:flex-row gap-3 mt-2">
{/* Pilih tanggal */}
<div className="w-full lg:w-[140px] flex flex-col gap-2">
{/* {isScheduled && (
<div className="flex flex-col lg:flex-row gap-3">
<div className="w-full lg:w-[140px] flex flex-col gal-2 ">
<p className="text-sm">Tanggal</p>
<Popover>
<PopoverTrigger>
<Button
type="button"
className="w-full !h-[37px] lg:h-[37px] border-1 rounded-lg text-black"
className="w-full !h-[30px] lg:h-[40px] border-1 rounded-lg text-black"
variant="outline"
>
{startDateValue
? startDateValue.toLocaleDateString("en-CA")
? convertDateFormatNoTime(startDateValue)
: "-"}
</Button>
</PopoverTrigger>
<PopoverContent className="bg-transparent p-0">
<DatePicker
<Calendar
selected={startDateValue}
onChange={(date) =>
setStartDateValue(date ?? undefined)
}
dateFormat="yyyy-MM-dd"
className="w-full border rounded-lg px-2 py-1 text-black cursor-pointer h-[150px]"
placeholderText="Pilih tanggal"
onSelect={setStartDateValue}
/>
</PopoverContent>
</Popover>
</div>
{/* Pilih waktu */}
<div className="w-full lg:w-[140px] flex flex-col gap-2">
<p className="text-sm">Waktu</p>
<input
type="time"
value={startTimeValue}
onChange={(e) => setStartTimeValue(e.target.value)}
className="w-full border rounded-lg px-2 py-[6px] text-black"
/>
</div>
</div>
)}
)} */}
</div>
</div>

398
components/form/article/edit-article-form.tsx
View File

@ -19,13 +19,10 @@ import GetSeoScore from "./get-seo-score-form";
import Link from "next/link";
import Cookies from "js-cookie";
import {
createArticleSchedule,
deleteArticleFiles,
getArticleByCategory,
getArticleById,
getArticleFiles,
submitApproval,
unPublishArticle,
updateArticle,
uploadArticleFile,
uploadArticleThumbnail,
@ -51,15 +48,6 @@ import {
DialogTitle,
DialogClose,
} from "@/components/ui/dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import DatePicker from "react-datepicker";
import { Switch } from "@/components/ui/switch";
const ViewEditor = dynamic(
() => {
@ -93,9 +81,6 @@ const createArticleSchema = z.object({
title: z.string().min(2, {
message: "Judul harus diisi",
}),
customCreatorName: z.string().min(2, {
message: "Judul harus diisi",
}),
slug: z.string().min(2, {
message: "Slug harus diisi",
}),
@ -107,8 +92,7 @@ const createArticleSchema = z.object({
}),
tags: z.array(z.string()).nonempty({
message: "Minimal 1 tag",
}),
source: z.enum(["internal", "external"]).optional(),
}), // Array berisi string
});
interface DiseData {
@ -152,14 +136,8 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
const [approvalStatus, setApprovalStatus] = useState<number>(2);
const [approvalMessage, setApprovalMessage] = useState("");
const [detailData, setDetailData] = useState<any>();
// const [startDateValue, setStartDateValue] = useState<any>(null);
// const [timeValue, setTimeValue] = useState("00:00");
const [status, setStatus] = useState<"publish" | "draft" | "scheduled">(
"publish"
);
const [isScheduled, setIsScheduled] = useState(false);
const [startDateValue, setStartDateValue] = useState<Date | undefined>();
const [startTimeValue, setStartTimeValue] = useState<string>("");
const [startDateValue, setStartDateValue] = useState<any>(null);
const [timeValue, setTimeValue] = useState("00:00");
const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => {
@ -197,49 +175,19 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
async function initState() {
loading();
try {
// 1️⃣ Ambil ARTICLE
const articleRes = await getArticleById(id);
const articleData = articleRes.data?.data;
const res = await getArticleById(id);
const data = res.data?.data;
setDetailData(data);
setValue("title", data?.title);
setValue("slug", data?.slug);
setValue("description", data?.htmlDescription);
setValue("tags", data?.tags ? data.tags.split(",") : []);
setThumbnail(data?.thumbnailUrl);
setDiseId(data?.aiArticleId);
setDetailFiles(data?.files);
if (!articleData) return;
// ===== ARTICLE DATA =====
setDetailData(articleData);
setValue("title", articleData.title);
setValue("customCreatorName", articleData.customCreatorName);
setValue("slug", articleData.slug);
setValue("source", articleData.source);
const cleanDescription = articleData.htmlDescription
? articleData.htmlDescription
.replace(/\\"/g, '"')
.replace(/\\n/g, "\n")
.trim()
: "";
setValue("description", cleanDescription);
setValue("tags", articleData.tags ? articleData.tags.split(",") : []);
setThumbnail(articleData.thumbnailUrl);
setDiseId(articleData.aiArticleId);
setupInitCategory(articleData.categories);
// 2️⃣ Ambil SEMUA article files
const filesRes = await getArticleFiles();
const allFiles = filesRes.data?.data ?? [];
// 3️⃣ FILTER berdasarkan ARTICLE ID yang sedang dibuka
const filteredFiles = allFiles.filter(
(file: any) => file.articleId === articleData.id
);
setDetailFiles(filteredFiles);
} catch (error) {
console.error("Init state error:", error);
} finally {
close();
}
setupInitCategory(data?.categories);
close();
}
const setupInitCategory = (data: any) => {
@ -294,28 +242,21 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
const doPublish = async () => {
MySwal.fire({
title: isScheduled ? "Jadwalkan Publikasi?" : "Publish Artikel Sekarang?",
text: isScheduled
? "Artikel akan dipublish otomatis sesuai tanggal dan waktu yang kamu pilih."
: "",
title: "Publish Artikel?",
text: "",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonColor: "#3085d6",
confirmButtonText: isScheduled ? "Jadwalkan" : "Publish",
confirmButtonText: "Submit",
}).then((result) => {
if (result.isConfirmed) {
if (isScheduled) {
setStatus("scheduled");
publishScheduled();
} else {
publishNow();
}
publish();
}
});
};
const publishNow = async () => {
const publish = async () => {
const response = await updateArticle(String(id), {
id: Number(id),
isPublish: true,
@ -332,67 +273,8 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
if (response?.error) {
error(response.message);
return;
return false;
}
successSubmit("/admin/article");
};
const publishScheduled = async () => {
if (!startDateValue) {
error("Tanggal belum dipilih!");
return;
}
const [hours, minutes] = startTimeValue
? startTimeValue.split(":").map(Number)
: [0, 0];
const combinedDate = new Date(startDateValue);
combinedDate.setHours(hours, minutes, 0, 0);
const formattedDateTime = `${combinedDate.getFullYear()}-${String(
combinedDate.getMonth() + 1
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
2,
"0"
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
combinedDate.getMinutes()
).padStart(2, "0")}:00`;
const response = await updateArticle(String(id), {
id: Number(id),
isPublish: false,
title: detailData?.title,
typeId: 1,
slug: detailData?.slug,
categoryIds: getValues("category")
.map((val) => val.id)
.join(","),
tags: getValues("tags").join(","),
description: htmlToString(getValues("description")),
htmlDescription: getValues("description"),
});
if (response?.error) {
error(response.message);
return;
}
const articleId = response?.data?.data?.id ?? id;
const scheduleReq = {
id: articleId,
date: formattedDateTime,
};
console.log("📅 Mengirim jadwal publish:", scheduleReq);
const res = await createArticleSchedule(scheduleReq);
if (res?.error) {
error("Gagal membuat jadwal publikasi.");
return;
}
successSubmit("/admin/article");
};
@ -410,16 +292,16 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
// createdAt: `${startDateValue} ${timeValue}:00`,
};
// if (startDateValue && timeValue) {
// formData.createdAt = `${startDateValue} ${timeValue}:00`;
// }
if (startDateValue && timeValue) {
formData.createdAt = `${startDateValue} ${timeValue}:00`;
}
const response = await updateArticle(String(id), formData);
if (response?.error) {
error(response.message);
return false;
}
const articleId = response?.data?.data?.id;
const formFiles = new FormData();
if (files?.length > 0) {
@ -436,38 +318,8 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
const resFile = await uploadArticleThumbnail(String(id), formFiles);
}
if (status === "scheduled" && startDateValue) {
// ambil waktu, default 00:00 jika belum diisi
const [hours, minutes] = startTimeValue
? startTimeValue.split(":").map(Number)
: [0, 0];
// gabungkan tanggal + waktu
const combinedDate = new Date(startDateValue);
combinedDate.setHours(hours, minutes, 0, 0);
// format: 2025-10-08 14:30:00
const formattedDateTime = `${combinedDate.getFullYear()}-${String(
combinedDate.getMonth() + 1
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
2,
"0"
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
combinedDate.getMinutes()
).padStart(2, "0")}:00`;
const request = {
id: articleId,
date: formattedDateTime,
};
console.log("📤 Sending schedule request:", request);
const res = await createArticleSchedule(request);
console.log("✅ Schedule response:", res);
}
close();
successSubmitData();
successSubmit("/admin/article");
};
function successSubmit(redirect: string) {
@ -483,51 +335,6 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
});
}
function successSubmitData() {
MySwal.fire({
title: "Berhasil disimpan!",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
});
}
const doUnpublish = async () => {
MySwal.fire({
title: "Unpublish Artikel?",
text: "Artikel akan dihapus dari publik dan tidak tampil lagi.",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonColor: "#3085d6",
confirmButtonText: "Ya, Unpublish",
}).then(async (result) => {
if (result.isConfirmed) {
loading();
const response = await unPublishArticle(String(id), {
id: Number(id),
isPublish: false,
title: detailData?.title,
typeId: 1,
slug: detailData?.slug,
categoryIds: getValues("category")
.map((val) => val.id)
.join(","),
tags: getValues("tags").join(","),
description: htmlToString(getValues("description")),
htmlDescription: getValues("description"),
});
if (response?.error) {
error(response.message);
return;
}
successSubmit("/admin/article");
}
});
};
const watchTitle = watch("title");
const generateSlug = (title: string) => {
return title
@ -690,10 +497,9 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
name="title"
render={({ field: { onChange, value } }) => (
<div className="w-full">
<label htmlFor="title" className="block text-xl font-medium mb-2">
<label htmlFor="title" className="block text-sm font-medium mb-1">
Judul
</label>
<Input
type="text"
id="title"
@ -701,7 +507,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
value={value ?? ""}
readOnly={isDetail}
onChange={onChange}
className="h-16 px-4 text-2xl leading-tight"
className="w-full border rounded-lg"
/>
</div>
)}
@ -743,7 +549,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
)}
<p className="text-sm mt-3">Deskripsi</p>
{/* <Controller
<Controller
control={control}
name="description"
render={({ field: { onChange, value } }) =>
@ -766,17 +572,8 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
<p className="text-red-400 text-sm mb-3">
{errors.description?.message}
</p>
)} */}
<Controller
control={control}
name="description"
render={({ field }) => (
<CustomEditor onChange={field.onChange} initialData={field.value} />
)}
/>
{errors.description?.message && (
<p className="text-red-400 text-sm">{errors.description.message}</p>
)}
<p className="text-sm mt-3">File Media</p>
{!isDetail && (
<Fragment>
@ -817,7 +614,9 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
alt="main"
width={720}
height={480}
src={detailfiles[mainImage]?.fileUrl || "/default-avatar.png"}
src={
detailfiles[mainImage]?.file_url || "/default-avatar.png"
}
className="w-[75%] mx-auto"
/>
</div>
@ -832,7 +631,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
width={480}
height={360}
alt={`image-${index}`}
src={file.fileUrl || "/default-avatar.png"}
src={file.file_url || "/default-avatar.png"}
className="h-[100px] object-cover w-[150px]"
/>
</a>
@ -855,7 +654,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
width={480}
height={360}
alt={`image-${index}`}
src={file?.fileUrl || "/default-avatar.png"}
src={file?.file_url || "/default-avatar.png"}
className="h-[100px] object-cover w-[150px]"
/>
</div>
@ -875,7 +674,6 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
</div>
<Button
type="button"
className=" border-none rounded-full"
variant="outline"
color="danger"
@ -977,43 +775,6 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
)}
</>
)}
<p className="text-sm">Kreator</p>
<Controller
control={control}
name="customCreatorName"
render={({ field }) => (
<Input
id="customCreatorName"
type="text"
placeholder="Masukkan Kreator artikel"
readOnly={isDetail}
className="w-full border rounded-lg dark:border-gray-400"
{...field}
/>
)}
/>
<div className="mt-2">
<p className="text-sm">Tipe Kreator</p>
<Controller
control={control}
name="source"
render={({ field }) => (
<Select
onValueChange={field.onChange}
value={field.value}
disabled={isDetail}
>
<SelectTrigger className="w-full border rounded-lg text-sm dark:border-gray-400">
<SelectValue placeholder="Pilih tipe kreator" />
</SelectTrigger>
<SelectContent>
<SelectItem value="internal">Internal</SelectItem>
<SelectItem value="external">External</SelectItem>
</SelectContent>
</Select>
)}
/>
</div>
<p className="text-sm mt-3">Kategori</p>
<Controller
control={control}
@ -1115,63 +876,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
{errors?.tags && (
<p className="text-red-400 text-sm mb-3">{errors.tags?.message}</p>
)}
<div className="flex flex-col gap-2 mt-3">
<div className="flex items-center space-x-2">
<Switch
id="schedule-switch"
checked={isScheduled}
onCheckedChange={setIsScheduled}
/>
<label htmlFor="schedule-switch" className="text-black text-sm">
Publish dengan Jadwal
</label>
</div>
{isScheduled && (
<div className="flex flex-col lg:flex-row gap-3 mt-2">
{/* Pilih tanggal */}
<div className="w-full lg:w-[140px] flex flex-col gap-2">
<p className="text-sm">Tanggal</p>
<Popover>
<PopoverTrigger>
<Button
type="button"
className="w-full !h-[37px] lg:h-[37px] border-1 rounded-lg text-black"
variant="outline"
>
{startDateValue
? startDateValue.toLocaleDateString("en-CA")
: "-"}
</Button>
</PopoverTrigger>
<PopoverContent className="bg-transparent p-0">
<DatePicker
selected={startDateValue}
onChange={(date) =>
setStartDateValue(date ?? undefined)
}
dateFormat="yyyy-MM-dd"
className="w-full border rounded-lg px-2 py-1 text-black cursor-pointer h-[150px]"
placeholderText="Pilih tanggal"
/>
</PopoverContent>
</Popover>
</div>
{/* Pilih waktu */}
<div className="w-full lg:w-[140px] flex flex-col gap-2">
<p className="text-sm">Waktu</p>
<input
type="time"
value={startTimeValue}
onChange={(e) => setStartTimeValue(e.target.value)}
className="w-full border rounded-lg px-2 py-[6px] text-black"
/>
</div>
</div>
)}
</div>
{/* {!isDetail && username === "admin-mabes" && (
{!isDetail && username === "admin-mabes" && (
<>
<p className="text-sm">Ubah Waktu Pembuatan</p>
<div className="flex flex-row gap-2">
@ -1203,7 +908,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
/>
</div>
</>
)} */}
)}
</div>
<div className="flex flex-row justify-end gap-3">
@ -1240,33 +945,20 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
Simpan
</Button>
)}
{detailData?.isPublish === false && (
<Button
type="button"
color="primary"
onClick={doPublish}
disabled={isScheduled && !startDateValue}
>
{isScheduled ? "Jadwalkan" : "Publish"}
</Button>
)}
{isDetail &&
detailData?.isPublish === false &&
detailData?.statusId !== 1 &&
Number(userId) === detailData?.createdById && (
<Button type="button" color="primary" onClick={doPublish}>
Publish
</Button>
)}
{/* {!isDetail && (
<Button color="success" type="button">
<p className="text-white">Draft</p>
</Button>
)} */}
{detailData?.isPublish == true && (
<Button
className="bg-red-500 text-white"
variant="outline"
type="button"
onClick={doUnpublish}
>
Unpublish
</Button>
)}
<Link href="/admin/article">
<Button color="danger" variant="outline" type="button">
Kembali

56
components/form/article/generate-ai-content-rewrite-form.tsx
View File

@ -1,20 +1,11 @@
"use client";
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
} from "@/components/ui/select";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
import { useEffect, useState } from "react";
import { close, error, loading } from "@/config/swal";
import { delay } from "@/utils/global";
import dynamic from "next/dynamic";
import {
getDetailArticle,
getGenerateRewriter,
} from "@/service/generate-article";
import { getDetailArticle, getGenerateRewriter } from "@/service/generate-article";
import { Button } from "@/components/ui/button";
import { Loader2 } from "lucide-react";
import GetSeoScore from "./get-seo-score-form";
@ -78,11 +69,8 @@ interface DiseData {
additionalKeywords: string;
}
export default function GenerateContentRewriteForm(props: {
content: (data: DiseData) => void;
}) {
const [selectedWritingSyle, setSelectedWritingStyle] =
useState("Informational");
export default function GenerateContentRewriteForm(props: { content: (data: DiseData) => void }) {
const [selectedWritingSyle, setSelectedWritingStyle] = useState("Informational");
const [selectedArticleSize, setSelectedArticleSize] = useState("News");
const [selectedLanguage, setSelectedLanguage] = useState("id");
const [mainKeyword, setMainKeyword] = useState("");
@ -178,10 +166,7 @@ export default function GenerateContentRewriteForm(props: {
))}
</SelectSection>
</Select> */}
<Select
value={selectedWritingSyle}
onValueChange={(value) => setSelectedWritingStyle(value)}
>
<Select value={selectedWritingSyle} onValueChange={(value) => setSelectedWritingStyle(value)}>
<SelectTrigger className="w-full border rounded-lg text-black dark:border-gray-400">
<SelectValue placeholder="Writing Style" />
</SelectTrigger>
@ -213,10 +198,7 @@ export default function GenerateContentRewriteForm(props: {
))}
</SelectSection>
</Select> */}
<Select
value={selectedArticleSize}
onValueChange={(value) => setSelectedArticleSize(value)}
>
<Select value={selectedArticleSize} onValueChange={(value) => setSelectedArticleSize(value)}>
<SelectTrigger className="w-full border rounded-lg text-black dark:border-gray-400">
<SelectValue placeholder="Writing Style" />
</SelectTrigger>
@ -247,10 +229,7 @@ export default function GenerateContentRewriteForm(props: {
<SelectItem key="en">English</SelectItem>
</SelectSection>
</Select> */}
<Select
value={selectedLanguage}
onValueChange={(value) => setSelectedLanguage(value)}
>
<Select value={selectedLanguage} onValueChange={(value) => setSelectedLanguage(value)}>
<SelectTrigger className="w-full border rounded-lg text-black dark:border-gray-400">
<SelectValue placeholder="Writing Style" />
</SelectTrigger>
@ -260,7 +239,6 @@ export default function GenerateContentRewriteForm(props: {
</SelectContent>
</Select>
</div>
<div className="flex flex-col mt-3">
<div className="flex flex-row gap-2 items-center">
<p className="text-sm">Text</p>
@ -268,16 +246,9 @@ export default function GenerateContentRewriteForm(props: {
<div className="w-[78vw] lg:w-full">
<CustomEditor onChange={setMainKeyword} initialData={mainKeyword} />
</div>
{mainKeyword == "" && (
<p className="text-red-400 text-sm">Required</p>
)}
{mainKeyword == "" && <p className="text-red-400 text-sm">Required</p>}
{articleIds.length < 3 && (
<Button
onClick={onSubmit}
type="button"
disabled={mainKeyword === "" || isLoading}
className="my-5 w-full py-5 text-xs md:text-base"
>
<Button onClick={onSubmit} type="button" disabled={mainKeyword === "" || isLoading} className="my-5 w-full py-5 text-xs md:text-base">
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
@ -292,14 +263,7 @@ export default function GenerateContentRewriteForm(props: {
{articleIds.length > 0 && (
<div className="flex flex-row gap-1 mt-2">
{articleIds?.map((id, index) => (
<Button
type="button"
key={id}
onClick={() => setSelectedId(id)}
disabled={isLoading && selectedId === id}
variant={selectedId === id ? "default" : "outline"}
className="flex items-center gap-2"
>
<Button key={id} onClick={() => setSelectedId(id)} disabled={isLoading && selectedId === id} variant={selectedId === id ? "default" : "outline"} className="flex items-center gap-2">
{isLoading && selectedId === id ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />

19
components/form/article/generate-ai-single-form.tsx
View File

@ -76,15 +76,16 @@ interface DiseData {
export default function GenerateSingleArticleForm(props: {
content: (data: DiseData) => void;
}) {
const [selectedWritingSyle, setSelectedWritingStyle] = useState("");
const [selectedArticleSize, setSelectedArticleSize] = useState("");
const [selectedLanguage, setSelectedLanguage] = useState("");
const [selectedWritingSyle, setSelectedWritingStyle] =
useState("Informational");
const [selectedArticleSize, setSelectedArticleSize] = useState("News");
const [selectedLanguage, setSelectedLanguage] = useState("id");
const [mainKeyword, setMainKeyword] = useState("");
const [title, setTitle] = useState("");
const [additionalKeyword, setAdditionalKeyword] = useState("");
const [articleIds, setArticleIds] = useState<number[]>([]);
const [selectedId, setSelectedId] = useState<number>();
const [isLoading, setIsLoading] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const generateAll = async (keyword: string | undefined) => {
if (keyword) {
@ -270,11 +271,11 @@ export default function GenerateSingleArticleForm(props: {
}}
>
<SelectTrigger className="w-full border border-gray-300 dark:border-gray-400 rounded-lg text-black">
<SelectValue placeholder="Article Size" />
<SelectValue placeholder="Writing Style" />
</SelectTrigger>
<SelectContent>
{articleSize.map((style) => (
<SelectItem key={style.name} value={style.value}>
<SelectItem key={style.name} value={style.name}>
{style.name}
</SelectItem>
))}
@ -306,7 +307,7 @@ export default function GenerateSingleArticleForm(props: {
}}
>
<SelectTrigger className="w-full border border-gray-300 dark:border-gray-400 rounded-lg text-black">
<SelectValue placeholder="Language" />
<SelectValue placeholder="Bahasa" />
</SelectTrigger>
<SelectContent>
<SelectItem value="id">Indonesia</SelectItem>
@ -318,7 +319,6 @@ export default function GenerateSingleArticleForm(props: {
<div className="flex flex-row gap-2 items-center">
<p className="text-sm">Main Keyword</p>
<Button
type="button"
variant="default"
size="sm"
onClick={() => generateAll(mainKeyword)}
@ -350,7 +350,6 @@ export default function GenerateSingleArticleForm(props: {
<div className="flex flex-row gap-2 items-center mt-3">
<p className="text-sm">Title</p>
<Button
type="button"
variant="default"
size="sm"
onClick={() => generateTitle(mainKeyword)}
@ -374,7 +373,6 @@ export default function GenerateSingleArticleForm(props: {
<div className="flex flex-row gap-2 items-center mt-2">
<p className="text-sm">Additional Keyword</p>
<Button
type="button"
className="text-sm"
size="sm"
onClick={() => generateKeywords(mainKeyword)}
@ -419,7 +417,6 @@ export default function GenerateSingleArticleForm(props: {
<div className="flex flex-row gap-1 mt-2">
{articleIds.map((id, index) => (
<Button
type="button"
key={id}
onClick={() => setSelectedId(id)}
disabled={isLoading && selectedId === id}

451
components/landing-page/citizen-news/citizen-news.tsx
View File

@ -1,451 +0,0 @@
"use client";
import { getListArticle } from "@/service/article";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import news from "../news";
import Link from "next/link";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
title: string;
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_alt: string;
}[];
};
const slugToLabel = (slug: string) => {
const mapping: Record<string, string> = {
development: "Pembangunan",
health: "Kesehatan",
"citizen-news": "Berita Warga",
};
return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1);
};
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function CitizenNews() {
const [activeTab, setActiveTab] = useState("comments");
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("100");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
const pathname = usePathname();
const pathSegments = pathname.split("/").filter(Boolean);
const categorySlug = pathSegments[1];
const categoryLabel = slugToLabel(categorySlug);
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
useEffect(() => {
initStateAdver();
}, []);
async function initStateAdver() {
const req = {
limit: 100,
page: 1,
sort: "desc",
sortBy: "created_at",
isPublish: true,
};
try {
const res = await getAdvertise(req);
const data: Advertise[] = res?.data?.data || [1];
// filter iklan dengan placement = "banner"
const banner = data.find((ad) => ad.placement === "jumbotron");
if (banner) {
setBannerAd(banner);
}
} catch (err) {
console.error("Error fetching advertisement:", err);
}
}
useEffect(() => {
initState();
}, [page, showData, startDateValue, selectedCategories, activeTab]);
async function initState() {
let sortBy = "created_at";
if (activeTab === "comments") sortBy = "comment_count";
if (activeTab === "trending") sortBy = "view_count";
// loading();
const req = {
limit: showData,
page: 1,
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);
} finally {
// close();
}
}
const citizenArticles = articles.filter((article) =>
article.categories?.some((category) =>
category.title?.toLowerCase().includes("berita warga")
)
);
// Pagination manually (front-end)
const itemsPerPage = 2;
const calculatedTotalPage = Math.ceil(citizenArticles.length / itemsPerPage);
const paginatedArticles = citizenArticles.slice(
(page - 1) * itemsPerPage,
page * itemsPerPage
);
function truncateText(text: string, wordLimit: number) {
const words = text.split(" ");
if (words.length <= wordLimit) return text;
return words.slice(0, wordLimit).join(" ") + "...";
}
return (
<div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-8">
{/* Left Content */}
<div className="lg:col-span-2 space-y-10">
{paginatedArticles.map((item) => (
<div key={item.id}>
<Link
className="flex flex-col md:flex-row gap-6"
href={`/details/${item?.slug}`}
>
{/* Image + Category */}
<div className="relative w-full md:w-1/2 h-64">
<Image
src={item.thumbnailUrl || "/placeholder.png"}
alt={item.title}
fill
className="object-cover rounded"
/>
<span className="absolute top-3 left-3 bg-yellow-400 text-black px-3 py-1 text-xs font-bold">
{item.categories[0]?.title || "Pembangunan"}
</span>
</div>
{/* Content */}
<div className="flex-1">
<h2 className="text-xl font-bold text-[#16324F] hover:text-green-600 cursor-pointer">
{item.title}
</h2>
<div className="text-sm text-gray-600 mt-2">
BY{" "}
<span className="text-green-600 font-semibold">
{item?.customCreatorName || item.createdByName}
</span>{" "}
• {new Date(item.createdAt).toLocaleDateString("id-ID")}
</div>
<p className="mt-3 text-gray-700">
{truncateText(item.description, 20)}
</p>
<button className="mt-4 px-4 py-2 border border-gray-400 text-gray-700 hover:bg-black hover:text-white transition">
READ MORE
</button>
</div>
</Link>
</div>
))}
{/* Pagination */}
<div className="flex items-center justify-center gap-2 mt-6">
{/* Previous Button */}
<button
onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
disabled={page === 1}
className="px-3 py-1 border"
>
&lt;
</button>
{/* Page Numbers */}
{Array.from({ length: calculatedTotalPage }, (_, i) => i + 1)
.filter((p) => {
// Always show first, last, current, and pages around current
return (
p === 1 ||
p === calculatedTotalPage ||
(p >= page - 1 && p <= page + 1)
);
})
.map((p, idx, arr) => {
const prev = arr[idx - 1];
const showEllipsis = prev && p - prev > 1;
return (
<span key={p} className="flex items-center">
{showEllipsis && <span className="px-2">...</span>}
<button
onClick={() => setPage(p)}
className={`px-3 py-1 ${
page === p ? "bg-green-600 text-white" : "border"
}`}
>
{p}
</button>
</span>
);
})}
{/* Next Button */}
<button
onClick={() =>
setPage((prev) => Math.min(prev + 1, calculatedTotalPage))
}
disabled={page === calculatedTotalPage}
className="px-3 py-1 border"
>
&gt;
</button>
</div>
</div>
{/* Sidebar */}
<div className="space-y-6">
{/* Advertisement */}
<div className="w-full h-[400px] relative">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
{/* Connect with us */}
<div>
<h3 className="text-lg font-semibold mb-2">Connect with us</h3>
<div className="h-1 w-20 bg-green-600 mb-4"></div>
<div className="grid grid-cols-3 gap-2">
<div className="bg-blue-500 text-white text-center p-3">
<p className="text-xl font-bold">138</p>
<p className="text-sm">Followers</p>
</div>
<div className="bg-red-600 text-white text-center p-3">
<p className="text-xl font-bold">205k</p>
<p className="text-sm">Subscribers</p>
</div>
<div className="bg-yellow-400 text-black text-center p-3">
<p className="text-xl font-bold">23.9k</p>
<p className="text-sm">Followers</p>
</div>
</div>
</div>
{/* Tabs */}
<div>
<div className="flex gap-4 border-b">
{["trending", "comments", "latest"].map((tab) => (
<button
key={tab}
className={`pb-2 capitalize ${
activeTab === tab
? "border-b-2 border-green-600 text-green-600"
: "text-gray-600"
}`}
onClick={() => {
setPage(1); // reset page setiap ganti tab
setActiveTab(tab);
}}
>
{tab}
</button>
))}
</div>
<div className="mt-4 space-y-4">
{articles.slice(0, 5).map((item) => (
<div key={item.id} className="flex gap-3 items-center">
<Link
className="flex gap-3 items-center"
href={`/details/${item?.slug}`}
>
<Image
src={item.thumbnailUrl || "/no-image.jpg"}
alt={item.title}
width={80}
height={60}
className="object-cover rounded"
/>
<div>
<h3 className="font-semibold text-sm">{item.title}</h3>
<p className="text-xs text-gray-500">
{new Date(item.createdAt).toLocaleDateString()}
</p>
</div>
</Link>
</div>
))}
</div>
<div className="">
<h2 className="text-sm border-b-2 border-gray-300 font-bold mb-4">
Recommended
</h2>
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/details/${articles[0]?.slug}`}>
<Image
src={
articles[0]?.thumbnailUrl ||
articles[0]?.files?.[0]?.fileUrl ||
"/default-image.jpg"
}
alt={"articles[0]?.title"}
fill
sizes="(max-width: 1024px) 100vw, 33vw"
className="object-cover"
/>
<div className="absolute inset-0 bg-black/30" />
<div className="absolute bottom-0.5 left-2 text-white">
<h3 className=" font-semibold text-base mb-1">
{articles[0]?.title}
</h3>
<p className=" text-xs mb-2 flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
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 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
/>
</g>
</svg>{" "}
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
}
)}
</p>
</div>
</Link>
</div>
<div className="space-y-5">
{articles?.slice(1, 4).map((article, index) => (
<div key={index}>
<Link
className="flex gap-3"
href={`/details/${article?.slug}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image
src={
article?.thumbnailUrl ||
article?.files?.[0]?.fileUrl ||
"/default-image.jpg"
}
alt={"article?.title"}
fill
className="object-cover"
/>
</div>
<div>
<h4 className="text-sm font-semibold mb-3">
{article?.title}
</h4>
<p className="text-xs text-gray-500 flex gap-2 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
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 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
/>
</g>
</svg>{" "}
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
}
)}
</p>
</div>
</Link>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

54
components/landing-page/citizen-news/header-citizen.tsx
View File

@ -12,15 +12,13 @@ type Article = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_url: string;
file_alt: string;
}[];
};
@ -38,7 +36,7 @@ export default function HeaderCitizen() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("100");
const [showData, setShowData] = useState("5");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -77,15 +75,6 @@ export default function HeaderCitizen() {
}
}
const citizenArticles = articles.filter((article) =>
article.categories?.some((category) =>
category.title?.toLowerCase().includes("berita warga")
)
);
const mainArticle = citizenArticles[0];
const otherArticles = citizenArticles.slice(1, 3);
return (
<section className="max-w-7xl mx-auto bg-white">
<div className="flex flex-col items-start bg-[#F2F4F3] w-full overflow-hidden py-6 px-8 gap-3">
@ -108,28 +97,30 @@ export default function HeaderCitizen() {
<div className="pb-5">
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
{mainArticle && (
{articles.length > 0 && (
<div className="md:col-span-2 relative">
<Link href={`/details/${mainArticle.slug}`}>
<Link href={`/detail/${articles[0]?.id}`}>
<Image
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
alt={mainArticle.title}
src={
articles[0]?.files?.[0]?.file_url ||
articles[0]?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={articles[0].title}
width={800}
height={500}
className="w-full h-full max-h-[460px] object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
{mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
{articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
{mainArticle.title}
{articles[0].title}
</h2>
<p className="text-white text-xs">
{mainArticle?.customCreatorName ||
mainArticle.createdByName}{" "}
-{" "}
{new Date(mainArticle.createdAt).toLocaleDateString(
{articles[0].createdByName} -{" "}
{new Date(articles[0].createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
@ -144,13 +135,13 @@ export default function HeaderCitizen() {
)}
<div className="grid grid-rows-2 gap-2">
{otherArticles.map((article, index) => (
{articles.slice(1, 3).map((article, index) => (
<div key={index} className="relative">
<Link href={`/details/${article.slug}`}>
<Link href={`/detail/${article?.id}`}>
<Image
src={
article.thumbnailUrl ||
article.files?.[0]?.fileUrl ||
article?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={article.title}
@ -160,7 +151,7 @@ export default function HeaderCitizen() {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
{article.categories?.[0]?.title || "TANPA KATEGORI"}
{article.categoryName || "TANPA KATEGORI"}
</span>
<h3 className="text-sm font-semibold text-white leading-snug mb-1">
{article.title}
@ -171,6 +162,15 @@ export default function HeaderCitizen() {
))}
</div>
</div>
<div className="relative mt-10 mb-2 h-[188px] overflow-hidden flex items-center mx-8 border my-8">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-contain"
/>
</div>
</div>
</section>
);

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

@ -1,136 +0,0 @@
"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-green-600 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-green-600 pb-[1px]">
BERITA OPINI
</span>
</p>
<h3 className="font-semibold text-[15px] leading-tight mt-1 line-clamp-2">
{item.title}
</h3>
<p className="text-[11px] text-gray-600 mt-2">
By{" "}
<span className="font-semibold">
{item.customCreatorName}
</span>
</p>
<p className="text-[11px] text-gray-600">
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
</div>
</Link>
))}
</div>
<div className="relative h-[140px] w-full overflow-hidden rounded-none my-5">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-fill"
/>
</div>
</div>
</section>
);
}

175
components/landing-page/development/development-news.tsx
View File

@ -5,7 +5,6 @@ import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import news from "../news";
import Link from "next/link";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -14,27 +13,16 @@ type Article = {
categoryName: string;
createdAt: string;
createdByName: string;
slug: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_url: string;
file_alt: string;
}[];
};
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
const slugToLabel = (slug: string) => {
const mapping: Record<string, string> = {
development: "Pembangunan",
@ -49,7 +37,7 @@ export default function DevelopmentNews() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("100");
const [showData, setShowData] = useState("2");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -60,36 +48,6 @@ export default function DevelopmentNews() {
const pathname = usePathname();
const pathSegments = pathname.split("/").filter(Boolean);
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
useEffect(() => {
initStateAdver();
}, []);
async function initStateAdver() {
const req = {
limit: 100,
page: 1,
sort: "desc",
sortBy: "created_at",
isPublish: true,
};
try {
const res = await getAdvertise(req);
const data: Advertise[] = res?.data?.data || [1];
// filter iklan dengan placement = "banner"
const banner = data.find((ad) => ad.placement === "jumbotron");
if (banner) {
setBannerAd(banner);
}
} catch (err) {
console.error("Error fetching advertisement:", err);
}
}
const categorySlug = pathSegments[1];
const categoryLabel = slugToLabel(categorySlug);
@ -105,7 +63,7 @@ export default function DevelopmentNews() {
// loading();
const req = {
limit: showData,
page: 1,
page,
search,
categorySlug: Array.from(selectedCategories).join(","),
sort: "desc",
@ -122,23 +80,6 @@ export default function DevelopmentNews() {
}
}
const pembangunanArticles = articles.filter((article) =>
article.categories?.some((category) =>
category.title?.toLowerCase().includes("berita warga")
)
);
// Pagination manually (front-end)
const itemsPerPage = 2;
const calculatedTotalPage = Math.ceil(
pembangunanArticles.length / itemsPerPage
);
const paginatedArticles = pembangunanArticles.slice(
(page - 1) * itemsPerPage,
page * itemsPerPage
);
function truncateText(text: string, wordLimit: number) {
const words = text.split(" ");
if (words.length <= wordLimit) return text;
@ -146,14 +87,14 @@ export default function DevelopmentNews() {
}
return (
<div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-8">
<div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-4">
{/* Left Content */}
<div className="lg:col-span-2 space-y-10">
{paginatedArticles.map((item) => (
{articles.map((item) => (
<div key={item.id}>
<Link
className="flex flex-col md:flex-row gap-6"
href={`/details/${item?.slug}`}
href={`/detail/${item?.id}`}
>
{/* Image + Category */}
<div className="relative w-full md:w-1/2 h-64">
@ -164,7 +105,7 @@ export default function DevelopmentNews() {
className="object-cover rounded"
/>
<span className="absolute top-3 left-3 bg-yellow-400 text-black px-3 py-1 text-xs font-bold">
{item.categories[0]?.title || "Pembangunan"}
{item.categories[0]?.title || categoryLabel}
</span>
</div>
@ -176,7 +117,7 @@ export default function DevelopmentNews() {
<div className="text-sm text-gray-600 mt-2">
BY{" "}
<span className="text-green-600 font-semibold">
{item?.customCreatorName || item.createdByName}
{item.createdByName || "Admin"}
</span>{" "}
• {new Date(item.createdAt).toLocaleDateString("id-ID")}
</div>
@ -193,51 +134,17 @@ export default function DevelopmentNews() {
{/* Pagination */}
<div className="flex items-center justify-center gap-2 mt-6">
{/* Previous Button */}
<button
onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
disabled={page === 1}
className="px-3 py-1 border"
>
&lt;
</button>
{Array.from({ length: calculatedTotalPage }, (_, i) => i + 1)
.filter((p) => {
return (
p === 1 ||
p === calculatedTotalPage ||
(p >= page - 1 && p <= page + 1)
);
})
.map((p, idx, arr) => {
const prev = arr[idx - 1];
const showEllipsis = prev && p - prev > 1;
return (
<span key={p} className="flex items-center">
{showEllipsis && <span className="px-2">...</span>}
<button
onClick={() => setPage(p)}
className={`px-3 py-1 ${
page === p ? "bg-green-600 text-white" : "border"
}`}
>
{p}
</button>
</span>
);
})}
<button
onClick={() =>
setPage((prev) => Math.min(prev + 1, calculatedTotalPage))
}
disabled={page === calculatedTotalPage}
className="px-3 py-1 border"
>
&gt;
</button>
{Array.from({ length: totalPage }, (_, i) => (
<button
key={i}
onClick={() => setPage(i + 1)}
className={`px-3 py-1 ${
page === i + 1 ? "bg-green-600 text-white" : "border"
}`}
>
{i + 1}
</button>
))}
</div>
</div>
@ -245,32 +152,12 @@ export default function DevelopmentNews() {
<div className="space-y-6">
{/* Advertisement */}
<div className="w-full h-[400px] relative">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
<Image
src="/advertisiment.png"
alt="Advertisement"
fill
className="object-cover rounded"
/>
</div>
{/* Connect with us */}
@ -315,11 +202,11 @@ export default function DevelopmentNews() {
</div>
<div className="mt-4 space-y-4">
{articles.slice(0, 5).map((item) => (
{articles.map((item) => (
<div key={item.id} className="flex gap-3 items-center">
<Link
className="flex gap-3 items-center"
href={`/details/${item?.slug}`}
href={`/detail/${item?.id}`}
>
<Image
src={item.thumbnailUrl || "/no-image.jpg"}
@ -344,11 +231,11 @@ export default function DevelopmentNews() {
</h2>
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/details/${articles[0]?.slug}`}>
<Link href={`/detail/${articles[0]?.id}`}>
<Image
src={
articles[0]?.thumbnailUrl ||
articles[0]?.files?.[0]?.fileUrl ||
articles[0]?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={"articles[0]?.title"}
@ -394,13 +281,13 @@ export default function DevelopmentNews() {
<div key={index}>
<Link
className="flex gap-3"
href={`/details/${article?.slug}`}
href={`/detail/${article?.id}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image
src={
article?.thumbnailUrl ||
article?.files?.[0]?.fileUrl ||
article?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={"article?.title"}

53
components/landing-page/development/header-development.tsx
View File

@ -12,15 +12,13 @@ type Article = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_url: string;
file_alt: string;
}[];
};
@ -38,7 +36,7 @@ export default function HeaderDevelopment() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("100");
const [showData, setShowData] = useState("5");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -46,10 +44,10 @@ export default function HeaderDevelopment() {
endDate: null,
});
const pathname = usePathname();
const pathSegments = pathname.split("/").filter(Boolean);
const pathname = usePathname(); // e.g., "/category/development"
const pathSegments = pathname.split("/").filter(Boolean); // ["category", "development"]
const categorySlug = pathSegments[1];
const categorySlug = pathSegments[1]; // "development"
const categoryLabel = slugToLabel(categorySlug);
useEffect(() => {
@ -72,22 +70,11 @@ export default function HeaderDevelopment() {
const res = await getListArticle(req);
setArticles(res?.data?.data || []);
setTotalPage(res?.data?.meta?.totalPage || 1);
console.log("develo", res?.data?.data || []);
} finally {
// close();
}
}
const pembangunanArticles = articles.filter((article) =>
article.categories?.some((category) =>
category.title?.toLowerCase().includes("berita warga")
)
);
const mainArticle = pembangunanArticles[0];
const otherArticles = pembangunanArticles.slice(1, 3);
console.log("otherArticles:", otherArticles);
return (
<section className="max-w-7xl mx-auto bg-white">
<div className="flex flex-col jus items-start bg-[#F2F4F3] w-full overflow-hidden py-6 px-8 gap-3">
@ -114,28 +101,30 @@ export default function HeaderDevelopment() {
<div className="pb-5">
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
{mainArticle && (
{articles.length > 0 && (
<div className="md:col-span-2 relative">
<Link href={`/details/${mainArticle.slug}`}>
<Link href={`/detail/${articles[0]?.id}`}>
<Image
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
alt={mainArticle.title}
src={
articles[0]?.files?.[0]?.file_url ||
articles[0]?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={articles[0].title}
width={800}
height={500}
className="w-full h-full max-h-[460px] object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
{mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
{articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
{mainArticle.title}
{articles[0].title}
</h2>
<p className="text-white text-xs">
{mainArticle?.customCreatorName ||
mainArticle.createdByName}{" "}
-{" "}
{new Date(mainArticle.createdAt).toLocaleDateString(
{articles[0].createdByName} -{" "}
{new Date(articles[0].createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
@ -150,13 +139,13 @@ export default function HeaderDevelopment() {
)}
<div className="grid grid-rows-2 gap-2">
{otherArticles.map((article, index) => (
{articles.slice(1, 3).map((article, index) => (
<div key={index} className="relative">
<Link href={`/details/${article.slug}`}>
<Link href={`/detail/${article?.id}`}>
<Image
src={
article.thumbnailUrl ||
article.files?.[0]?.fileUrl ||
article?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={article.title}
@ -166,7 +155,7 @@ export default function HeaderDevelopment() {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
{article.categories?.[0]?.title || "TANPA KATEGORI"}
{article.categoryName || "TANPA KATEGORI"}
</span>
<h3 className="text-sm font-semibold text-white leading-snug mb-1">
{article.title}

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

@ -1,66 +1,176 @@
// components/Footer.tsx
import Image from "next/image";
import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
import Link from "next/link";
export default function Footer() {
return (
<footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
<div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
{/* Logo */}
<div className="flex justify-center md:justify-end">
<Image
src="/mikul-news-logo.png"
alt="Logo"
width={230}
height={230}
className="object-contain"
/>
</div>
{/* Subscribe Box */}
<div className="flex justify-center md:justify-end">
<div className=" p-8 w-full md:w-[420px]">
<h2 className="text-2xl font-semibold text-gray-800 leading-snug">
Subscribe us to get <br />
the latest news!
</h2>
<label className="block mt-6 mb-1 text-sm text-gray-600">
Email address:
</label>
<input
type="email"
placeholder="Your email address"
className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
<footer className=" text-[#FFFFFFCC] text-sm font-sans ">
<div className="max-w-7xl mx-auto py-10 bg-[#09282C] px-8">
{/* Top Menu Links */}
<div className="flex flex-col md:flex-row justify-center md:justify-between gap-3">
{/* <div className="w-full md:w-2/12">
<p className="text-sm text-gray-400 mt-5">
© 2025{" "}
<span className="text-xs text-white font-semibold">JNews</span>-
Premium WordPress news & magazine theme by{" "}
<span className="text-white font-semibold">Jegtheme</span>
</p>
</div> */}
<div className="flex items-center overflow-hidden mb-4 py-6 px-8">
<Image
src="/mikul.png"
alt="Background"
width={272}
height={90}
className="w-full md:w-[272px] h-[90px] object-cover border"
priority
/>
</div>
<div className="w-full md:w-6/12">
<h2 className="border-b-2 mb-5"></h2>
<div className="flex items-start flex-wrap justify-start md:justify-start gap-2 md:gap-3 text-xs text-white font-semibold">
{[
{ label: "Beranda", href: "#" },
{ label: "Pembangunan", href: "/category/development" },
{ label: "Kesehatan", href: "/category/health" },
{ label: "Berita Warga", href: "/category/citizen-news" },
].map((item, idx, arr) => (
<span
key={idx}
className="flex items-center gap-2 whitespace-nowrap"
>
<a href={item.href} className="hover:underline">
{item.label}
</a>
{idx !== arr.length - 1 && (
<span className="text-white">/</span>
)}
</span>
))}
</div>
</div>
<button className="mt-4 bg-green-600 hover:bg-green-500 text-black px-6 py-3 rounded-md font-medium">
SIGN UP
</button>
<div className=" w-full md:w-3/12">
<div className="flex flex-col justify-center md:justify-end gap-2 md:gap-3 text-xs text-[#FFFFFF]">
<p className="text-xs font-bold text-red-600 mb-2 md:mb-0 w-10/12 text-start">
Follow Us
</p>
<h2 className="border-b-2 "></h2>
<div className="flex gap-6 text-white text-lg">
<Link href="#" aria-label="Facebook">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
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="#" aria-label="Twitter">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
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="#" aria-label="Google" className="text-[#F5F5F5]">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
// fill-rule="evenodd"
d="M7.796 14.333v-2.618h7.211c.066.382.12.763.12 1.265c0 4.364-2.923 7.462-7.33 7.462A7.63 7.63 0 0 1 .16 12.806a7.63 7.63 0 0 1 7.636-7.637c2.062 0 3.786.753 5.117 1.997L10.84 9.162c-.567-.546-1.56-1.178-3.044-1.178c-2.607 0-4.734 2.16-4.734 4.822s2.127 4.821 4.734 4.821c3.022 0 4.157-2.17 4.331-3.294zm13.27-2.6H23.2v2.134h-2.133V16h-2.134v-2.133H16.8v-2.134h2.133V9.6h2.134z"
// clip-rule="evenodd"
/>
</svg>
</Link>
<Link href="#" aria-label="Pinterest">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<defs>
<path
id="akarIconsPinterestFill0"
fill="#fff"
d="M0 0h24v24H0z"
/>
</defs>
<g fill="none">
<g
// clip-path="url(#akarIconsPinterestFill1)"
>
<g
// clip-path="url(#akarIconsPinterestFill2)"
>
<path
fill="currentColor"
d="M0 12c0 5.123 3.211 9.497 7.73 11.218c-.11-.937-.227-2.482.025-3.566c.217-.932 1.401-5.938 1.401-5.938s-.357-.715-.357-1.774c0-1.66.962-2.9 2.161-2.9c1.02 0 1.512.765 1.512 1.682c0 1.025-.653 2.557-.99 3.978c-.281 1.189.597 2.159 1.769 2.159c2.123 0 3.756-2.239 3.756-5.471c0-2.861-2.056-4.86-4.991-4.86c-3.398 0-5.393 2.549-5.393 5.184c0 1.027.395 2.127.889 2.726a.36.36 0 0 1 .083.343c-.091.378-.293 1.189-.332 1.355c-.053.218-.173.265-.4.159c-1.492-.694-2.424-2.875-2.424-4.627c0-3.769 2.737-7.229 7.892-7.229c4.144 0 7.365 2.953 7.365 6.899c0 4.117-2.595 7.431-6.199 7.431c-1.211 0-2.348-.63-2.738-1.373c0 0-.599 2.282-.744 2.84c-.282 1.084-1.064 2.456-1.549 3.235C9.584 23.815 10.77 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0S0 5.373 0 12"
/>
</g>
</g>
<defs>
<clipPath id="akarIconsPinterestFill1">
<use href="#akarIconsPinterestFill0" />
</clipPath>
<clipPath id="akarIconsPinterestFill2">
<use href="#akarIconsPinterestFill0" />
</clipPath>
</defs>
</g>
</svg>
</Link>
<Link href="#" aria-label="Vk">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
// fill-rule="evenodd"
d="M23.45 5.948c.166-.546 0-.948-.795-.948H20.03c-.668 0-.976.347-1.143.73c0 0-1.335 3.196-3.226 5.272c-.612.602-.89.793-1.224.793c-.167 0-.418-.191-.418-.738V5.948c0-.656-.184-.948-.74-.948H9.151c-.417 0-.668.304-.668.593c0 .621.946.765 1.043 2.513v3.798c0 .833-.153.984-.487.984c-.89 0-3.055-3.211-4.34-6.885C4.45 5.288 4.198 5 3.527 5H.9c-.75 0-.9.347-.9.73c0 .682.89 4.07 4.145 8.551C6.315 17.341 9.37 19 12.153 19c1.669 0 1.875-.368 1.875-1.003v-2.313c0-.737.158-.884.687-.884c.39 0 1.057.192 2.615 1.667C19.11 18.216 19.403 19 20.405 19h2.625c.75 0 1.126-.368.91-1.096c-.238-.724-1.088-1.775-2.215-3.022c-.612-.71-1.53-1.475-1.809-1.858c-.389-.491-.278-.71 0-1.147c0 0 3.2-4.426 3.533-5.929"
// clip-rule="evenodd"
/>
</svg>
</Link>
<Link href="#" aria-label="Wifi">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M12 21q-1.05 0-1.775-.725T9.5 18.5t.725-1.775T12 16t1.775.725t.725 1.775t-.725 1.775T12 21m-5.65-5.65l-2.1-2.15q1.475-1.475 3.463-2.337T12 10t4.288.875t3.462 2.375l-2.1 2.1q-1.1-1.1-2.55-1.725T12 13t-3.1.625t-2.55 1.725M2.1 11.1L0 9q2.3-2.35 5.375-3.675T12 4t6.625 1.325T24 9l-2.1 2.1q-1.925-1.925-4.462-3.012T12 7T6.563 8.088T2.1 11.1"
/>
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
<div className="flex flex-wrap justify-center gap-8 mt-16 text-gray-600 text-sm">
<a href="#">About Us</a>
<a href="#">Contact</a>
<a href="#">Kode Etik Jurnalistik</a>
<a href="#">Kebijakan Privasi</a>
<a href="#">Disclaimer</a>
<a href="#">Pedoman Media Siber</a>
</div>
<div className="flex justify-center gap-8 mt-8 text-gray-700">
<Facebook className="w-5 h-5 cursor-pointer" />
<Twitter className="w-5 h-5 cursor-pointer" />
<Instagram className="w-5 h-5 cursor-pointer" />
<Youtube className="w-5 h-5 cursor-pointer" />
</div>
<p className="text-start text-gray-500 text-sm mt-8 pl-5">
© 2025 Mikul News - All Rights Reserved.
</p>
</footer>
);
}

306
components/landing-page/header.tsx
View File

@ -1,9 +1,9 @@
"use client";
import { getListArticle } from "@/service/article";
import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
type Article = {
id: number;
@ -11,221 +11,157 @@ type Article = {
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 }[];
categories: {
title: string;
}[];
files: {
file_url: string;
file_alt: string;
}[];
};
export default function Header() {
export default function HeroNewsSection() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("5");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
useEffect(() => {
const fetchArticles = async () => {
const req = {
limit: "10",
page: 1,
search: "",
categorySlug: "",
sort: "desc",
isPublish: true,
sortBy: "created_at",
};
initState();
}, [page, showData, startDateValue, selectedCategories]);
const res = await getListArticle(req);
setArticles(res?.data?.data || []);
async function initState() {
// loading();
const req = {
limit: showData,
page,
search,
categorySlug: Array.from(selectedCategories).join(","),
sort: "desc",
isPublish: true,
sortBy: "created_at",
};
fetchArticles();
}, []);
const flashArticles = articles.slice(0, 8);
const mainArticle = articles[8] || articles[0];
const recentPosts = articles.slice(1, 5);
try {
const res = await getListArticle(req);
setArticles(res?.data?.data || []);
setTotalPage(res?.data?.meta?.totalPage || 1);
} finally {
// close();
}
}
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-green-600 font-semibold">Flash</h4>
<span className="text-red-500">⚡</span>
</div>
<div className="text-xs text-gray-500 hidden md:block">LOAD MORE ➜</div>
<section className="max-w-7xl mx-auto bg-white">
<div className="flex items-center bg-[#F2F4F3] w-full overflow-hidden mb-4 py-6 px-8">
<Image
src="/mikul.png"
alt="Background"
width={272}
height={90}
className="w-full md:w-[272px] h-[90px] object-cover border"
priority
/>
</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]">
<div className="pb-5">
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2 m-8 ">
{articles.length > 0 && (
<div className="md:col-span-2 lg:col-span-3 relative">
<Link href={`/detail/${articles[0]?.id}`}>
<Image
src={
item.thumbnailUrl ||
item.files?.[0]?.fileUrl ||
"/placeholder.jpg"
articles[0]?.files?.[0]?.file_url ||
articles[0]?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={item.title}
fill
className="object-cover"
alt={articles[0].title}
width={800}
height={500}
className="w-full h-full max-h-[460px] 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"}
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
{articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<span>●</span>
</div>
</div>
{/* play icon */}
<div className="absolute top-3 right-3 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center">
<svg
className="w-4 h-4 text-black"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M8 5v14l11-7z" />
</svg>
</div>
</Link>
))}
</div>
</div>
{/* Main Layout */}
<div className="grid grid-cols-1 md:grid-cols-[2.2fr_1fr] gap-6">
{/* LEFT SIDE – MAIN ARTICLE */}
{mainArticle ? (
<div className="relative h-[500px] w-full rounded-xl overflow-hidden shadow-md">
<Link href={`/details/${mainArticle.slug}`}>
<Image
src={
mainArticle.thumbnailUrl ||
mainArticle.files?.[0]?.fileUrl ||
"/placeholder.jpg"
}
alt={mainArticle.files?.[0]?.file_alt || mainArticle.title}
fill
className="object-cover"
/>
{/* White Card Overlay */}
<div className="absolute bottom-6 left-6 bg-white bg-opacity-95 backdrop-blur-sm p-6 shadow-lg max-w-lg">
<span className="text-[11px] bg-green-700 text-white px-2 py-1 rounded-sm">
{mainArticle.categoryName ||
mainArticle.categories?.[0]?.title ||
"Berita"}
</span>
<h2 className="text-xl md:text-2xl font-bold text-gray-900 mt-2 leading-snug">
{mainArticle.title}
</h2>
<div className="flex items-center gap-2 text-gray-600 text-xs mt-3">
<span>
By{" "}
{mainArticle.customCreatorName ||
mainArticle.createdByName ||
"Admin"}
</span>
<span>•</span>
<span>
{new Date(mainArticle.publishedAt).toLocaleDateString(
<h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
{articles[0].title}
</h2>
<p className="text-white text-xs flex items-center gap-2">
{articles[0].createdByName} -{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
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 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
/>
</g>
</svg>{" "}
{new Date(articles[0].createdAt).toLocaleDateString(
"id-ID",
{
day: "2-digit",
day: "numeric",
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 className="md:col-span-1 lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-2">
{articles.slice(1, 5).map((article, index) => (
<div key={index} className="relative">
<Link href={`/detail/${article?.id}`}>
<Image
src={
article.thumbnailUrl ||
article?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={article.title}
width={400}
height={240}
className="w-full h-56 object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
{article?.categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h3 className="text-sm font-semibold text-white leading-snug mb-1">
{article.title}
</h3>
</div>
</Link>
</div>
))}
</div>
</div>
</div>
{/* LOAD MORE */}
<div className="flex justify-center my-6">
<button className="text-gray-600 text-sm flex items-center gap-2 border-b pb-1">
<span>LOAD MORE</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none">
<path
d="M12 5v14M5 12h14"
stroke="#9CA3AF"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
</button>
</div>
{/* KOLOM PPS BOTTOM BANNER */}
<div className="relative h-[140px] w-full overflow-hidden rounded-none my-5 border rounded-md">
<Image
src="/image-kolom.png"
alt="Kolom PPS Bottom Banner"
fill
className="object-contain"
/>
<div className="relative mt-10 mb-2 h-[188px] overflow-hidden flex items-center mx-8 border my-8">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-contain"
/>
</div>
</div>
</section>
);

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

@ -1,186 +0,0 @@
"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-green-600 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-green-700 font-semibold mb-1">
{item.categoryName || "Kategori"}
</p>
{/* JUDUL */}
<h3 className="font-bold text-base leading-snug line-clamp-2">
{item.title}
</h3>
{/* DESKRIPSI */}
<p className="text-sm text-gray-600 line-clamp-2 mt-1">
{item.description}
</p>
{/* AUTHOR + DATE */}
<p className="text-xs text-gray-400 mt-2">
By {item.customCreatorName || item.createdByName} —{" "}
{formatDate(item.publishedAt)}
</p>
</div>
<div className="relative w-40 h-28 rounded overflow-hidden flex-shrink-0">
<Image
src={item.thumbnailUrl || "/placeholder.jpg"}
alt={item.title}
fill
className="object-cover"
/>
</div>
</div>
</Link>
))}
</div>
{/* LOAD MORE */}
<div className="text-center mt-4 text-green-600 text-sm cursor-pointer">
LOAD MORE ↓
</div>
</div>
<div className="lg:col-span-1">
<h2 className="text-lg font-bold text-gray-900">TERBANYAK DIBAGIKAN</h2>
<div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
<div className="space-y-4">
{popular.map((item, index) => (
<Link
key={item.id}
href={`/details/${item.slug}`}
className="flex gap-3 border-b pb-4"
>
{/* NOMOR */}
<div className="text-green-600 font-extrabold text-3xl leading-none">
{(index + 1).toString().padStart(2, "0")}
</div>
<div className="flex-1">
<p className="text-[10px] text-gray-500">
{item.categories?.[0]?.title || "Kategori"}
</p>
<h4 className="font-semibold text-sm leading-snug line-clamp-2">
{item.title}
</h4>
<p className="text-[10px] text-gray-400 mt-1">
{formatDate(item.createdAt)}
</p>
</div>
{/* THUMBNAIL KECIL */}
<div className="relative w-16 h-14 rounded overflow-hidden">
<Image
src={item.thumbnailUrl || "/placeholder.jpg"}
alt={item.title}
fill
className="object-cover"
/>
</div>
</Link>
))}
</div>
<div className="mt-6">
<div className="relative h-[180px] border rounded-lg overflow-hidden mb-6">
<Image
src="/image-kolom.png"
alt="Kolom PPS"
fill
className="object-contain bg-white"
/>
</div>
<div className="relative h-[180px] border rounded-lg overflow-hidden">
<Image
src="/image-kolom.png"
alt="Kolom PPS"
fill
className="object-contain bg-white"
/>
</div>
</div>
</div>
</section>
);
}

54
components/landing-page/health/header-health.tsx
View File

@ -12,15 +12,13 @@ type Article = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_url: string;
file_alt: string;
}[];
};
@ -38,7 +36,7 @@ export default function HeaderHealth() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("100");
const [showData, setShowData] = useState("5");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -77,15 +75,6 @@ export default function HeaderHealth() {
}
}
const healthArticles = articles.filter((article) =>
article.categories?.some((category) =>
category.title?.toLowerCase().includes("berita warga")
)
);
const mainArticle = healthArticles[0];
const otherArticles = healthArticles.slice(1, 3);
return (
<section className="max-w-7xl mx-auto bg-white">
<div className="flex flex-col items-start bg-[#F2F4F3] w-full overflow-hidden py-6 px-8 gap-3">
@ -108,28 +97,30 @@ export default function HeaderHealth() {
<div className="pb-5">
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
{mainArticle && (
{articles.length > 0 && (
<div className="md:col-span-2 relative">
<Link href={`/details/${mainArticle.slug}`}>
<Link href={`/detail/${articles[0]?.id}`}>
<Image
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
alt={mainArticle.title}
src={
articles[0]?.files?.[0]?.file_url ||
articles[0]?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={articles[0].title}
width={800}
height={500}
className="w-full h-full max-h-[460px] object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
{mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
{articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
{mainArticle.title}
{articles[0].title}
</h2>
<p className="text-white text-xs">
{mainArticle?.customCreatorName ||
mainArticle.createdByName}{" "}
-{" "}
{new Date(mainArticle.createdAt).toLocaleDateString(
{articles[0].createdByName} -{" "}
{new Date(articles[0].createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
@ -144,13 +135,13 @@ export default function HeaderHealth() {
)}
<div className="grid grid-rows-2 gap-2">
{otherArticles.map((article, index) => (
{articles.slice(1, 3).map((article, index) => (
<div key={index} className="relative">
<Link href={`/details/${article.slug}`}>
<Link href={`/detail/${article?.id}`}>
<Image
src={
article.thumbnailUrl ||
article.files?.[0]?.fileUrl ||
article?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={article.title}
@ -160,7 +151,7 @@ export default function HeaderHealth() {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
{article.categories?.[0]?.title || "TANPA KATEGORI"}
{article.categoryName || "TANPA KATEGORI"}
</span>
<h3 className="text-sm font-semibold text-white leading-snug mb-1">
{article.title}
@ -171,6 +162,15 @@ export default function HeaderHealth() {
))}
</div>
</div>
<div className="relative mt-10 mb-2 h-[188px] overflow-hidden flex items-center mx-8 border my-8">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-contain"
/>
</div>
</div>
</section>
);

441
components/landing-page/health/health-news.tsx
View File

@ -1,441 +0,0 @@
"use client";
import { getListArticle } from "@/service/article";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import news from "../news";
import Link from "next/link";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
title: string;
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_alt: string;
}[];
};
const slugToLabel = (slug: string) => {
const mapping: Record<string, string> = {
development: "Pembangunan",
health: "Kesehatan",
"citizen-news": "Berita Warga",
};
return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1);
};
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function HealthNews() {
const [activeTab, setActiveTab] = useState("comments");
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("100");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
const pathname = usePathname();
const pathSegments = pathname.split("/").filter(Boolean);
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
useEffect(() => {
initStateAdver();
}, []);
async function initStateAdver() {
const req = {
limit: 100,
page: 1,
sort: "desc",
sortBy: "created_at",
isPublish: true,
};
try {
const res = await getAdvertise(req);
const data: Advertise[] = res?.data?.data || [1];
// filter iklan dengan placement = "banner"
const banner = data.find((ad) => ad.placement === "jumbotron");
if (banner) {
setBannerAd(banner);
}
} catch (err) {
console.error("Error fetching advertisement:", err);
}
}
const categorySlug = pathSegments[1];
const categoryLabel = slugToLabel(categorySlug);
useEffect(() => {
initState();
}, [page, showData, startDateValue, selectedCategories, activeTab]);
async function initState() {
let sortBy = "created_at";
if (activeTab === "comments") sortBy = "comment_count";
if (activeTab === "trending") sortBy = "view_count";
// loading();
const req = {
limit: showData,
page: 1,
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);
} finally {
// close();
}
}
const kesehatanArticles = articles.filter((article) =>
article.categories?.some((category) =>
category.title?.toLowerCase().includes("berita warga")
)
);
const itemsPerPage = 2;
const calculatedTotalPage = Math.ceil(
kesehatanArticles.length / itemsPerPage
);
const paginatedArticles = kesehatanArticles.slice(
(page - 1) * itemsPerPage,
page * itemsPerPage
);
function truncateText(text: string, wordLimit: number) {
const words = text.split(" ");
if (words.length <= wordLimit) return text;
return words.slice(0, wordLimit).join(" ") + "...";
}
return (
<div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-8">
<div className="lg:col-span-2 space-y-10">
{paginatedArticles.map((item) => (
<div key={item.id}>
<Link
className="flex flex-col md:flex-row gap-6"
href={`/details/${item?.slug}`}
>
<div className="relative w-full md:w-1/2 h-64">
<Image
src={item.thumbnailUrl || "/placeholder.png"}
alt={item.title}
fill
className="object-cover rounded"
/>
<span className="absolute top-3 left-3 bg-yellow-400 text-black px-3 py-1 text-xs font-bold">
{item.categories[0]?.title || "Pembangunan"}
</span>
</div>
{/* Content */}
<div className="flex-1">
<h2 className="text-xl font-bold text-[#16324F] hover:text-green-600 cursor-pointer">
{item.title}
</h2>
<div className="text-sm text-gray-600 mt-2">
BY{" "}
<span className="text-green-600 font-semibold">
{item?.customCreatorName || item.createdByName || "Admin"}
</span>{" "}
• {new Date(item.createdAt).toLocaleDateString("id-ID")}
</div>
<p className="mt-3 text-gray-700">
{truncateText(item.description, 20)}
</p>
<button className="mt-4 px-4 py-2 border border-gray-400 text-gray-700 hover:bg-black hover:text-white transition">
READ MORE
</button>
</div>
</Link>
</div>
))}
{/* Pagination */}
<div className="flex items-center justify-center gap-2 mt-6">
<button
onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
disabled={page === 1}
className="px-3 py-1 border"
>
&lt;
</button>
{Array.from({ length: calculatedTotalPage }, (_, i) => i + 1)
.filter((p) => {
return (
p === 1 ||
p === calculatedTotalPage ||
(p >= page - 1 && p <= page + 1)
);
})
.map((p, idx, arr) => {
const prev = arr[idx - 1];
const showEllipsis = prev && p - prev > 1;
return (
<span key={p} className="flex items-center">
{showEllipsis && <span className="px-2">...</span>}
<button
onClick={() => setPage(p)}
className={`px-3 py-1 ${
page === p ? "bg-green-600 text-white" : "border"
}`}
>
{p}
</button>
</span>
);
})}
<button
onClick={() =>
setPage((prev) => Math.min(prev + 1, calculatedTotalPage))
}
disabled={page === calculatedTotalPage}
className="px-3 py-1 border"
>
&gt;
</button>
</div>
</div>
<div className="space-y-6">
<div className="w-full h-[400px] relative">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
<div>
<h3 className="text-lg font-semibold mb-2">Connect with us</h3>
<div className="h-1 w-20 bg-green-600 mb-4"></div>
<div className="grid grid-cols-3 gap-2">
<div className="bg-blue-500 text-white text-center p-3">
<p className="text-xl font-bold">138</p>
<p className="text-sm">Followers</p>
</div>
<div className="bg-red-600 text-white text-center p-3">
<p className="text-xl font-bold">205k</p>
<p className="text-sm">Subscribers</p>
</div>
<div className="bg-yellow-400 text-black text-center p-3">
<p className="text-xl font-bold">23.9k</p>
<p className="text-sm">Followers</p>
</div>
</div>
</div>
<div>
<div className="flex gap-4 border-b">
{["trending", "comments", "latest"].map((tab) => (
<button
key={tab}
className={`pb-2 capitalize ${
activeTab === tab
? "border-b-2 border-green-600 text-green-600"
: "text-gray-600"
}`}
onClick={() => {
setPage(1);
setActiveTab(tab);
}}
>
{tab}
</button>
))}
</div>
<div className="mt-4 space-y-4">
{articles.slice(0, 5).map((item) => (
<div key={item.id} className="flex gap-3 items-center">
<Link
className="flex gap-3 items-center"
href={`/details/${item?.slug}`}
>
<Image
src={item.thumbnailUrl || "/no-image.jpg"}
alt={item.title}
width={80}
height={60}
className="object-cover rounded"
/>
<div>
<h3 className="font-semibold text-sm">{item.title}</h3>
<p className="text-xs text-gray-500">
{new Date(item.createdAt).toLocaleDateString()}
</p>
</div>
</Link>
</div>
))}
</div>
<div className="">
<h2 className="text-sm border-b-2 border-gray-300 font-bold mb-4">
Recommended
</h2>
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/details/${articles[0]?.slug}`}>
<Image
src={
articles[0]?.thumbnailUrl ||
articles[0]?.files?.[0]?.fileUrl ||
"/default-image.jpg"
}
alt={"articles[0]?.title"}
fill
sizes="(max-width: 1024px) 100vw, 33vw"
className="object-cover"
/>
<div className="absolute inset-0 bg-black/30" />
<div className="absolute bottom-0.5 left-2 text-white">
<h3 className=" font-semibold text-base mb-1">
{articles[0]?.title}
</h3>
<p className=" text-xs mb-2 flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
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 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
/>
</g>
</svg>{" "}
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
}
)}
</p>
</div>
</Link>
</div>
<div className="space-y-5">
{articles?.slice(1, 4).map((article, index) => (
<div key={index}>
<Link
className="flex gap-3"
href={`/details/${article?.slug}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image
src={
article?.thumbnailUrl ||
article?.files?.[0]?.fileUrl ||
"/default-image.jpg"
}
alt={"article?.title"}
fill
className="object-cover"
/>
</div>
<div>
<h4 className="text-sm font-semibold mb-3">
{article?.title}
</h4>
<p className="text-xs text-gray-500 flex gap-2 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
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 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
/>
</g>
</svg>{" "}
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
}
)}
</p>
</div>
</Link>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

63
components/landing-page/latest-and-popular.tsx
View File

@ -171,17 +171,14 @@ type Article = {
title: string;
description: string;
categoryName: string;
publishedAt: string;
createdAt: string;
createdByName: string;
slug: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_url: string;
file_alt: string;
}[];
};
@ -240,7 +237,7 @@ export default function LatestandPopular() {
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
const currentArticles = articles.slice(
startIndex,
startIndex + ITEMS_PER_PAGE,
startIndex + ITEMS_PER_PAGE
);
return (
<section className="bg-white py-10 px-4 md:px-10 w-full">
@ -253,12 +250,12 @@ export default function LatestandPopular() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
{currentArticles.map((article, index) => (
<div key={index}>
<Link href={`/details/${article?.slug}`}>
<Link href={`/detail/${article?.id}`}>
<div className="relative w-full aspect-video mb-3">
<Image
src={
article?.thumbnailUrl ||
article?.files?.[0]?.fileUrl ||
article?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={article?.title || "No title"}
@ -283,7 +280,7 @@ export default function LatestandPopular() {
<div className="text-xs text-[#999999] mb-2 flex items-center gap-2">
by{" "}
<span className="text-[#31942E]">
{article?.customCreatorName || article.createdByName}
{article.createdByName}
</span>{" "}
|{" "}
<div className="text-xs mt-1.5 text-[#A0A0A0] space-x-2 flex items-center">
@ -302,18 +299,14 @@ export default function LatestandPopular() {
/>
</g>
</svg>{" "}
{new Date(article?.publishedAt)
.toLocaleString("id-ID", {
{new Date(article?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
}
)}
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
@ -374,11 +367,11 @@ export default function LatestandPopular() {
</h2>
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/details/${articles[0]?.slug}`}>
<Link href={`/detail/${articles[0]?.id}`}>
<Image
src={
articles[0]?.thumbnailUrl ||
articles[0]?.files?.[0]?.fileUrl ||
articles[0]?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={"articles[0]?.title"}
@ -406,18 +399,14 @@ export default function LatestandPopular() {
/>
</g>
</svg>{" "}
{new Date(articles[0]?.publishedAt)
.toLocaleString("id-ID", {
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
}
)}
</p>
</div>
</Link>
@ -428,13 +417,13 @@ export default function LatestandPopular() {
<div key={index} className="flex gap-3">
<Link
className="flex gap-3"
href={`/details/${article?.slug}`}
href={`/detail/${article?.id}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image
src={
article?.thumbnailUrl ||
article?.files?.[0]?.fileUrl ||
article?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={"article?.title"}
@ -461,18 +450,14 @@ export default function LatestandPopular() {
/>
</g>
</svg>{" "}
{new Date(articles[0]?.publishedAt)
.toLocaleString("id-ID", {
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
}
)}
</p>
</div>
</Link>

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

@ -1,126 +0,0 @@
"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-green-600 mt-1 rounded"></div>
</div>
{/* GRID 4 KOLOM */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
{articles.slice(0, 4).map((item) => (
<Link href={`/details/${item.slug}`} key={item.id}>
<div>
{/* GAMBAR */}
<div className="relative w-full h-56 rounded-lg overflow-hidden">
<Image
src={item.thumbnailUrl || "/placeholder.jpg"}
alt={item.title}
fill
className="object-cover"
/>
{/* BADGE CATEGORY DI DALAM GAMBAR */}
<div className="absolute bottom-2 left-2">
<span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
{item.categoryName || "Kategori"}
</span>
</div>
</div>
{/* JUDUL */}
<h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
{item.title}
</h3>
{/* AUTHOR + DATE */}
<div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
<span className="font-semibold">
By {item.customCreatorName || item.createdByName || "Admin"}
</span>
<span className="text-yellow-500">-</span>
<span>
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</span>
</div>
</div>
</Link>
))}
</div>
<div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
<Image
src="/image-kolom.png"
alt="Kolom PPS"
fill
className="object-contain bg-white"
/>
</div>
</div>
</section>
);
}

90
components/landing-page/latest.tsx
View File

@ -176,17 +176,15 @@ type Article = {
id: number;
title: string;
description: string;
publishedAt: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_url: string;
file_alt: string;
}[];
};
@ -251,9 +249,9 @@ export default function Latest({ id }: { id: number }) {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 ">
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/details/${articles[0]?.slug}`}>
<Link href={`/detail/${articles[0]?.id}`}>
<Image
src={articles[0]?.files?.[0]?.fileUrl || "/nodata.png"}
src={articles[0]?.files?.[0]?.file_url || "/nodata.png"}
alt={"articles[0]?.title"}
fill
sizes="(max-width: 1024px) 100vw, 33vw"
@ -279,18 +277,14 @@ export default function Latest({ id }: { id: number }) {
/>
</g>
</svg>{" "}
{new Date(articles[0]?.publishedAt)
.toLocaleString("id-ID", {
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
}
)}
</p>
</div>
</Link>
@ -301,7 +295,7 @@ export default function Latest({ id }: { id: number }) {
<div key={index} className="flex gap-3">
<Link
className="flex gap-3"
href={`/details/${article?.slug}`}
href={`/detail/${article?.id}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image
@ -330,18 +324,14 @@ export default function Latest({ id }: { id: number }) {
/>
</g>
</svg>{" "}
{new Date(articles[0]?.publishedAt)
.toLocaleString("id-ID", {
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
}
)}
</p>
</div>
</Link>
@ -352,10 +342,10 @@ export default function Latest({ id }: { id: number }) {
<div className="w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/details/${articles[0]?.slug}`}>
<Link href={`/detail/${articles[0]?.id}`}>
<Image
src={
articles[0]?.files?.[0]?.fileUrl || "/default-image.jpg"
articles[0]?.files?.[0]?.file_url || "/default-image.jpg"
}
alt={"articles[0]?.title"}
fill
@ -382,18 +372,14 @@ export default function Latest({ id }: { id: number }) {
/>
</g>
</svg>{" "}
{new Date(articles[0]?.publishedAt)
.toLocaleString("id-ID", {
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
}
)}
</p>
</div>
</Link>
@ -404,7 +390,7 @@ export default function Latest({ id }: { id: number }) {
<div key={index} className="flex gap-3">
<Link
className="flex gap-3"
href={`/details/${article?.slug}`}
href={`/detail/${article?.id}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image
@ -433,18 +419,14 @@ export default function Latest({ id }: { id: number }) {
/>
</g>
</svg>{" "}
{new Date(articles[0]?.publishedAt)
.toLocaleString("id-ID", {
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
}
)}
</p>
</div>
</Link>
@ -492,10 +474,10 @@ export default function Latest({ id }: { id: number }) {
<div className="space-y-8">
{popularPosts.slice(1, 5).map((post, index) => (
<div key={index} className="space-y-3">
<Link href={`/details/${post?.slug}`}>
<Link href={`/detail/${post?.id}`}>
<div
className={`flex gap-4 ${
post.files?.[0]?.fileUrl
post.files?.[0]?.file_url
? "flex-col md:flex-row"
: "flex-col"
}`}
@ -519,18 +501,14 @@ export default function Latest({ id }: { id: number }) {
/>
</g>
</svg>{" "}
{new Date(articles[0]?.publishedAt)
.toLocaleString("id-ID", {
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
}
)}
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"

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

@ -1,170 +1,229 @@
"use client";
import { Search } from "lucide-react";
import Image from "next/image";
import { useState } from "react";
import Link from "next/link";
import { Menu, Lock, Search } from "lucide-react";
import { usePathname } from "next/navigation";
export default function Navbar() {
const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleMenu = () => setIsOpen(!isOpen);
const pathname = usePathname();
const isActive = (href: any) => {
return pathname === href || pathname.startsWith(href + "/");
const navLinks = [
{ href: "/", label: "BERANDA" },
{ href: "/category/development", label: "PEMBANGUNAN" },
{ href: "/category/health", label: "KESEHATAN" },
{ href: "/category/citizen-news", label: "BERITA WARGA" },
];
const isActive = (href: string) => {
if (href === "/") {
return pathname === "/";
}
return pathname.startsWith(href);
};
return (
<div className="w-full bg-white py-4 border-b">
<div className="max-w-screen-xl mx-auto flex flex-col justify-between px-4">
{/* Left: Logo */}
<div className="flex flex-row justify-between mb-3">
<div className="flex items-center">
<Image
src="/mikul-news-logo.png"
alt="Kritik Tajam Logo"
width={140}
height={100}
/>
</div>
<div className="flex items-center gap-6">
{/* Social Icons */}
<div className="hidden md:flex items-center gap-5 text-black text-xl">
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
/>
</svg>
</Link>
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
/>
</svg>
</Link>
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
/>
</svg>
</Link>
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
/>
</svg>
</Link>
</div>
<nav className="w-full bg-white shadow-md">
<div className="max-w-7xl mx-auto py-2 px-0 md:px-4 flex flex-col md:flex-row justify-end items-start md:justify-between md:items-center gap-4 bg-[#308A2E]">
<div className="flex items-center gap-4 w-full md:w-auto mx-3 md:mx-5">
<div className="flex gap-3 text-xs mx-3 text-white">
<Link href="/about" className="hover:text-yellow-400 ">
About
</Link>
<Link href="/advertise" className="hover:text-yellow-400">
Advertise
</Link>
<Link href="/privacy" className="hover:text-yellow-400">
Privacy & Policy
</Link>
<Link href="/contact" className="hover:text-yellow-400">
Contact
</Link>
</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-green-500 underline"
: "text-black hover:text-green-500"
}
>
Beranda
</Link>
<Link
href="/category/citizen-news"
className={
isActive("/category/citizen-news")
? "text-green-500 underline"
: "text-black hover:text-green-500"
}
>
Berita Warga
</Link>
<Link
href="/category/development"
className={
isActive("/category/development")
? "text-green-500 underline"
: "text-black hover:text-green-500"
}
>
Pembangunan
</Link>
<Link
href="/category/health"
className={
isActive("/category/health")
? "text-green-500 underline"
: "text-black hover:text-green-500"
}
>
Kesehatan
</Link>
</nav>
<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">
<div className="flex items-center gap-5 text-sm whitespace-nowrap text-white mx-5">
<div className="hidden md:block min-w-fit whitespace-nowrap text-white text-xs">
{new Date().toLocaleDateString("id-ID", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
})}
</div>
<div className="flex gap-3 text-white text-lg">
<Link href="#" aria-label="Facebook">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
width="15"
height="15"
viewBox="0 0 24 24"
strokeWidth={2}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
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="#" aria-label="Twitter">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
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="#" aria-label="Google" className="text-[#F5F5F5]">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
// fill-rule="evenodd"
d="M7.796 14.333v-2.618h7.211c.066.382.12.763.12 1.265c0 4.364-2.923 7.462-7.33 7.462A7.63 7.63 0 0 1 .16 12.806a7.63 7.63 0 0 1 7.636-7.637c2.062 0 3.786.753 5.117 1.997L10.84 9.162c-.567-.546-1.56-1.178-3.044-1.178c-2.607 0-4.734 2.16-4.734 4.822s2.127 4.821 4.734 4.821c3.022 0 4.157-2.17 4.331-3.294zm13.27-2.6H23.2v2.134h-2.133V16h-2.134v-2.133H16.8v-2.134h2.133V9.6h2.134z"
// clip-rule="evenodd"
/>
</svg>
</Link>
<Link href="#" aria-label="Pinterest">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
viewBox="0 0 24 24"
>
<defs>
<path
id="akarIconsPinterestFill0"
fill="#fff"
d="M0 0h24v24H0z"
/>
</defs>
<g fill="none">
<g
// clip-path="url(#akarIconsPinterestFill1)"
>
<g
// clip-path="url(#akarIconsPinterestFill2)"
>
<path
fill="currentColor"
d="M0 12c0 5.123 3.211 9.497 7.73 11.218c-.11-.937-.227-2.482.025-3.566c.217-.932 1.401-5.938 1.401-5.938s-.357-.715-.357-1.774c0-1.66.962-2.9 2.161-2.9c1.02 0 1.512.765 1.512 1.682c0 1.025-.653 2.557-.99 3.978c-.281 1.189.597 2.159 1.769 2.159c2.123 0 3.756-2.239 3.756-5.471c0-2.861-2.056-4.86-4.991-4.86c-3.398 0-5.393 2.549-5.393 5.184c0 1.027.395 2.127.889 2.726a.36.36 0 0 1 .083.343c-.091.378-.293 1.189-.332 1.355c-.053.218-.173.265-.4.159c-1.492-.694-2.424-2.875-2.424-4.627c0-3.769 2.737-7.229 7.892-7.229c4.144 0 7.365 2.953 7.365 6.899c0 4.117-2.595 7.431-6.199 7.431c-1.211 0-2.348-.63-2.738-1.373c0 0-.599 2.282-.744 2.84c-.282 1.084-1.064 2.456-1.549 3.235C9.584 23.815 10.77 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0S0 5.373 0 12"
/>
</g>
</g>
<defs>
<clipPath id="akarIconsPinterestFill1">
<use href="#akarIconsPinterestFill0" />
</clipPath>
<clipPath id="akarIconsPinterestFill2">
<use href="#akarIconsPinterestFill0" />
</clipPath>
</defs>
</g>
</svg>
</Link>
<Link href="#" aria-label="Vk">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
// fill-rule="evenodd"
d="M23.45 5.948c.166-.546 0-.948-.795-.948H20.03c-.668 0-.976.347-1.143.73c0 0-1.335 3.196-3.226 5.272c-.612.602-.89.793-1.224.793c-.167 0-.418-.191-.418-.738V5.948c0-.656-.184-.948-.74-.948H9.151c-.417 0-.668.304-.668.593c0 .621.946.765 1.043 2.513v3.798c0 .833-.153.984-.487.984c-.89 0-3.055-3.211-4.34-6.885C4.45 5.288 4.198 5 3.527 5H.9c-.75 0-.9.347-.9.73c0 .682.89 4.07 4.145 8.551C6.315 17.341 9.37 19 12.153 19c1.669 0 1.875-.368 1.875-1.003v-2.313c0-.737.158-.884.687-.884c.39 0 1.057.192 2.615 1.667C19.11 18.216 19.403 19 20.405 19h2.625c.75 0 1.126-.368.91-1.096c-.238-.724-1.088-1.775-2.215-3.022c-.612-.71-1.53-1.475-1.809-1.858c-.389-.491-.278-.71 0-1.147c0 0 3.2-4.426 3.533-5.929"
// clip-rule="evenodd"
/>
</svg>
</Link>
<Link href="#" aria-label="Wifi">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M12 21q-1.05 0-1.775-.725T9.5 18.5t.725-1.775T12 16t1.775.725t.725 1.775t-.725 1.775T12 21m-5.65-5.65l-2.1-2.15q1.475-1.475 3.463-2.337T12 10t4.288.875t3.462 2.375l-2.1 2.1q-1.1-1.1-2.55-1.725T12 13t-3.1.625t-2.55 1.725M2.1 11.1L0 9q2.3-2.35 5.375-3.675T12 4t6.625 1.325T24 9l-2.1 2.1q-1.925-1.925-4.462-3.012T12 7T6.563 8.088T2.1 11.1"
/>
</svg>
</button>
<button className="p-2 border rounded-full">
<Search size={15} />
</button>
<Link href={"/auth"}>
<button className="bg-green-600 text-white px-5 py-2 rounded-full text-sm font-semibold">
LOGIN
</button>
</Link>
</div>
<Link
href="/auth"
className="hover:underline flex items-center gap-1"
>
<Lock className="w-3 h-3" />
Login
</Link>
</div>
</div>
</div>
<div className="bg-[#31942E] text-white">
<div className="flex items-start justify-start md:justify-center md:items-center px-4 py-3 md:px-8 md:py-4">
{/* Toggle Menu (Mobile Only) */}
<button
className="md:hidden flex items-center"
onClick={toggleMenu}
aria-label="Toggle menu"
>
<Menu className="h-6 w-6 text-white" />
</button>
{/* Navigation Links (Desktop Only) */}
<div className="hidden md:flex items-center md:gap-x-32 font-semibold text-sm">
{navLinks.map((link, idx) => (
<Link
key={idx}
href={link.href}
className={`pl-4 pr-4 ${
isActive(link.href)
? "text-yellow-400"
: "hover:text-yellow-400 text-white"
}`}
>
{link.label}
</Link>
))}
<Search className="w-5 h-5 hover:text-yellow-400 cursor-pointer ml-4" />
</div>
</div>
{isOpen && (
<div className="md:hidden px-4 pb-4 flex flex-col gap-2 font-semibold text-sm bg-[#31942E]">
{navLinks.map((link, idx) => (
<Link
key={idx}
href={link.href}
className={`${
isActive(link.href)
? "text-yellow-400"
: "hover:text-yellow-400 text-white"
}`}
>
{link.label}
</Link>
))}
</div>
)}
</div>
</nav>
);
}
};
export default Navbar;

266
components/landing-page/news.tsx
View File

@ -1,5 +1,4 @@
"use client";
import { getAdvertise } from "@/service/advertisement";
import { getListArticle } from "@/service/article";
import { Clock } from "lucide-react";
import Image from "next/image";
@ -10,36 +9,24 @@ type postsData = {
id: number;
title: string;
description: string;
publishedAt: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
fileUrl: string;
file_url: string;
file_alt: string;
}[];
};
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function Beranda() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [posts, setPosts] = useState<postsData[]>([]);
const [showData, setShowData] = useState("100");
const [showData, setShowData] = useState("5");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -47,36 +34,6 @@ export default function Beranda() {
endDate: null,
});
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
useEffect(() => {
initStateAdver();
}, []);
async function initStateAdver() {
const req = {
limit: 100,
page: 1,
sort: "desc",
sortBy: "created_at",
isPublish: true,
};
try {
const res = await getAdvertise(req);
const data: Advertise[] = res?.data?.data || [1];
// filter iklan dengan placement = "banner"
const banner = data.find((ad) => ad.placement === "banner");
if (banner) {
setBannerAd(banner);
}
} catch (err) {
console.error("Error fetching advertisement:", err);
}
}
useEffect(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
@ -106,187 +63,60 @@ export default function Beranda() {
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-1 gap-2 bg-white border-b-2 pt-2 ">
<h2 className="text-sm font-bold">Pembangunan</h2>
<div className="flex flex-wrap gap-2 text-xs text-gray-600">
<Link href={"/category/development"}>
<button className="hover:text-green-500">ALL</button>
</Link>
<button className="hover:text-green-500 text-green-500">
Pembangunan
</button>
<button className="hover:text-green-500">ALL</button>
<button className="hover:text-green-500">Pembangunan</button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 pt-4 ">
{posts
.filter((post) =>
post.categories?.some(
(category) => category.title.toLowerCase() === "pembangunan",
),
)
.slice(0, 6) // Ambil 4 artikel pertama setelah difilter
.map((post, index) => (
<div key={index} className="bg-white overflow-hidden">
<Link href={`/details/${post?.slug}`}>
<div className="relative">
<Image
src={
post.thumbnailUrl ||
post?.files?.[0]?.fileUrl ||
"/default-image.jpg"
}
alt={post.title}
width={500}
height={300}
className="w-full h-52 md:h-56 object-cover"
/>
<div className="absolute inset-0 bg-black/20" />
<span className="absolute top-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
{post.categories?.[0]?.title}
</span>
<div className="p-3 md:p-2 absolute bottom-1 left-1 text-white">
<h3 className="font-bold text-sm md:text-base leading-snug mb-1">
{post.title}
</h3>
{posts.slice(1, 5).map((posts, index) => (
<div key={index} className="bg-white overflow-hidden">
<Link href={`/detail/${posts?.id}`}>
<div className="relative">
<Image
src={
posts.thumbnailUrl ||
posts?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={posts.title}
width={500}
height={300}
className="w-full h-52 md:h-56 object-cover"
/>
<div className="absolute inset-0 bg-black/20" />
<span className="absolute top-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
{posts.categories?.[0]?.title}
</span>
<div className="p-3 md:p-2 absolute bottom-1 left-1 text-white">
<h3 className="font-bold text-sm md:text-base leading-snug mb-1">
{posts.title}
</h3>
<div className="text-xs flex items-center gap-2">
<Clock className="w-3 h-3" />
<span>
{post?.customCreatorName || post.createdByName} -{" "}
{new Date(post.publishedAt)
.toLocaleString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
</span>
</div>
<div className="text-xs flex items-center gap-2">
<Clock className="w-3 h-3 " />
<span className=" ">
{posts.createdByName} -{" "}
{new Date(posts.createdAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</span>
</div>
</div>
</Link>
</div>
))}
</div>
</Link>
</div>
))}
</div>
<div className="relative mt-10 mb-2 flex justify-center mx-8 border my-8 h-[350px] overflow-hidden bg-white">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/image-kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-1 gap-2 bg-white border-b-2 pt-2 ">
<h2 className="text-sm font-bold">Kesehatan</h2>
<div className="flex flex-wrap gap-2 text-xs text-gray-600">
<Link href={"/category/health"}>
<button className="hover:text-green-500">ALL</button>
</Link>
<button className="hover:text-green-500 text-green-500">
Kesehatan
</button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 pt-4 ">
{posts
.filter((post) =>
post.categories?.some(
(category) => category.title.toLowerCase() === "kesehatan",
),
)
.slice(0, 6) // Ambil 4 artikel pertama setelah difilter
.map((post, index) => (
<div key={index} className="bg-white overflow-hidden">
<Link href={`/details/${post?.slug}`}>
<div className="relative">
<Image
src={
post.thumbnailUrl ||
post?.files?.[0]?.fileUrl ||
"/default-image.jpg"
}
alt={post.title}
width={500}
height={300}
className="w-full h-52 md:h-56 object-cover"
/>
<div className="absolute inset-0 bg-black/20" />
<span className="absolute top-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
{post.categories?.[0]?.title}
</span>
<div className="p-3 md:p-2 absolute bottom-1 left-1 text-white">
<h3 className="font-bold text-sm md:text-base leading-snug mb-1">
{post.title}
</h3>
<div className="text-xs flex items-center gap-2">
<Clock className="w-3 h-3" />
<span>
{post?.customCreatorName || post.createdByName} -{" "}
{new Date(post.createdAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</span>
</div>
</div>
</div>
</Link>
</div>
))}
</div>
<div className="relative mt-10 mb-2 flex justify-center mx-8 border my-8 h-[350px] overflow-hidden bg-white">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/image-kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-cover"
/>
</div>
</section>
);

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

@ -1,126 +0,0 @@
"use client";
import { getListArticle } from "@/service/article";
import { ChevronDown } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
type Article = {
id: number;
title: string;
description: string;
categoryName: string;
slug: string;
createdAt: string;
publishedAt: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: { title: string }[];
files: { fileUrl: string; file_alt: string }[];
};
export default function OpinionNews() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("6");
const [search] = useState("");
const [selectedCategories] = useState<any>("");
const [startDateValue] = useState({
startDate: null,
endDate: null,
});
useEffect(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
async function initState() {
const req = {
limit: showData,
page,
search,
categorySlug: Array.from(selectedCategories).join(","),
sort: "desc",
isPublish: true,
sortBy: "created_at",
};
try {
const res = await getListArticle(req);
setArticles(res?.data?.data || []);
setTotalPage(res?.data?.meta?.totalPage || 1);
} catch (err) {
console.error("Error fetching articles:", err);
}
}
return (
<section className="max-w-screen-xl mx-auto px-4 py-10">
<div className="">
{/* TITLE */}
<div className="mb-4">
<h2 className="text-xl font-black text-[#000]">BERITA OPINI</h2>
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
</div>
{/* GRID 4 KOLOM */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
{articles.slice(0, 4).map((item) => (
<Link href={`/details/${item.slug}`} key={item.id}>
<div>
{/* GAMBAR */}
<div className="relative w-full h-56 rounded-lg overflow-hidden">
<Image
src={item.thumbnailUrl || "/placeholder.jpg"}
alt={item.title}
fill
className="object-cover"
/>
{/* BADGE CATEGORY DI DALAM GAMBAR */}
<div className="absolute bottom-2 left-2">
<span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
{item.categoryName || "Kategori"}
</span>
</div>
</div>
{/* JUDUL */}
<h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
{item.title}
</h3>
{/* AUTHOR + DATE */}
<div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
<span className="font-semibold">
By {item.customCreatorName || item.createdByName || "Admin"}
</span>
<span className="text-yellow-500">-</span>
<span>
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</span>
</div>
</div>
</Link>
))}
</div>
<div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
<Image
src="/image-kolom.png"
alt="Kolom PPS"
fill
className="object-contain bg-white"
/>
</div>
</div>
</section>
);
}

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

@ -1,151 +0,0 @@
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>
);
}

77
components/main/dashboard/dashboard-container.tsx
View File

@ -106,7 +106,7 @@ export default function DashboardContainer() {
async function initState() {
const req = {
limit: "5",
limit: "4",
page: page,
search: "",
};
@ -195,7 +195,7 @@ export default function DashboardContainer() {
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6">
{/* User Profile Card */}
<motion.div
<motion.div
className="col-span-1 md:col-span-2 bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@ -207,15 +207,11 @@ export default function DashboardContainer() {
<p className="text-slate-600">{username}</p>
<div className="flex space-x-6 pt-2">
<div className="text-center">
<p className="text-2xl font-bold text-blue-600">
{summary?.totalToday}
</p>
<p className="text-2xl font-bold text-blue-600">{summary?.totalToday}</p>
<p className="text-sm text-slate-500">Today</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-purple-600">
{summary?.totalThisWeek}
</p>
<p className="text-2xl font-bold text-purple-600">{summary?.totalThisWeek}</p>
<p className="text-sm text-slate-500">This Week</p>
</div>
</div>
@ -227,7 +223,7 @@ export default function DashboardContainer() {
</motion.div>
{/* Total Posts */}
<motion.div
<motion.div
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@ -238,16 +234,14 @@ export default function DashboardContainer() {
<DashboardSpeecIcon />
</div>
<div>
<p className="text-3xl font-bold text-slate-800">
{summary?.totalAll}
</p>
<p className="text-3xl font-bold text-slate-800">{summary?.totalAll}</p>
<p className="text-sm text-slate-500">Total Posts</p>
</div>
</div>
</motion.div>
{/* Total Views */}
<motion.div
<motion.div
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@ -258,16 +252,14 @@ export default function DashboardContainer() {
<DashboardConnectIcon />
</div>
<div>
<p className="text-3xl font-bold text-slate-800">
{summary?.totalViews}
</p>
<p className="text-3xl font-bold text-slate-800">{summary?.totalViews}</p>
<p className="text-sm text-slate-500">Total Views</p>
</div>
</div>
</motion.div>
{/* Total Shares */}
<motion.div
<motion.div
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@ -278,16 +270,14 @@ export default function DashboardContainer() {
<DashboardShareIcon />
</div>
<div>
<p className="text-3xl font-bold text-slate-800">
{summary?.totalShares}
</p>
<p className="text-3xl font-bold text-slate-800">{summary?.totalShares}</p>
<p className="text-sm text-slate-500">Total Shares</p>
</div>
</div>
</motion.div>
{/* Total Comments */}
<motion.div
<motion.div
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@ -298,9 +288,7 @@ export default function DashboardContainer() {
<DashboardCommentIcon size={40} />
</div>
<div>
<p className="text-3xl font-bold text-slate-800">
{summary?.totalComments}
</p>
<p className="text-3xl font-bold text-slate-800">{summary?.totalComments}</p>
<p className="text-sm text-slate-500">Total Comments</p>
</div>
</div>
@ -310,27 +298,20 @@ export default function DashboardContainer() {
{/* Content Section */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Analytics Chart */}
<motion.div
<motion.div
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6"
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.6 }}
>
<div className="flex justify-between items-center mb-6">
<h3 className="text-lg font-semibold text-slate-800">
Analytics Overview
</h3>
<h3 className="text-lg font-semibold text-slate-800">Analytics Overview</h3>
<div className="flex space-x-4">
{options.map((option) => (
<label
key={option.value}
className="flex items-center space-x-2"
>
<label key={option.value} className="flex items-center space-x-2">
<Checkbox
checked={analyticsView.includes(option.value)}
onCheckedChange={(checked) =>
handleChange(option.value, checked as boolean)
}
onCheckedChange={(checked) => handleChange(option.value, checked as boolean)}
/>
<span className="text-sm text-slate-600">{option.label}</span>
</label>
@ -338,32 +319,30 @@ export default function DashboardContainer() {
</div>
</div>
<div className="h-80">
<ApexChartColumn
type="monthly"
date={`${new Date().getMonth() + 1} ${new Date().getFullYear()}`}
view={analyticsView}
/>
</div>
<ApexChartColumn
type="monthly"
date={`${new Date().getMonth() + 1} ${new Date().getFullYear()}`}
view={analyticsView}
/>
</div>
</motion.div>
{/* Recent Articles */}
<motion.div
<motion.div
className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6"
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.7 }}
>
<div className="flex justify-between items-center mb-6">
<h3 className="text-lg font-semibold text-slate-800">
Recent Articles
</h3>
{/* <Link href="/admin/article/create">
<h3 className="text-lg font-semibold text-slate-800">Recent Articles</h3>
<Link href="/admin/article/create">
<Button className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white shadow-lg">
Create Article
</Button>
</Link> */}
</Link>
</div>
<div className="space-y-4 max-h-96 overflow-y-auto scrollbar-thin">
{article?.map((list: any) => (
<motion.div
@ -390,7 +369,7 @@ export default function DashboardContainer() {
</motion.div>
))}
</div>
<div className="mt-6 flex justify-center">
<CustomPagination
totalPage={totalPage}

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

@ -10,7 +10,7 @@ import {
} from "@/components/icons";
import { close, error, loading, success, successToast } from "@/config/swal";
import { Article } from "@/types/globals";
import { convertDateFormat, formatDate } from "@/utils/global";
import { convertDateFormat } from "@/utils/global";
import Link from "next/link";
import { Key, useCallback, useEffect, useState } from "react";
import Swal from "sweetalert2";
@ -46,7 +46,6 @@ import {
TableCell,
} from "@/components/ui/table";
import CustomPagination from "../layout/custom-pagination";
import DatePicker from "react-datepicker";
const columns = [
{ name: "No", uid: "no" },
@ -54,18 +53,17 @@ const columns = [
{ name: "Banner", uid: "isBanner" },
{ name: "Kategori", uid: "category" },
{ name: "Tanggal Unggah", uid: "createdAt" },
{ name: "Kreator", uid: "customCreatorName" },
{ name: "Kreator", uid: "createdByName" },
{ name: "Status", uid: "isPublish" },
{ name: "Aksi", uid: "actions" },
];
const columnsOtherRole = [
{ name: "No", uid: "no" },
{ name: "Judul", uid: "title" },
{ name: "Source", uid: "source" },
{ name: "Kategori", uid: "category" },
{ name: "Tanggal Unggah", uid: "createdAt" },
{ name: "Kreator", uid: "customCreatorName" },
{ name: "Status", uid: "publishStatus" },
{ name: "Kreator", uid: "createdByName" },
{ name: "Status", uid: "isPublish" },
{ name: "Aksi", uid: "actions" },
];
@ -86,10 +84,7 @@ export default function ArticleTable() {
const [search, setSearch] = useState("");
const [categories, setCategories] = useState<any>([]);
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [selectedCategoryId, setSelectedCategoryId] = useState<any>("");
const [selectedSource, setSelectedSource] = useState<any>("");
const [selectedStatus, setSelectedStatus] = useState<string>("");
const [dateRange, setDateRange] = useState<any>({
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
@ -103,45 +98,24 @@ export default function ArticleTable() {
const res = await getArticleByCategory();
const data = res?.data?.data;
setCategories(data);
console.log("category", data);
}
useEffect(() => {
initState();
}, [
page,
showData,
search,
selectedCategoryId,
selectedSource,
dateRange,
selectedStatus,
]);
async function initState() {
loading();
const req = {
limit: showData,
page: page,
search: search,
category: selectedCategoryId || "",
source: selectedSource || "",
isPublish:
selectedStatus !== "" ? selectedStatus === "publish" : undefined,
startDate: formatDate(dateRange.startDate),
endDate: formatDate(dateRange.endDate),
categorySlug: Array.from(selectedCategories).join(","),
sort: "desc",
sortBy: "created_at",
};
const res = await getArticlePagination(req);
let data = res.data?.data || [];
await getTableNumber(parseInt(showData), data);
await getTableNumber(parseInt(showData), res.data?.data);
setTotalPage(res?.data?.meta?.totalPage);
close();
}
// panggil ulang setiap state berubah
useEffect(() => {
initState();
@ -199,11 +173,11 @@ export default function ArticleTable() {
initState();
};
const copyUrlArticle = async (slug: any) => {
const copyUrlArticle = async (id: number, slug: string) => {
const url =
`${window.location.protocol}//${window.location.host}` +
"/details/" +
`${slug}`;
"/news/detail/" +
`${id}-${slug}`;
try {
await navigator.clipboard.writeText(url);
successToast("Success", "Article Copy to Clipboard");
@ -218,16 +192,7 @@ export default function ArticleTable() {
const cellValue = article[columnKey as keyof any];
switch (columnKey) {
case "customCreatorName":
return (
<p>
{article.customCreatorName &&
article.customCreatorName.trim() !== ""
? article.customCreatorName
: article.createdByName}
</p>
);
case "publishStatus":
case "isPublish":
return (
// <Chip
// className="capitalize "
@ -239,7 +204,7 @@ export default function ArticleTable() {
// {article.status}
// </div>
// </Chip>
<p>{article.publishStatus}</p>
<p>{article.isPublish ? "Publish" : "Draft"}</p>
);
case "isBanner":
return <p>{article.isBanner ? "Ya" : "Tidak"}</p>;
@ -264,7 +229,7 @@ export default function ArticleTable() {
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuItem
onClick={() => copyUrlArticle(article.slug)}
onClick={() => copyUrlArticle(article.id, article.slug)}
>
<CopyIcon className="mr-2 h-4 w-4" />
Copy Url Article
@ -280,15 +245,18 @@ export default function ArticleTable() {
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link
href={`/admin/article/edit/${article.id}`}
className="flex items-center"
>
<CreateIconIon className="mr-2 h-4 w-4" />
Edit
</Link>
</DropdownMenuItem>
{(username === "admin-mabes" ||
Number(userId) === article.createdById) && (
<DropdownMenuItem asChild>
<Link
href={`/admin/article/edit/${article.id}`}
className="flex items-center"
>
<CreateIconIon className="mr-2 h-4 w-4" />
Edit
</Link>
</DropdownMenuItem>
)}
{username === "admin-mabes" && (
<DropdownMenuItem
@ -303,10 +271,13 @@ export default function ArticleTable() {
</DropdownMenuItem>
)}
<DropdownMenuItem onClick={() => handleDelete(article.id)}>
<DeleteIcon className="mr-2 h-4 w-4 text-red-500" />
Delete
</DropdownMenuItem>
{(username === "admin-mabes" ||
Number(userId) === article.createdById) && (
<DropdownMenuItem onClick={() => handleDelete(article.id)}>
<DeleteIcon className="mr-2 h-4 w-4 text-red-500" />
Delete
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
</div>
@ -316,7 +287,7 @@ export default function ArticleTable() {
return cellValue;
}
},
[article, page],
[article, page]
);
let typingTimer: NodeJS.Timeout;
@ -375,78 +346,36 @@ export default function ArticleTable() {
<div className="flex flex-col gap-1 w-full lg:w-[230px]">
<p className="font-semibold text-sm">Kategori</p>
<Select
value={selectedCategoryId}
onValueChange={(value) => setSelectedCategoryId(value)} // simpan ID
value={selectedCategories}
onValueChange={(value) => setSelectedCategories(value)}
>
<SelectTrigger className="w-full text-sm border">
<SelectValue placeholder="Kategori" />
</SelectTrigger>
<SelectContent>
{categories
?.filter((category: any) => category.title != null)
?.filter((category: any) => category.slug != null)
.map((category: any) => (
<SelectItem
key={category.id}
value={category.id.toString()} // kirim ID, bukan title
>
<SelectItem key={category.slug} value={category.slug}>
{category.title}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex flex-col gap-1 w-full lg:w-[150px]">
<p className="font-semibold text-sm">Source</p>
<Select
value={selectedSource}
onValueChange={(value) => setSelectedSource(value)}
>
<SelectTrigger className="w-full text-sm border">
<SelectValue placeholder="Pilih Source" />
</SelectTrigger>
<SelectContent>
<SelectItem value="internal">INTERNAL</SelectItem>
<SelectItem value="external">EXTERNAL</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex flex-col gap-1 w-full lg:w-[150px]">
<p className="font-semibold text-sm">Status</p>
<Select
value={selectedStatus}
onValueChange={(value) => setSelectedStatus(value)}
>
<SelectTrigger className="w-full text-sm border">
<SelectValue placeholder="Pilih Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="publish">PUBLISH</SelectItem>
<SelectItem value="draft">DRAFT</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex flex-col gap-1 w-full lg:w-[240px]">
{/* <div className="flex flex-col gap-1 w-full lg:w-[240px]">
<p className="font-semibold text-sm">Tanggal</p>
<DatePicker
selectsRange
startDate={dateRange.startDate}
endDate={dateRange.endDate}
onChange={(update: [Date | null, Date | null]) => {
setDateRange({
startDate: update[0],
endDate: update[1],
});
}}
isClearable
dateFormat="dd/MM/yyyy"
className="z-50 w-full text-sm bg-transparent border border-gray-200 px-2 py-[6px] rounded-xl h-[40px] text-gray-600 dark:text-gray-300"
placeholderText="Pilih rentang tanggal"
<Datepicker
value={startDateValue}
displayFormat="DD/MM/YYYY"
onChange={(e: any) => setStartDateValue(e)}
inputClassName="z-50 w-full text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl h-[40px] text-gray-600 dark:text-gray-300"
/>
</div>
</div> */}
</div>
<div className="w-full overflow-x-hidden">
<div className="w-full overflow-x-auto">
<Table className="min-w-[1000px] w-full table-auto border text-sm">
<div className="w-full mx-auto overflow-x-hidden">
<Table className="w-full table-fixed border text-sm">
<TableHeader>
<TableRow>
{(username === "admin-mabes"
@ -455,18 +384,7 @@ export default function ArticleTable() {
).map((column) => (
<TableHead
key={column.uid}
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]"
}
`}
className="truncate bg-white dark:bg-black text-black dark:text-white border-b text-md"
>
{column.name}
</TableHead>
@ -483,17 +401,7 @@ export default function ArticleTable() {
).map((column) => (
<TableCell
key={column.uid}
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"
}
`}
className="truncate text-black dark:text-white max-w-[200px]"
>
{renderCell(item, column.uid)}
</TableCell>

8
components/ui/input.tsx
View File

@ -1,6 +1,6 @@
import * as React from "react";
import * as React from "react"
import { cn } from "@/lib/utils";
import { cn } from "@/lib/utils"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
@ -15,7 +15,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
)}
{...props}
/>
);
)
}
export { Input };
export { Input }

8
next.config.ts
View File

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

3006
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -27,7 +27,6 @@
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-switch": "^1.2.5",
"@radix-ui/react-tooltip": "^1.2.7",
"@tinymce/tinymce-react": "^6.2.1",
"@types/js-cookie": "^3.0.6",
"apexcharts": "^4.7.0",
"axios": "^1.10.0",
@ -39,12 +38,12 @@
"js-cookie": "^3.0.5",
"lightningcss": "^1.30.1",
"lucide-react": "^0.525.0",
"next": "^16.1.1",
"react": "^19.2.3",
"next": "15.3.4",
"react": "^19.0.0",
"react-apexcharts": "^1.7.0",
"react-datepicker": "^8.4.0",
"react-day-picker": "^9.7.0",
"react-dom": "^19.2.4",
"react-dom": "^19.0.0",
"react-dropzone": "^14.3.8",
"react-hook-form": "^7.59.0",
"react-password-checklist": "^1.8.1",

BIN
public/mikul-news-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
public/profile.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
public/yt-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

46
service/article.ts
View File

@ -1,11 +1,6 @@
import { PaginationRequest } from "@/types/globals";
import { httpGet } from "./http-config/http-base-services";
import {
httpDeleteInterceptor,
httpGetInterceptor,
httpPostInterceptor,
httpPutInterceptor,
} from "./http-config/http-interceptor-services";
import { httpDeleteInterceptor, httpGetInterceptor, httpPostInterceptor, httpPutInterceptor } from "./http-config/http-interceptor-services";
export async function getListArticle(props: PaginationRequest) {
const {
@ -21,14 +16,13 @@ export async function getListArticle(props: PaginationRequest) {
categorySlug,
isBanner,
} = props;
return await httpGet(
`/articles?limit=${limit}&page=${page}&isPublish=${
isPublish === undefined ? "" : isPublish
}&title=${search}&startDate=${startDate || ""}&endDate=${
endDate || ""
}&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
sort || "desc"
sort || "asc"
}&category=${categorySlug || ""}&isBanner=${isBanner || ""}`,
null
);
@ -46,20 +40,13 @@ export async function getArticlePagination(props: PaginationRequest) {
sort,
categorySlug,
isBanner,
isPublish,
source,
} = props;
return await httpGetInterceptor(
`/articles?limit=${limit}&page=${page}&title=${search}&startDate=${
startDate || ""
}&endDate=${endDate || ""}&categoryId=${category || ""}&source=${
source || ""
}&isPublish=${isPublish !== undefined ? isPublish : ""}&sortBy=${
sortBy || "created_at"
}&sort=${sort || "asc"}&category=${categorySlug || ""}&isBanner=${
isBanner || ""
}`
`/articles?limit=${limit}&page=${page}&title=${search}&startDate=${startDate || ""}&endDate=${
endDate || ""
}&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
sort || "asc"
}&category=${categorySlug || ""}&isBanner=${isBanner || ""}`
);
}
@ -94,11 +81,6 @@ export async function updateArticle(id: string, data: any) {
return await httpPutInterceptor(pathUrl, data);
}
export async function unPublishArticle(id: string, data: any) {
const pathUrl = `/articles/${id}/unpublish`;
return await httpPutInterceptor(pathUrl, data);
}
export async function getArticleById(id: any) {
const headers = {
"content-type": "application/json",
@ -106,13 +88,6 @@ export async function getArticleById(id: any) {
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) {
const headers = {
"content-type": "application/json",
@ -136,13 +111,6 @@ export async function uploadArticleFile(id: string, data: any) {
return await httpPostInterceptor(`/article-files/${id}`, data, headers);
}
export async function getArticleFiles() {
const headers = {
"content-type": "application/json",
};
return await httpGet(`/article-files`, headers);
}
export async function uploadArticleThumbnail(id: string, data: any) {
const headers = {
"content-type": "multipart/form-data",

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

@ -1,12 +1,12 @@
import axios from "axios";
const baseURL = "https://mikulnews.com/api";
const baseURL = "https://dev.mikulnews.com/api";
const axiosBaseInstance = axios.create({
baseURL,
headers: {
"Content-Type": "application/json",
"X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640",
"X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640"
},
});

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

@ -2,7 +2,7 @@ import axios from "axios";
import { postSignIn } from "../master-user";
import Cookies from "js-cookie";
const baseURL = "https://mikulnews.com/api";
const baseURL = "https://dev.mikulnews.com/api";
const refreshToken = Cookies.get("refresh_token");
@ -10,7 +10,7 @@ const axiosInterceptorInstance = axios.create({
baseURL,
headers: {
"Content-Type": "application/json",
"X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640",
"X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640"
},
withCredentials: true,
});
@ -28,7 +28,7 @@ axiosInterceptorInstance.interceptors.request.use(
},
(error) => {
return Promise.reject(error);
},
}
);
// Response interceptor
@ -66,7 +66,7 @@ axiosInterceptorInstance.interceptors.response.use(
}
return Promise.reject(error);
},
}
);
export default axiosInterceptorInstance;

25
service/master-user.ts
View File

@ -94,21 +94,16 @@ export async function otpValidation(email: string, otpCode: string) {
return await httpPost(pathUrl, { email, otpCode });
}
// export async function postArticleComment(data: any) {
// const headers = token
// ? {
// "content-type": "application/json",
// Authorization: `${token}`,
// }
// : {
// "content-type": "application/json",
// };
// return await httpPost(`/article-comments`, headers, data);
// }
export async function postArticleComment(data: any) {
const pathUrl = `/article-comments`;
return await httpPostInterceptor(pathUrl, data);
const headers = token
? {
"content-type": "application/json",
Authorization: `Bearer ${token}`,
}
: {
"content-type": "application/json",
};
return await httpPost(`/article-comments`, headers, data);
}
export async function editArticleComment(data: any, id: number) {
@ -117,7 +112,7 @@ export async function editArticleComment(data: any, id: number) {
}
export async function getArticleComment(id: string) {
const pathUrl = `/article-comments?isPublic=false&articleId=${id}`;
const pathUrl = `/article-comments?isPublic=true&articleId=${id}`;
return await httpGet(pathUrl);
}

215
style/ckeditor.css
View File

@ -1,215 +0,0 @@
/* CKEditor Custom Styling */
/* Main editor container */
.ck.ck-editor {
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);
}
/* Toolbar styling */
.ck.ck-toolbar {
background: #f8fafc;
border: 1px solid #d1d5db;
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 8px;
}
.ck.ck-toolbar .ck-toolbar__items {
gap: 4px;
}
/* Main editable area */
.ck.ck-editor__editable {
background: #ffffff;
border: 1px solid #d1d5db;
border-top: none;
border-radius: 0 0 6px 6px;
padding: 1.5em 2em !important;
min-height: 400px;
line-height: 1.6;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
color: #333;
}
/* Focus state */
.ck.ck-editor__editable.ck-focused {
border-color: #1a9aef;
box-shadow: 0 0 0 2px rgba(26, 154, 239, 0.2);
outline: none;
}
/* Content styling */
.ck.ck-editor__editable .ck-content {
padding: 0;
}
/* Typography improvements */
.ck.ck-editor__editable p {
margin: 0.5em 0;
line-height: 1.6;
}
.ck.ck-editor__editable h1,
.ck.ck-editor__editable h2,
.ck.ck-editor__editable h3,
.ck.ck-editor__editable h4,
.ck.ck-editor__editable h5,
.ck.ck-editor__editable h6 {
margin: 1em 0 0.5em 0;
font-weight: 600;
line-height: 1.4;
}
.ck.ck-editor__editable h1 { font-size: 1.75em; }
.ck.ck-editor__editable h2 { font-size: 1.5em; }
.ck.ck-editor__editable h3 { font-size: 1.25em; }
.ck.ck-editor__editable h4 { font-size: 1.1em; }
.ck.ck-editor__editable h5 { font-size: 1em; }
.ck.ck-editor__editable h6 { font-size: 0.9em; }
/* Lists */
.ck.ck-editor__editable ul,
.ck.ck-editor__editable ol {
margin: 0.5em 0;
padding-left: 2em;
}
.ck.ck-editor__editable li {
margin: 0.25em 0;
line-height: 1.6;
}
/* Blockquotes */
.ck.ck-editor__editable blockquote {
margin: 1em 0;
padding: 0.75em 1em;
border-left: 4px solid #1a9aef;
background-color: #f8fafc;
border-radius: 0 4px 4px 0;
font-style: italic;
color: #4b5563;
}
/* Tables */
.ck.ck-editor__editable table {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
}
.ck.ck-editor__editable table td,
.ck.ck-editor__editable table th {
border: 1px solid #d1d5db;
padding: 0.5em 0.75em;
text-align: left;
}
.ck.ck-editor__editable table th {
background-color: #f8fafc;
font-weight: 600;
}
/* Links */
.ck.ck-editor__editable a {
color: #1a9aef;
text-decoration: underline;
}
.ck.ck-editor__editable a:hover {
color: #0d7cd6;
}
/* Code blocks */
.ck.ck-editor__editable pre {
background-color: #f8fafc;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 1em;
margin: 1em 0;
overflow-x: auto;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 13px;
line-height: 1.4;
}
.ck.ck-editor__editable code {
background-color: #f1f5f9;
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.9em;
}
/* Images */
.ck.ck-editor__editable img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 0.5em 0;
}
/* Horizontal rule */
.ck.ck-editor__editable hr {
border: none;
border-top: 1px solid #d1d5db;
margin: 2em 0;
}
/* Placeholder text */
.ck.ck-editor__editable.ck-blurred:empty::before {
content: attr(data-placeholder);
color: #9ca3af;
font-style: italic;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.ck.ck-editor__editable {
padding: 1em 1.5em !important;
font-size: 16px; /* Better for mobile */
}
.ck.ck-toolbar {
padding: 6px;
}
.ck.ck-toolbar .ck-toolbar__items {
gap: 2px;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.ck.ck-editor__editable {
background: #1f2937;
color: #f9fafb;
border-color: #4b5563;
}
.ck.ck-editor__editable h1,
.ck.ck-editor__editable h2,
.ck.ck-editor__editable h3,
.ck.ck-editor__editable h4,
.ck.ck-editor__editable h5,
.ck.ck-editor__editable h6 {
color: #f9fafb;
}
.ck.ck-editor__editable blockquote {
background-color: #374151;
border-left-color: #1a9aef;
color: #d1d5db;
}
.ck.ck-editor__editable pre {
background-color: #374151;
border-color: #4b5563;
}
.ck.ck-editor__editable code {
background-color: #4b5563;
}
}

2
style/global.css
View File

@ -1,2 +0,0 @@
/* @import url("https://fonts.googleapis.com/css2?family=Bytesized&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

121
styles/custom-editor.css
View File

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

1
types/globals.tsx
View File

@ -310,7 +310,6 @@ export type PaginationRequest = {
category?: string;
sortBy?: string;
sort?: string;
source?: string;
categorySlug?: string;
isBanner?: boolean;
};

8
utils/global.tsx
View File

@ -164,11 +164,3 @@ export function convertDateFormatNoTime(date: Date): string {
const day = `${date.getDate()}`.padStart(2, "0");
return `${year}-${month}-${day}`;
}
export function formatDate(date: Date | null) {
if (!date) return "";
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}

86
vendor/ckeditor5/build/ckeditor.d.ts vendored
View File

@ -2,67 +2,31 @@
* @license Copyright (c) 2014-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
import { Alignment } from "@ckeditor/ckeditor5-alignment";
import { Autoformat } from "@ckeditor/ckeditor5-autoformat";
import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";
import { BlockQuote } from "@ckeditor/ckeditor5-block-quote";
import { CloudServices } from "@ckeditor/ckeditor5-cloud-services";
import { CodeBlock } from "@ckeditor/ckeditor5-code-block";
import type { EditorConfig } from "@ckeditor/ckeditor5-core";
import { Essentials } from "@ckeditor/ckeditor5-essentials";
import { FontSize } from "@ckeditor/ckeditor5-font";
import { Heading } from "@ckeditor/ckeditor5-heading";
import {
Image,
ImageCaption,
ImageInsert,
ImageStyle,
ImageToolbar,
ImageUpload,
} from "@ckeditor/ckeditor5-image";
import { Indent } from "@ckeditor/ckeditor5-indent";
import { Link } from "@ckeditor/ckeditor5-link";
import { List } from "@ckeditor/ckeditor5-list";
import { MediaEmbed } from "@ckeditor/ckeditor5-media-embed";
import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
import { PasteFromOffice } from "@ckeditor/ckeditor5-paste-from-office";
import { SourceEditing } from "@ckeditor/ckeditor5-source-editing";
import { Table, TableToolbar } from "@ckeditor/ckeditor5-table";
import { TextTransformation } from "@ckeditor/ckeditor5-typing";
import { Undo } from "@ckeditor/ckeditor5-undo";
import { SimpleUploadAdapter } from "@ckeditor/ckeditor5-upload";
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
import type { EditorConfig } from '@ckeditor/ckeditor5-core';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { FontSize } from '@ckeditor/ckeditor5-font';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Image, ImageCaption, ImageInsert, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { Undo } from '@ckeditor/ckeditor5-undo';
import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';
declare class Editor extends ClassicEditor {
static builtinPlugins: (
| typeof Alignment
| typeof Autoformat
| typeof BlockQuote
| typeof Bold
| typeof CloudServices
| typeof CodeBlock
| typeof Essentials
| typeof FontSize
| typeof Heading
| typeof Image
| typeof ImageCaption
| typeof ImageInsert
| typeof ImageStyle
| typeof ImageToolbar
| typeof ImageUpload
| typeof Indent
| typeof Italic
| typeof Link
| typeof List
| typeof MediaEmbed
| typeof Paragraph
| typeof PasteFromOffice
| typeof SimpleUploadAdapter
| typeof SourceEditing
| typeof Table
| typeof TableToolbar
| typeof TextTransformation
| typeof Undo
)[];
static defaultConfig: EditorConfig;
static builtinPlugins: (typeof Alignment | typeof Autoformat | typeof BlockQuote | typeof Bold | typeof CloudServices | typeof CodeBlock | typeof Essentials | typeof FontSize | typeof Heading | typeof Image | typeof ImageCaption | typeof ImageInsert | typeof ImageStyle | typeof ImageToolbar | typeof ImageUpload | typeof Indent | typeof Italic | typeof Link | typeof List | typeof MediaEmbed | typeof Paragraph | typeof PasteFromOffice | typeof SimpleUploadAdapter | typeof SourceEditing | typeof Table | typeof TableToolbar | typeof TextTransformation | typeof Undo)[];
static defaultConfig: EditorConfig;
}
export default Editor;

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/cs/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/de/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/es/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/fr/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/it/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/ja/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/ko/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/pl/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/pt-br/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/ru/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/tr/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/zh-cn/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1880
vendor/ckeditor5/node_modules/.typescript-7i6ZGcGl/lib/zh-tw/diagnosticMessages.generated.json generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/attachtoform.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-core-SyLtp0Ap/src/editor/utils/attachtoform.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/attachtoform.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-core-SyLtp0Ap/src/editor/utils/attachtoform.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-core-SyLtp0Ap/src/editor/utils/dataapimixin.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-core-SyLtp0Ap/src/editor/utils/dataapimixin.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-core-SyLtp0Ap/src/editor/utils/elementapimixin.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-core-SyLtp0Ap/src/editor/utils/elementapimixin.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/securesourceelement.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-core-SyLtp0Ap/src/editor/utils/securesourceelement.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/securesourceelement.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-core-SyLtp0Ap/src/editor/utils/securesourceelement.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/attributeoperation.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/attributeoperation.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/attributeoperation.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/attributeoperation.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/detachoperation.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/detachoperation.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/detachoperation.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/detachoperation.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/insertoperation.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/insertoperation.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/insertoperation.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/insertoperation.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/markeroperation.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/markeroperation.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/markeroperation.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/markeroperation.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/mergeoperation.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/mergeoperation.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/mergeoperation.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/mergeoperation.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/moveoperation.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/moveoperation.d.ts generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/moveoperation.js → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/moveoperation.js generated vendored
View File

0
vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/node_modules/@ckeditor/ckeditor5-engine/src/model/operation/nooperation.d.ts → vendor/ckeditor5/node_modules/@ckeditor/.ckeditor5-engine-hrPTtre1/src/model/operation/nooperation.d.ts generated vendored
View File

Some files were not shown because too many files have changed in this diff Show More