new-medol
/
web-isu-kini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

detail

This commit is contained in:
Anang Yusman 2025-09-25 01:17:03 +08:00
parent f3b400c38a
commit cd7955f241
14 changed files with 479 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/category/opinion-news/page.tsx Normal file
View File

@ -0,0 +1,22 @@
import BreakingNews from "@/components/landing-page/breaking-news";
import Footer from "@/components/landing-page/footer";
import Header from "@/components/landing-page/header";
import HeaderLatest from "@/components/landing-page/header-latest";
import Navbar from "@/components/landing-page/navbar";
import News from "@/components/landing-page/news";
import Opini from "@/components/landing-page/opini";
import PopularNews from "@/components/landing-page/popular-news";
export default function Home() {
return (
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
<Navbar />
<div className="flex-1">
<HeaderLatest />
</div>
<BreakingNews />
<Footer />
</div>
);
}

22
app/category/popular-news/page.tsx Normal file
View File

@ -0,0 +1,22 @@
import BreakingNews from "@/components/landing-page/breaking-news";
import Footer from "@/components/landing-page/footer";
import Header from "@/components/landing-page/header";
import HeaderLatest from "@/components/landing-page/header-latest";
import Navbar from "@/components/landing-page/navbar";
import News from "@/components/landing-page/news";
import Opini from "@/components/landing-page/opini";
import PopularNews from "@/components/landing-page/popular-news";
export default function Home() {
return (
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
<Navbar />
<div className="flex-1">
<HeaderLatest />
</div>
<BreakingNews />
<Footer />
</div>
);
}

22
app/category/protect/page.tsx Normal file
View File

@ -0,0 +1,22 @@
import BreakingNews from "@/components/landing-page/breaking-news";
import Footer from "@/components/landing-page/footer";
import Header from "@/components/landing-page/header";
import HeaderLatest from "@/components/landing-page/header-latest";
import Navbar from "@/components/landing-page/navbar";
import News from "@/components/landing-page/news";
import Opini from "@/components/landing-page/opini";
import PopularNews from "@/components/landing-page/popular-news";
export default function Home() {
return (
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
<Navbar />
<div className="flex-1">
<HeaderLatest />
</div>
<BreakingNews />
<Footer />
</div>
);
}

19
app/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,19 @@
import DetailContent from "@/components/details/details-content";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/navbar";
import Image from "next/image";
export default function Home() {
return (
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
<Navbar />
<div className="flex-1">
<DetailContent />
</div>
<Footer />
</div>
</div>
);
}

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

