detail
This commit is contained in:
parent
f3b400c38a
commit
cd7955f241
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -154,16 +154,17 @@ export default function DetailContent() {
|
|||
|
||||
useEffect(() => {
|
||||
initState();
|
||||
}, [page, showData, startDateValue, selectedCategories]);
|
||||
}, [page, showData]);
|
||||
|
||||
async function initState() {
|
||||
// loading();
|
||||
const req = {
|
||||
limit: showData,
|
||||
page,
|
||||
search,
|
||||
categorySlug: Array.from(selectedCategories).join(","),
|
||||
page: 1,
|
||||
search: "",
|
||||
categorySlug: "",
|
||||
sort: "desc",
|
||||
isPublish: true,
|
||||
sortBy: "created_at",
|
||||
};
|
||||
|
||||
|
|
@ -188,22 +189,12 @@ export default function DetailContent() {
|
|||
setThumbnail(data?.thumbnailUrl);
|
||||
setDiseId(data?.aiArticleId);
|
||||
setDetailFiles(data?.files);
|
||||
setArticleDetail(data); // <-- Add this
|
||||
setArticleDetail(data);
|
||||
close();
|
||||
}
|
||||
|
||||
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="md:col-span-2">
|
||||
<p className="text-sm text-gray-500 mb-2">Home {">"}Detail</p>
|
||||
|
|
@ -211,7 +202,7 @@ export default function DetailContent() {
|
|||
{articleDetail?.title}
|
||||
</h1>
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
|
||||
<div className="text-[#31942E]">
|
||||
<div className="text-orange-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
|
|
@ -231,7 +222,7 @@ export default function DetailContent() {
|
|||
</svg>
|
||||
</div>
|
||||
|
||||
<span className="text-[#31942E] font-medium">
|
||||
<span className="text-orange-400 font-medium">
|
||||
{articleDetail?.createdByName}
|
||||
</span>
|
||||
<span>•</span>
|
||||
|
|
@ -337,11 +328,11 @@ export default function DetailContent() {
|
|||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<p className="text-gray-700 leading-relaxed text-justify">
|
||||
<span className="text-black font-bold text-md">
|
||||
Mikulnews.com -
|
||||
</span>
|
||||
|
||||
{articleDetail?.description}
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: articleDetail?.htmlDescription || "",
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<Author />
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
|
|
@ -360,34 +351,12 @@ export default function DetailContent() {
|
|||
</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>
|
||||
<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>
|
||||
ditandai <span className="text-orange-600">*</span>
|
||||
</p>
|
||||
|
||||
<form className="space-y-6 mt-6">
|
||||
|
|
@ -396,7 +365,7 @@ export default function DetailContent() {
|
|||
htmlFor="komentar"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Komentar <span className="text-green-600">*</span>
|
||||
Komentar <span className="text-orange-600">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="komentar"
|
||||
|
|
@ -410,7 +379,7 @@ export default function DetailContent() {
|
|||
htmlFor="nama"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Nama <span className="text-green-600">*</span>
|
||||
Nama <span className="text-orange-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -426,7 +395,7 @@ export default function DetailContent() {
|
|||
htmlFor="email"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Email <span className="text-green-600">*</span>
|
||||
Email <span className="text-orange-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
|
|
@ -465,7 +434,7 @@ export default function DetailContent() {
|
|||
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
|
|
@ -584,82 +553,64 @@ export default function DetailContent() {
|
|||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={"/gaza.png"}
|
||||
alt="Recommended Article"
|
||||
width={400}
|
||||
height={200}
|
||||
className="rounded-lg w-full h-auto object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-lg">
|
||||
<p className="text-sm font-semibold leading-tight">
|
||||
Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas
|
||||
dan Puluhan Terluka
|
||||
</p>
|
||||
<p className="text-xs text-gray-300 mt-1">
|
||||
📅 23 JUNI 2025
|
||||
</p>
|
||||
{/* Artikel utama (featured) */}
|
||||
{articles.length > 0 && (
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={articles[0]?.thumbnailUrl || "/default.jpg"}
|
||||
alt={articles[0]?.title || "Recommended Article"}
|
||||
width={400}
|
||||
height={200}
|
||||
className="rounded-lg w-full h-auto object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-lg">
|
||||
<p className="text-sm font-semibold leading-tight">
|
||||
{articles[0]?.title}
|
||||
</p>
|
||||
<p className="text-xs text-gray-300 mt-1">
|
||||
📅{" "}
|
||||
{new Date(articles[0]?.createdAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* List artikel lain */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex space-x-3">
|
||||
<Image
|
||||
src={"/perang.png"}
|
||||
alt="OPM Serang Gereja"
|
||||
width={80}
|
||||
height={60}
|
||||
className="rounded object-cover w-[80px] h-[60px]"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-semibold leading-snug">
|
||||
OPM Mulai Kehilangan Simpati dari Masyarakat Papua Usai
|
||||
Serang Gereja
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
📅 15 JUNI 2025
|
||||
</p>
|
||||
{articles.slice(1, 4).map((item) => (
|
||||
<div key={item.id} className="flex space-x-3">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/default.jpg"}
|
||||
alt={item.title}
|
||||
width={80}
|
||||
height={60}
|
||||
className="rounded object-cover w-[80px] h-[60px]"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-semibold leading-snug">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
📅{" "}
|
||||
{new Date(item.createdAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -197,8 +197,8 @@ const TinyMCEEditor: React.FC<TinyMCEEditorProps> = ({
|
|||
height,
|
||||
language,
|
||||
placeholder,
|
||||
readonly: readOnly,
|
||||
disabled,
|
||||
// readonly: readOnly,
|
||||
// disabled,
|
||||
branding: false,
|
||||
elementpath: false,
|
||||
resize: false,
|
||||
|
|
@ -270,9 +270,9 @@ const TinyMCEEditor: React.FC<TinyMCEEditorProps> = ({
|
|||
onInit={handleEditorInit}
|
||||
initialValue={initialData}
|
||||
onEditorChange={handleEditorChange}
|
||||
disabled={disabled}
|
||||
disabled={disabled || readOnly}
|
||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
||||
// init={editorConfig}
|
||||
init={editorConfig}
|
||||
/>
|
||||
|
||||
{/* Status bar */}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -72,29 +73,31 @@ export default function BreakingNews() {
|
|||
<div className="md:col-span-2 space-y-6">
|
||||
{articles.map((item) => (
|
||||
<div key={item.id} className="flex gap-4 border-b pb-4">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={item.title}
|
||||
width={160}
|
||||
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">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
By {item.createdByName} •{" "}
|
||||
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mt-2 line-clamp-2">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<Link className="flex gap-4" href={`/detail/${item?.id}`}>
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={item.title}
|
||||
width={160}
|
||||
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">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
By {item.createdByName} •{" "}
|
||||
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mt-2 line-clamp-2">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -146,29 +149,30 @@ export default function BreakingNews() {
|
|||
|
||||
{popular.length > 0 && (
|
||||
<div className="space-y-5">
|
||||
{/* Item pertama tampil besar */}
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"}
|
||||
alt={
|
||||
popular[0]?.files?.[0]?.file_alt ||
|
||||
popular[0]?.title ||
|
||||
"No Title"
|
||||
}
|
||||
width={400}
|
||||
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">
|
||||
{popular[0]?.title}
|
||||
</h5>
|
||||
<span className="absolute top-2 right-2 text-4xl font-bold text-gray-300/80">
|
||||
01
|
||||
</span>
|
||||
<Link className="flex gap-4" href={`/detail/${popular[0]?.id}`}>
|
||||
{/* Item pertama tampil besar */}
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"}
|
||||
alt={
|
||||
popular[0]?.files?.[0]?.file_alt ||
|
||||
popular[0]?.title ||
|
||||
"No Title"
|
||||
}
|
||||
width={400}
|
||||
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">
|
||||
{popular[0]?.title}
|
||||
</h5>
|
||||
<span className="absolute top-2 right-2 text-4xl font-bold text-gray-300/80">
|
||||
01
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
{/* Item sisanya */}
|
||||
<div className="space-y-4">
|
||||
{popular.slice(1).map((item, i) => (
|
||||
|
|
@ -176,15 +180,17 @@ export default function BreakingNews() {
|
|||
key={item.id}
|
||||
className="flex gap-3 items-start border-b pb-2 last:border-b-0"
|
||||
>
|
||||
<span className="text-lg font-bold text-gray-400">
|
||||
0{i + 2}
|
||||
</span>
|
||||
<div>
|
||||
<h5 className="text-sm font-medium hover:text-blue-600 cursor-pointer">
|
||||
{item.title}
|
||||
</h5>
|
||||
<p className="text-xs text-gray-400">0 Shares</p>
|
||||
</div>
|
||||
<Link className="flex gap-4" href={`/detail/${item?.id}`}>
|
||||
<span className="text-lg font-bold text-gray-400">
|
||||
0{i + 2}
|
||||
</span>
|
||||
<div>
|
||||
<h5 className="text-sm font-medium hover:text-blue-600 cursor-pointer">
|
||||
{item.title}
|
||||
</h5>
|
||||
<p className="text-xs text-gray-400">0 Shares</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -50,26 +51,27 @@ export default function HeaderLatest() {
|
|||
return (
|
||||
<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">
|
||||
{/* Gambar utama */}
|
||||
<Image
|
||||
src={article?.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={article?.title || "No Title"}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<Link className="flex gap-4" href={`/detail/${article?.id}`}>
|
||||
<Image
|
||||
src={article?.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={article?.title || "No Title"}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
{/* Overlay gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
{/* Overlay gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
|
||||
{/* Konten teks */}
|
||||
<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">
|
||||
{article?.categoryName || "Berita Terkini"}
|
||||
</span>
|
||||
<h1 className="text-lg md:text-2xl font-semibold leading-snug md:leading-tight">
|
||||
{article?.title || "Memuat..."}
|
||||
</h1>
|
||||
</div>
|
||||
{/* Konten teks */}
|
||||
<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">
|
||||
{article?.categoryName || "Berita Terkini"}
|
||||
</span>
|
||||
<h1 className="text-lg md:text-2xl font-semibold leading-snug md:leading-tight">
|
||||
{article?.title || "Memuat..."}
|
||||
</h1>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -51,82 +52,84 @@ export default function Header() {
|
|||
return (
|
||||
<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="w-full md:w-1/2 h-[250px] md:h-full">
|
||||
<Image
|
||||
src={article?.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={article?.title || "No Title"}
|
||||
width={730}
|
||||
height={483}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<Link className="flex" href={`/detail/${article?.id}`}>
|
||||
<div className="w-full md:w-1/2 h-[250px] md:h-full">
|
||||
<Image
|
||||
src={article?.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={article?.title || "No Title"}
|
||||
width={730}
|
||||
height={483}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
{article?.categoryName || "Berita Terkini"}
|
||||
</span>
|
||||
<h1 className="text-xl md:text-3xl font-semibold leading-snug md:leading-tight mb-4 md:mb-6">
|
||||
{article?.title || "Memuat..."}
|
||||
</h1>
|
||||
<div className="flex flex-wrap gap-4 text-sm opacity-90">
|
||||
<div className="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g fill="none">
|
||||
<path d="M0 0h24v24H0z" />
|
||||
<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">
|
||||
{article?.categoryName || "Berita Terkini"}
|
||||
</span>
|
||||
<h1 className="text-xl md:text-3xl font-semibold leading-snug md:leading-tight mb-4 md:mb-6">
|
||||
{article?.title || "Memuat..."}
|
||||
</h1>
|
||||
<div className="flex flex-wrap gap-4 text-sm opacity-90">
|
||||
<div className="flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g fill="none">
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
</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>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -41,16 +41,19 @@ export default function Navbar() {
|
|||
BERITA TERKINI
|
||||
</Link>
|
||||
<Link
|
||||
href="/berita-populer"
|
||||
href="/category/popular-news"
|
||||
className="text-black hover:text-[#795548]"
|
||||
>
|
||||
BERITA POPULER
|
||||
</Link>
|
||||
<Link href="/jaga-negeri" className="text-black hover:text-[#795548]">
|
||||
<Link
|
||||
href="/category/protect"
|
||||
className="text-black hover:text-[#795548]"
|
||||
>
|
||||
JAGA NEGERI
|
||||
</Link>
|
||||
<Link
|
||||
href="/berita-opini"
|
||||
href="/category/opinion-news"
|
||||
className="text-black hover:text-[#795548]"
|
||||
>
|
||||
BERITA OPINI
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {
|
|||
import Image from "next/image";
|
||||
import { useEffect, useState } from "react";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -88,64 +89,66 @@ export default function News() {
|
|||
key={item.id}
|
||||
className="flex flex-col md:flex-row gap-4 pb-6"
|
||||
>
|
||||
<div className="w-full md:w-[250px]">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={item.title}
|
||||
width={250}
|
||||
height={180}
|
||||
className="w-full h-auto object-cover"
|
||||
/>
|
||||
</div>
|
||||
<Link className="flex gap-4" href={`/detail/${item?.id}`}>
|
||||
<div className="w-full md:w-[250px]">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={item.title}
|
||||
width={250}
|
||||
height={180}
|
||||
className="w-full h-auto object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<span className="inline-block bg-black text-white text-xs px-2 py-1 mb-2">
|
||||
{item.categoryName || "Berita Terkini"}
|
||||
</span>
|
||||
<h3 className="font-semibold text-xl font-serif mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||||
by {item.createdByName || "admin"}{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g fill="none">
|
||||
<path d="M0 0h24v24H0z" />
|
||||
<div className="flex-1">
|
||||
<span className="inline-block bg-black text-white text-xs px-2 py-1 mb-2">
|
||||
{item.categoryName || "Berita Terkini"}
|
||||
</span>
|
||||
<h3 className="font-semibold text-xl font-serif mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||||
by {item.createdByName || "admin"}{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g fill="none">
|
||||
<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
|
||||
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"
|
||||
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"
|
||||
/>
|
||||
</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
|
||||
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>
|
||||
</svg>
|
||||
0
|
||||
</p>
|
||||
<p className="text-[#999999] text-sm font-serif">
|
||||
{truncateText(item.description, 50)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -83,52 +84,56 @@ export default function Opini() {
|
|||
key={item.id}
|
||||
className="flex items-start gap-4 border-b pb-4"
|
||||
>
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={item.title}
|
||||
width={109}
|
||||
height={70}
|
||||
className="w-[109px] h-16 object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium font-serif">{item.title}</p>
|
||||
<p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
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" />
|
||||
<Link className="flex gap-4" href={`/detail/${item?.id}`}>
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={item.title}
|
||||
width={109}
|
||||
height={70}
|
||||
className="w-[109px] h-16 object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium font-serif">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
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
|
||||
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"
|
||||
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"
|
||||
/>
|
||||
</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
|
||||
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>
|
||||
</svg>
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -144,40 +149,46 @@ export default function Opini() {
|
|||
|
||||
{jagaNegeri.length > 0 && (
|
||||
<div className="mt-6 flex flex-col md:flex-row gap-6">
|
||||
<div className="w-full md:w-[455px]">
|
||||
<Image
|
||||
src={jagaNegeri[0].thumbnailUrl || "/dummy.jpg"}
|
||||
alt={jagaNegeri[0].title}
|
||||
width={700}
|
||||
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">
|
||||
{new Date(jagaNegeri[0].createdAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<Link className="flex" href={`/detail/${jagaNegeri[0]?.id}`}>
|
||||
<div className="w-full md:w-[455px]">
|
||||
<Image
|
||||
src={jagaNegeri[0].thumbnailUrl || "/dummy.jpg"}
|
||||
alt={jagaNegeri[0].title}
|
||||
width={700}
|
||||
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">
|
||||
{new Date(jagaNegeri[0].createdAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="w-full md:w-4/12 flex flex-col gap-4">
|
||||
{jagaNegeri.slice(1).map((item) => (
|
||||
<div key={item.id} className="flex flex-col gap-3">
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={item.title}
|
||||
width={100}
|
||||
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>
|
||||
<Link className=" gap-3" href={`/detail/${item?.id}`}>
|
||||
<Image
|
||||
src={item.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={item.title}
|
||||
width={100}
|
||||
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>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -65,16 +66,20 @@ export default function PopularNews() {
|
|||
key={news.id}
|
||||
className="relative h-[358px] group overflow-hidden"
|
||||
>
|
||||
<Image
|
||||
src={news.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={news.title}
|
||||
width={361}
|
||||
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>
|
||||
<Link className=" gap-3" href={`/detail/${news?.id}`}>
|
||||
<Image
|
||||
src={news.thumbnailUrl || "/dummy.jpg"}
|
||||
alt={news.title}
|
||||
width={361}
|
||||
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>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Loading…
Reference in New Issue