@ -154,16 +154,17 @@ export default function DetailContent() {
useEffect(() => { useEffect(() => {
initState(); initState();
}, [page, showData, startDateValue, selectedCategories]); }, [page, showData]);
async function initState() { async function initState() {
// loading(); // loading();
const req = { const req = {
limit: showData, limit: showData,
page, page: 1,
search, search: "",
categorySlug: Array.from(selectedCategories).join(","), categorySlug: "",
sort: "desc", sort: "desc",
isPublish: true,
sortBy: "created_at", sortBy: "created_at",
}; };
@ -188,22 +189,12 @@ export default function DetailContent() {
setThumbnail(data?.thumbnailUrl); setThumbnail(data?.thumbnailUrl);
setDiseId(data?.aiArticleId); setDiseId(data?.aiArticleId);
setDetailFiles(data?.files); setDetailFiles(data?.files);
setArticleDetail(data); // <-- Add this setArticleDetail(data);
close(); close();
} }
return ( return (
<> <>
<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="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8"> <div className="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8">
<div className="md:col-span-2"> <div className="md:col-span-2">
<p className="text-sm text-gray-500 mb-2">Home {">"}Detail</p> <p className="text-sm text-gray-500 mb-2">Home {">"}Detail</p>
@ -211,7 +202,7 @@ export default function DetailContent() {
{articleDetail?.title} {articleDetail?.title}
</h1> </h1>
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-4"> <div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
<div className="text-[#31942E]"> <div className="text-orange-400">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
@ -231,7 +222,7 @@ export default function DetailContent() {
</svg> </svg>
</div> </div>
<span className="text-[#31942E] font-medium"> <span className="text-orange-400 font-medium">
{articleDetail?.createdByName} {articleDetail?.createdByName}
</span> </span>
<span>•</span> <span>•</span>
@ -337,11 +328,11 @@ export default function DetailContent() {
</div> </div>
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
<p className="text-gray-700 leading-relaxed text-justify"> <p className="text-gray-700 leading-relaxed text-justify">
<span className="text-black font-bold text-md"> <div
Mikulnews.com - dangerouslySetInnerHTML={{
</span> __html: articleDetail?.htmlDescription || "",
}}
{articleDetail?.description} />
</p> </p>
<Author /> <Author />
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
@ -360,34 +351,12 @@ export default function DetailContent() {
</div> </div>
</div> </div>
</div> </div>
<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 className="mt-10">
<div className="flex items-center space-x-4 p-4 border rounded-lg mb-6">
<Image
src={"/author.png"}
alt="Author"
width={60}
height={60}
className="rounded-full"
/>
<div>
<p className="text-green-600 font-bold text-lg">
christine natalia
</p>
</div>
</div>
<div className="mt-10">
<h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2> <h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
<p className="text-gray-600 mb-4 text-sm"> <p className="text-gray-600 mb-4 text-sm">
Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
ditandai <span className="text-green-600">*</span> ditandai <span className="text-orange-600">*</span>
</p> </p>
<form className="space-y-6 mt-6"> <form className="space-y-6 mt-6">
@ -396,7 +365,7 @@ export default function DetailContent() {
htmlFor="komentar" htmlFor="komentar"
className="block text-sm font-medium mb-1" className="block text-sm font-medium mb-1"
> >
Komentar <span className="text-green-600">*</span> Komentar <span className="text-orange-600">*</span>
</label> </label>
<textarea <textarea
id="komentar" id="komentar"
@ -410,7 +379,7 @@ export default function DetailContent() {
htmlFor="nama" htmlFor="nama"
className="block text-sm font-medium mb-1" className="block text-sm font-medium mb-1"
> >
Nama <span className="text-green-600">*</span> Nama <span className="text-orange-600">*</span>
</label> </label>
<input <input
type="text" type="text"
@ -426,7 +395,7 @@ export default function DetailContent() {
htmlFor="email" htmlFor="email"
className="block text-sm font-medium mb-1" className="block text-sm font-medium mb-1"
> >
Email <span className="text-green-600">*</span> Email <span className="text-orange-600">*</span>
</label> </label>
<input <input
type="email" type="email"
@ -465,7 +434,7 @@ export default function DetailContent() {
<button <button
type="submit" type="submit"
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2" className="bg-orange-600 hover:bg-orange-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2"
> >
KIRIM KOMENTAR KIRIM KOMENTAR
</button> </button>
@ -584,82 +553,64 @@ export default function DetailContent() {
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
<div className="relative"> {/* Artikel utama (featured) */}
<Image {articles.length > 0 && (
src={"/gaza.png"} <div className="relative">
alt="Recommended Article" <Image
width={400} src={articles[0]?.thumbnailUrl || "/default.jpg"}
height={200} alt={articles[0]?.title || "Recommended Article"}
className="rounded-lg w-full h-auto object-cover" width={400}
/> height={200}
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-lg"> className="rounded-lg w-full h-auto object-cover"
<p className="text-sm font-semibold leading-tight"> />
Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-lg">
dan Puluhan Terluka <p className="text-sm font-semibold leading-tight">
</p> {articles[0]?.title}
<p className="text-xs text-gray-300 mt-1"> </p>
📅 23 JUNI 2025 <p className="text-xs text-gray-300 mt-1">
</p> 📅{" "}
{new Date(articles[0]?.createdAt).toLocaleDateString(
"id-ID",
{
day: "2-digit",
month: "long",
year: "numeric",
}
)}
</p>
</div>
</div> </div>
</div> )}
{/* List artikel lain */}
<div className="space-y-3"> <div className="space-y-3">
<div className="flex space-x-3"> {articles.slice(1, 4).map((item) => (
<Image <div key={item.id} className="flex space-x-3">
src={"/perang.png"} <Image
alt="OPM Serang Gereja" src={item.thumbnailUrl || "/default.jpg"}
width={80} alt={item.title}
height={60} width={80}
className="rounded object-cover w-[80px] h-[60px]" height={60}
/> className="rounded object-cover w-[80px] h-[60px]"
<div> />
<p className="text-sm font-semibold leading-snug"> <div>
OPM Mulai Kehilangan Simpati dari Masyarakat Papua Usai <p className="text-sm font-semibold leading-snug">
Serang Gereja {item.title}
</p> </p>
<p className="text-xs text-gray-500 mt-1"> <p className="text-xs text-gray-500 mt-1">
📅 15 JUNI 2025 📅{" "}
</p> {new Date(item.createdAt).toLocaleDateString(
"id-ID",
{
day: "2-digit",
month: "long",
year: "numeric",
}
)}
</p>
</div>
</div> </div>
</div> ))}
<div className="flex space-x-3">
<Image
src={"/jateng.png"}
alt="Denda Merokok"
width={80}
height={60}
className="rounded object-cover w-[80px] h-[60px]"
/>
<div>
<p className="text-sm font-semibold leading-snug">
Jakarta Terapkan Denda Rp 250.000 bagi Warga yang
Merokok Sembarangan
</p>
<p className="text-xs text-gray-500 mt-1">
📅 13 JUNI 2025
</p>
</div>
</div>
<div className="flex space-x-3">
<Image
src={"/investasi.jpg"}
alt="Pengguna Internet"
width={80}
height={60}
className="rounded object-cover w-[80px] h-[60px]"
/>
<div>
<p className="text-sm font-semibold leading-snug">
Warga Indonesia Jadi Pengguna Internet via Ponsel
Terbanyak di Dunia
</p>
<p className="text-xs text-gray-500 mt-1">
📅 26 MEI 2025
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -197,8 +197,8 @@ const TinyMCEEditor: React.FC<TinyMCEEditorProps> = ({
height, height,
language, language,
placeholder, placeholder,
readonly: readOnly, // readonly: readOnly,
disabled, // disabled,
branding: false, branding: false,
elementpath: false, elementpath: false,
resize: false, resize: false,
@ -270,9 +270,9 @@ const TinyMCEEditor: React.FC<TinyMCEEditorProps> = ({
onInit={handleEditorInit} onInit={handleEditorInit}
initialValue={initialData} initialValue={initialData}
onEditorChange={handleEditorChange} onEditorChange={handleEditorChange}
disabled={disabled} disabled={disabled || readOnly}
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY} apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
// init={editorConfig} init={editorConfig}
/> />
{/* Status bar */} {/* Status bar */}

114
components/landing-page/breaking-news.tsx
View File

@ -3,6 +3,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import Link from "next/link";
type Article = { type Article = {
id: number; id: number;
@ -72,29 +73,31 @@ export default function BreakingNews() {
<div className="md:col-span-2 space-y-6"> <div className="md:col-span-2 space-y-6">
{articles.map((item) => ( {articles.map((item) => (
<div key={item.id} className="flex gap-4 border-b pb-4"> <div key={item.id} className="flex gap-4 border-b pb-4">
<Image <Link className="flex gap-4" href={`/detail/${item?.id}`}>
src={item.thumbnailUrl || "/dummy.jpg"} <Image
alt={item.title} src={item.thumbnailUrl || "/dummy.jpg"}
width={160} alt={item.title}
height={100} width={160}
className="object-cover rounded-md w-40 h-28" height={100}
/> className="object-cover rounded-md w-40 h-28"
<div className="flex-1"> />
<h3 className="text-base font-semibold hover:text-blue-600 cursor-pointer"> <div className="flex-1">
{item.title} <h3 className="text-base font-semibold hover:text-blue-600 cursor-pointer">
</h3> {item.title}
<p className="text-xs text-gray-500 mt-1"> </h3>
By {item.createdByName} •{" "} <p className="text-xs text-gray-500 mt-1">
{new Date(item.createdAt).toLocaleDateString("id-ID", { By {item.createdByName} •{" "}
day: "numeric", {new Date(item.createdAt).toLocaleDateString("id-ID", {
month: "long", day: "numeric",
year: "numeric", month: "long",
})} year: "numeric",
</p> })}
<p className="text-sm text-gray-600 mt-2 line-clamp-2"> </p>
{item.description} <p className="text-sm text-gray-600 mt-2 line-clamp-2">
</p> {item.description}
</div> </p>
</div>
</Link>
</div> </div>
))} ))}
</div> </div>
@ -146,29 +149,30 @@ export default function BreakingNews() {
{popular.length > 0 && ( {popular.length > 0 && (
<div className="space-y-5"> <div className="space-y-5">
{/* Item pertama tampil besar */} <Link className="flex gap-4" href={`/detail/${popular[0]?.id}`}>
<div className="relative"> {/* Item pertama tampil besar */}
<Image <div className="relative">
src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"} <Image
alt={ src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"}
popular[0]?.files?.[0]?.file_alt || alt={
popular[0]?.title || popular[0]?.files?.[0]?.file_alt ||
"No Title" popular[0]?.title ||
} "No Title"
width={400} }
height={200} width={400}
className="w-full h-48 object-cover rounded-md" height={200}
/> className="w-full h-48 object-cover rounded-md"
<div className="mt-2"> />
<h5 className="text-sm font-semibold hover:text-blue-600 cursor-pointer"> <div className="mt-2">
{popular[0]?.title} <h5 className="text-sm font-semibold hover:text-blue-600 cursor-pointer">
</h5> {popular[0]?.title}
<span className="absolute top-2 right-2 text-4xl font-bold text-gray-300/80"> </h5>
01 <span className="absolute top-2 right-2 text-4xl font-bold text-gray-300/80">
</span> 01
</span>
</div>
</div> </div>
</div> </Link>
{/* Item sisanya */} {/* Item sisanya */}
<div className="space-y-4"> <div className="space-y-4">
{popular.slice(1).map((item, i) => ( {popular.slice(1).map((item, i) => (
@ -176,15 +180,17 @@ export default function BreakingNews() {
key={item.id} key={item.id}
className="flex gap-3 items-start border-b pb-2 last:border-b-0" className="flex gap-3 items-start border-b pb-2 last:border-b-0"
> >
<span className="text-lg font-bold text-gray-400"> <Link className="flex gap-4" href={`/detail/${item?.id}`}>
0{i + 2} <span className="text-lg font-bold text-gray-400">
</span> 0{i + 2}
<div> </span>
<h5 className="text-sm font-medium hover:text-blue-600 cursor-pointer"> <div>
{item.title} <h5 className="text-sm font-medium hover:text-blue-600 cursor-pointer">
</h5> {item.title}
<p className="text-xs text-gray-400">0 Shares</p> </h5>
</div> <p className="text-xs text-gray-400">0 Shares</p>
</div>
</Link>
</div> </div>
))} ))}
</div> </div>

38
components/landing-page/header-latest.tsx
View File

@ -3,6 +3,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import Link from "next/link";
type Article = { type Article = {
id: number; id: number;
@ -50,26 +51,27 @@ export default function HeaderLatest() {
return ( return (
<header className="w-full pt-3 flex justify-center"> <header className="w-full pt-3 flex justify-center">
<div className="relative max-w-screen-xl w-full h-[320px] md:h-[480px] mx-3 md:mx-5 overflow-hidden group"> <div className="relative max-w-screen-xl w-full h-[320px] md:h-[480px] mx-3 md:mx-5 overflow-hidden group">
{/* Gambar utama */} <Link className="flex gap-4" href={`/detail/${article?.id}`}>
<Image <Image
src={article?.thumbnailUrl || "/dummy.jpg"} src={article?.thumbnailUrl || "/dummy.jpg"}
alt={article?.title || "No Title"} alt={article?.title || "No Title"}
fill fill
className="object-cover transition-transform duration-500 group-hover:scale-110" className="object-cover transition-transform duration-500 group-hover:scale-110"
/> />
{/* Overlay gradient */} {/* Overlay gradient */}
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
{/* Konten teks */} {/* Konten teks */}
<div className="absolute bottom-5 left-5 text-white max-w-[80%]"> <div className="absolute bottom-5 left-5 text-white max-w-[80%]">
<span className="bg-orange-600 text-white text-[10px] md:text-xs px-2 py-1 mb-3 inline-block font-semibold uppercase tracking-wide"> <span className="bg-orange-600 text-white text-[10px] md:text-xs px-2 py-1 mb-3 inline-block font-semibold uppercase tracking-wide">
{article?.categoryName || "Berita Terkini"} {article?.categoryName || "Berita Terkini"}
</span> </span>
<h1 className="text-lg md:text-2xl font-semibold leading-snug md:leading-tight"> <h1 className="text-lg md:text-2xl font-semibold leading-snug md:leading-tight">
{article?.title || "Memuat..."} {article?.title || "Memuat..."}
</h1> </h1>
</div> </div>
</Link>
</div> </div>
</header> </header>
); );

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

@ -3,6 +3,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import Link from "next/link";
type Article = { type Article = {
id: number; id: number;
@ -51,82 +52,84 @@ export default function Header() {
return ( return (
<header className="bg-white w-full pt-3 flex justify-center"> <header className="bg-white w-full pt-3 flex justify-center">
<div className="relative max-w-screen-xl h-auto md:h-[483px] flex flex-col md:flex-row overflow-hidden shadow-md mx-3 md:mx-3 lg:mx-5"> <div className="relative max-w-screen-xl h-auto md:h-[483px] flex flex-col md:flex-row overflow-hidden shadow-md mx-3 md:mx-3 lg:mx-5">
<div className="w-full md:w-1/2 h-[250px] md:h-full"> <Link className="flex" href={`/detail/${article?.id}`}>
<Image <div className="w-full md:w-1/2 h-[250px] md:h-full">
src={article?.thumbnailUrl || "/dummy.jpg"} <Image
alt={article?.title || "No Title"} src={article?.thumbnailUrl || "/dummy.jpg"}
width={730} alt={article?.title || "No Title"}
height={483} width={730}
className="object-cover w-full h-full" height={483}
/> className="object-cover w-full h-full"
</div> />
</div>
<div className="w-full md:w-1/2 bg-[#714C3D] text-white p-6 md:p-10 flex flex-col justify-center"> <div className="w-full md:w-1/2 bg-[#714C3D] text-white p-6 md:p-10 flex flex-col justify-center">
<span className="bg-black text-white text-xs px-2 py-1 mb-4 inline-block w-fit"> <span className="bg-black text-white text-xs px-2 py-1 mb-4 inline-block w-fit">
{article?.categoryName || "Berita Terkini"} {article?.categoryName || "Berita Terkini"}
</span> </span>
<h1 className="text-xl md:text-3xl font-semibold leading-snug md:leading-tight mb-4 md:mb-6"> <h1 className="text-xl md:text-3xl font-semibold leading-snug md:leading-tight mb-4 md:mb-6">
{article?.title || "Memuat..."} {article?.title || "Memuat..."}
</h1> </h1>
<div className="flex flex-wrap gap-4 text-sm opacity-90"> <div className="flex flex-wrap gap-4 text-sm opacity-90">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="16" width="16"
height="16" height="16"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<g fill="none"> <g fill="none">
<path d="M0 0h24v24H0z" /> <path d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8"
/>
</g>
</svg>
<span>
{article
? new Date(article.createdAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})
: ""}
</span>
</div>
<div className="flex items-center gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 32 32"
>
<path <path
fill="currentColor" fill="currentColor"
d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8" d="M28 4h-2V2h-2v2H8V2H6v2H4a2.006 2.006 0 0 0-2 2v22a2.006 2.006 0 0 0 2 2h24a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2m0 24H4V10h24Z"
/> />
</g> </svg>
</svg> <span>{article?.createdByName || ""}</span>
<span> </div>
{article <div className="flex items-center gap-1">
? new Date(article.createdAt).toLocaleDateString("id-ID", { <svg
day: "numeric", xmlns="http://www.w3.org/2000/svg"
month: "long", className="h-4 w-4"
year: "numeric", fill="none"
}) viewBox="0 0 24 24"
: ""} stroke="currentColor"
</span> >
</div> <path
<div className="flex items-center gap-1"> strokeLinecap="round"
<svg strokeLinejoin="round"
xmlns="http://www.w3.org/2000/svg" strokeWidth={2}
width="16" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
height="16" />
viewBox="0 0 32 32" </svg>
> <span>0</span>
<path </div>
fill="currentColor"
d="M28 4h-2V2h-2v2H8V2H6v2H4a2.006 2.006 0 0 0-2 2v22a2.006 2.006 0 0 0 2 2h24a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2m0 24H4V10h24Z"
/>
</svg>
<span>{article?.createdByName || ""}</span>
</div>
<div className="flex items-center gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
<span>0</span>
</div> </div>
</div> </div>
</div> </Link>
</div> </div>
</header> </header>
); );

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

@ -41,16 +41,19 @@ export default function Navbar() {
BERITA TERKINI BERITA TERKINI
</Link> </Link>
<Link <Link
href="/berita-populer" href="/category/popular-news"
className="text-black hover:text-[#795548]" className="text-black hover:text-[#795548]"
> >
BERITA POPULER BERITA POPULER
</Link> </Link>
<Link href="/jaga-negeri" className="text-black hover:text-[#795548]"> <Link
href="/category/protect"
className="text-black hover:text-[#795548]"
>
JAGA NEGERI JAGA NEGERI
</Link> </Link>
<Link <Link
href="/berita-opini" href="/category/opinion-news"
className="text-black hover:text-[#795548]" className="text-black hover:text-[#795548]"
> >
BERITA OPINI BERITA OPINI

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

@ -12,6 +12,7 @@ import {
import Image from "next/image"; import Image from "next/image";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import Link from "next/link";
type Article = { type Article = {
id: number; id: number;
@ -88,64 +89,66 @@ export default function News() {
key={item.id} key={item.id}
className="flex flex-col md:flex-row gap-4 pb-6" className="flex flex-col md:flex-row gap-4 pb-6"
> >
<div className="w-full md:w-[250px]"> <Link className="flex gap-4" href={`/detail/${item?.id}`}>
<Image <div className="w-full md:w-[250px]">
src={item.thumbnailUrl || "/dummy.jpg"} <Image
alt={item.title} src={item.thumbnailUrl || "/dummy.jpg"}
width={250} alt={item.title}
height={180} width={250}
className="w-full h-auto object-cover" height={180}
/> className="w-full h-auto object-cover"
</div> />
</div>
<div className="flex-1"> <div className="flex-1">
<span className="inline-block bg-black text-white text-xs px-2 py-1 mb-2"> <span className="inline-block bg-black text-white text-xs px-2 py-1 mb-2">
{item.categoryName || "Berita Terkini"} {item.categoryName || "Berita Terkini"}
</span> </span>
<h3 className="font-semibold text-xl font-serif mb-2"> <h3 className="font-semibold text-xl font-serif mb-2">
{item.title} {item.title}
</h3> </h3>
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2"> <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
by {item.createdByName || "admin"}{" "} by {item.createdByName || "admin"}{" "}
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="16" width="16"
height="16" height="16"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<g fill="none"> <g fill="none">
<path d="M0 0h24v24H0z" /> <path d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8"
/>
</g>
</svg>
{new Date(item.createdAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path <path
fill="currentColor" strokeLinecap="round"
d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8" strokeLinejoin="round"
strokeWidth={2}
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/> />
</g> </svg>
</svg> 0
{new Date(item.createdAt).toLocaleDateString("id-ID", { </p>
day: "numeric", <p className="text-[#999999] text-sm font-serif">
month: "long", {truncateText(item.description, 50)}
year: "numeric", </p>
})} </div>
<svg </Link>
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
0
</p>
<p className="text-[#999999] text-sm font-serif">
{truncateText(item.description, 50)}
</p>
</div>
</div> </div>
))} ))}
</div> </div>

159
components/landing-page/opini.tsx
View File

@ -3,6 +3,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import Link from "next/link";
type Article = { type Article = {
id: number; id: number;
@ -83,52 +84,56 @@ export default function Opini() {
key={item.id} key={item.id}
className="flex items-start gap-4 border-b pb-4" className="flex items-start gap-4 border-b pb-4"
> >
<Image <Link className="flex gap-4" href={`/detail/${item?.id}`}>
src={item.thumbnailUrl || "/dummy.jpg"} <Image
alt={item.title} src={item.thumbnailUrl || "/dummy.jpg"}
width={109} alt={item.title}
height={70} width={109}
className="w-[109px] h-16 object-cover" height={70}
/> className="w-[109px] h-16 object-cover"
<div> />
<p className="text-sm font-medium font-serif">{item.title}</p> <div>
<p className="text-xs text-gray-500 mt-1 flex items-center gap-1"> <p className="text-sm font-medium font-serif">
<svg {item.title}
xmlns="http://www.w3.org/2000/svg" </p>
width="16" <p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
height="16" <svg
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
> width="16"
<g fill="none"> height="16"
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" /> viewBox="0 0 24 24"
>
<g fill="none">
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" />
<path
fill="currentColor"
d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 4v4.586l2.707 2.707-1.414 1.414L11 13.414V8h2z"
/>
</g>
</svg>
{new Date(item.createdAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path <path
fill="currentColor" strokeLinecap="round"
d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 4v4.586l2.707 2.707-1.414 1.414L11 13.414V8h2z" strokeLinejoin="round"
strokeWidth={2}
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/> />
</g> </svg>
</svg> 0
{new Date(item.createdAt).toLocaleDateString("id-ID", { </p>
day: "numeric", </div>
month: "long", </Link>
year: "numeric",
})}
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
0
</p>
</div>
</div> </div>
))} ))}
</div> </div>
@ -144,40 +149,46 @@ export default function Opini() {
{jagaNegeri.length > 0 && ( {jagaNegeri.length > 0 && (
<div className="mt-6 flex flex-col md:flex-row gap-6"> <div className="mt-6 flex flex-col md:flex-row gap-6">
<div className="w-full md:w-[455px]"> <Link className="flex" href={`/detail/${jagaNegeri[0]?.id}`}>
<Image <div className="w-full md:w-[455px]">
src={jagaNegeri[0].thumbnailUrl || "/dummy.jpg"} <Image
alt={jagaNegeri[0].title} src={jagaNegeri[0].thumbnailUrl || "/dummy.jpg"}
width={700} alt={jagaNegeri[0].title}
height={400} width={700}
className="w-full h-[330px] object-cover" height={400}
/> className="w-full h-[330px] object-cover"
<p className="text-lg mt-4 font-serif">{jagaNegeri[0].title}</p> />
<p className="text-xs text-gray-500 mt-1 flex items-center gap-2"> <p className="text-lg mt-4 font-serif">
{new Date(jagaNegeri[0].createdAt).toLocaleDateString( {jagaNegeri[0].title}
"id-ID", </p>
{ <p className="text-xs text-gray-500 mt-1 flex items-center gap-2">
day: "numeric", {new Date(jagaNegeri[0].createdAt).toLocaleDateString(
month: "long", "id-ID",
year: "numeric", {
} day: "numeric",
)} month: "long",
</p> year: "numeric",
</div> }
)}
</p>
</div>
</Link>
<div className="w-full md:w-4/12 flex flex-col gap-4"> <div className="w-full md:w-4/12 flex flex-col gap-4">
{jagaNegeri.slice(1).map((item) => ( {jagaNegeri.slice(1).map((item) => (
<div key={item.id} className="flex flex-col gap-3"> <div key={item.id} className="flex flex-col gap-3">
<Image <Link className=" gap-3" href={`/detail/${item?.id}`}>
src={item.thumbnailUrl || "/dummy.jpg"} <Image
alt={item.title} src={item.thumbnailUrl || "/dummy.jpg"}
width={100} alt={item.title}
height={70} width={100}
className="w-full md:w-[227px] h-auto md:h-[151px] object-cover" height={70}
/> className="w-full md:w-[227px] h-auto md:h-[151px] object-cover"
<p className="text-sm font-serif font-medium leading-snug"> />
{item.title} <p className="text-sm font-serif font-medium leading-snug">
</p> {item.title}
</p>
</Link>
</div> </div>
))} ))}
</div> </div>

25
components/landing-page/popular-news.tsx
View File

@ -3,6 +3,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import Link from "next/link";
type Article = { type Article = {
id: number; id: number;
@ -65,16 +66,20 @@ export default function PopularNews() {
key={news.id} key={news.id}
className="relative h-[358px] group overflow-hidden" className="relative h-[358px] group overflow-hidden"
> >
<Image <Link className=" gap-3" href={`/detail/${news?.id}`}>
src={news.thumbnailUrl || "/dummy.jpg"} <Image
alt={news.title} src={news.thumbnailUrl || "/dummy.jpg"}
width={361} alt={news.title}
height={358} width={361}
className="w-full h-[358px] object-cover transition-transform duration-300 group-hover:scale-105" height={358}
/> className="w-full h-[358px] object-cover transition-transform duration-300 group-hover:scale-105"
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3"> />
<p className="text-xl font-serif font-medium">{news.title}</p> <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3">
</div> <p className="text-xl font-serif font-medium">
{news.title}
</p>
</div>
</Link>
</div> </div>
))} ))}
</div> </div>

BIN
public/author.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB