update
This commit is contained in:
parent
af3649fcb0
commit
75b8564a41
|
|
@ -0,0 +1,17 @@
|
|||
import BreakingNews from "@/components/landing-page/breaking-news";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import HeaderLatest from "@/components/landing-page/header-bumn";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import BumnNews from "@/components/landing-page/news";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
|
||||
<Navbar />
|
||||
|
||||
<BumnNews />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import BreakingNews from "@/components/landing-page/breaking-news";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import HeaderLatest from "@/components/landing-page/header-bumn";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import BumnNews from "@/components/landing-page/news";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
|
||||
<Navbar />
|
||||
|
||||
<BumnNews />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import BreakingNews from "@/components/landing-page/breaking-news";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import HeaderLatest from "@/components/landing-page/header-bumn";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import BumnNews from "@/components/landing-page/news";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
|
||||
<Navbar />
|
||||
|
||||
<BumnNews />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import BreakingNews from "@/components/landing-page/breaking-news";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import HeaderLatest from "@/components/landing-page/header-bumn";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import BumnNews from "@/components/landing-page/news";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
|
||||
<Navbar />
|
||||
|
||||
<BumnNews />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import BreakingNews from "@/components/landing-page/breaking-news";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import HeaderLatest from "@/components/landing-page/header-bumn";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import BumnNews from "@/components/landing-page/news";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
|
||||
<Navbar />
|
||||
|
||||
<BumnNews />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import BreakingNews from "@/components/landing-page/breaking-news";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import HeaderLatest from "@/components/landing-page/header-bumn";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import BumnNews from "@/components/landing-page/news";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
|
||||
<Navbar />
|
||||
|
||||
<BumnNews />
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
@ -56,6 +56,8 @@ export default function DetailContent() {
|
|||
null
|
||||
);
|
||||
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
const [tabArticles, setTabArticles] = useState<Article[]>([]);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<TabKey>("trending");
|
||||
|
|
@ -154,16 +156,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 +191,20 @@ export default function DetailContent() {
|
|||
setThumbnail(data?.thumbnailUrl);
|
||||
setDiseId(data?.aiArticleId);
|
||||
setDetailFiles(data?.files);
|
||||
setArticleDetail(data); // <-- Add this
|
||||
setArticleDetail(data);
|
||||
close();
|
||||
}
|
||||
|
||||
if (!articleDetail?.files || articleDetail.files.length === 0) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
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 +212,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 +232,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>
|
||||
|
|
@ -252,19 +253,41 @@ export default function DetailContent() {
|
|||
</div>
|
||||
|
||||
<div className="w-full h-auto mb-6">
|
||||
{articleDetail?.files?.[0]?.fileUrl ? (
|
||||
{/* Gambar utama */}
|
||||
<div className="w-full">
|
||||
<Image
|
||||
src={articleDetail.files[0].fileUrl}
|
||||
alt="Berita"
|
||||
src={articleDetail.files[selectedIndex].fileUrl}
|
||||
alt={articleDetail.files[selectedIndex].fileAlt || "Berita"}
|
||||
width={800}
|
||||
height={400}
|
||||
className="rounded-lg w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Thumbnail */}
|
||||
<div className="flex gap-2 mt-3 overflow-x-auto">
|
||||
{articleDetail.files.map((file: any, index: number) => (
|
||||
<button
|
||||
key={file.id || index}
|
||||
onClick={() => setSelectedIndex(index)}
|
||||
className={`border-2 rounded-lg overflow-hidden ${
|
||||
selectedIndex === index
|
||||
? "border-red-500"
|
||||
: "border-transparent"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={file.fileUrl}
|
||||
alt={file.fileAlt || "Thumbnail"}
|
||||
width={100}
|
||||
height={80}
|
||||
className="object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Slug */}
|
||||
<p className="text-sm text-gray-500 mt-2 text-end">
|
||||
{articleDetail?.slug}
|
||||
</p>
|
||||
|
|
@ -336,13 +359,13 @@ export default function DetailContent() {
|
|||
</Link>
|
||||
</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}
|
||||
</p>
|
||||
<div className="text-gray-700 leading-relaxed text-justify">
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: articleDetail?.htmlDescription || "",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Author />
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<span className="font-semibold text-sm text-gray-700">
|
||||
|
|
@ -360,34 +383,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 +397,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 +411,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 +427,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 +466,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 +585,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 */}
|
||||
|
|
|
|||
|
|
@ -524,13 +524,21 @@ 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 : ""
|
||||
|
|
|
|||
|
|
@ -681,6 +681,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className=" border-none rounded-full"
|
||||
variant="outline"
|
||||
color="danger"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
"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";
|
||||
|
|
@ -69,8 +78,11 @@ 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("");
|
||||
|
|
@ -166,7 +178,10 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
|
|||
))}
|
||||
</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>
|
||||
|
|
@ -198,7 +213,10 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
|
|||
))}
|
||||
</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>
|
||||
|
|
@ -229,7 +247,10 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
|
|||
<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>
|
||||
|
|
@ -239,6 +260,7 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
|
|||
</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>
|
||||
|
|
@ -246,9 +268,16 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
|
|||
<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" />
|
||||
|
|
@ -263,7 +292,14 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
|
|||
{articleIds.length > 0 && (
|
||||
<div className="flex flex-row gap-1 mt-2">
|
||||
{articleIds?.map((id, index) => (
|
||||
<Button key={id} onClick={() => setSelectedId(id)} disabled={isLoading && selectedId === id} variant={selectedId === id ? "default" : "outline"} className="flex items-center gap-2">
|
||||
<Button
|
||||
type="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" />
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export default function GenerateSingleArticleForm(props: {
|
|||
const [additionalKeyword, setAdditionalKeyword] = useState("");
|
||||
const [articleIds, setArticleIds] = useState<number[]>([]);
|
||||
const [selectedId, setSelectedId] = useState<number>();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const generateAll = async (keyword: string | undefined) => {
|
||||
if (keyword) {
|
||||
|
|
@ -319,6 +319,7 @@ 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,6 +351,7 @@ 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)}
|
||||
|
|
@ -373,6 +375,7 @@ 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)}
|
||||
|
|
@ -417,6 +420,7 @@ 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}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
|
|||
import Image from "next/image";
|
||||
import { Calendar } from "lucide-react";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -83,58 +84,60 @@ export default function BreakingNews() {
|
|||
<div className="w-9/12">
|
||||
{mainArticle && (
|
||||
<div className="">
|
||||
<div className="grid md:grid-cols-2 gap-6 items-center">
|
||||
{/* LEFT - Image */}
|
||||
<div className="relative w-full h-[220px] md:h-[300px] overflow-hidden">
|
||||
<Image
|
||||
src={
|
||||
mainArticle.thumbnailUrl ||
|
||||
mainArticle.files?.[0]?.fileUrl ||
|
||||
"/placeholder.png"
|
||||
}
|
||||
alt={mainArticle.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* RIGHT - Content */}
|
||||
<div className="flex flex-col justify-center">
|
||||
<span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3 w-fit">
|
||||
{mainArticle.categoryName?.toUpperCase()}
|
||||
</span>
|
||||
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2 leading-snug hover:underline cursor-pointer">
|
||||
{mainArticle.title}
|
||||
</h2>
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
|
||||
<span className="font-semibold text-blue-600">
|
||||
{mainArticle.createdByName}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar size={14} />
|
||||
{new Date(mainArticle.createdAt).toLocaleDateString(
|
||||
"en-GB",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<span>0</span>
|
||||
<Link href={`/detail/${mainArticle?.id}`}>
|
||||
<div className="grid md:grid-cols-2 gap-6 items-center">
|
||||
{/* LEFT - Image */}
|
||||
<div className="relative w-full h-[220px] md:h-[300px] overflow-hidden">
|
||||
<Image
|
||||
src={
|
||||
mainArticle.thumbnailUrl ||
|
||||
mainArticle.files?.[0]?.fileUrl ||
|
||||
"/placeholder.png"
|
||||
}
|
||||
alt={mainArticle.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-600 mb-4 line-clamp-3">
|
||||
{mainArticle.description}
|
||||
</p>
|
||||
{/* RIGHT - Content */}
|
||||
<div className="flex flex-col justify-center">
|
||||
<span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3 w-fit">
|
||||
{mainArticle.categoryName?.toUpperCase()}
|
||||
</span>
|
||||
|
||||
<button className="border border-gray-400 px-4 py-2 text-xs font-semibold hover:bg-black hover:text-white transition w-fit">
|
||||
READ MORE
|
||||
</button>
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2 leading-snug hover:underline cursor-pointer">
|
||||
{mainArticle.title}
|
||||
</h2>
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
|
||||
<span className="font-semibold text-blue-600">
|
||||
{mainArticle.createdByName}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar size={14} />
|
||||
{new Date(mainArticle.createdAt).toLocaleDateString(
|
||||
"en-GB",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<span>0</span>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-600 mb-4 line-clamp-3">
|
||||
{mainArticle.description}
|
||||
</p>
|
||||
|
||||
<button className="border border-gray-400 px-4 py-2 text-xs font-semibold hover:bg-black hover:text-white transition w-fit">
|
||||
READ MORE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
|
||||
|
|
@ -165,33 +168,38 @@ export default function BreakingNews() {
|
|||
|
||||
return (
|
||||
<div key={article.id} className="group">
|
||||
{/* Image */}
|
||||
<div className="relative w-full h-[180px] overflow-hidden mb-3">
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={article.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black px-2 py-1 text-[10px] font-bold">
|
||||
{category.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<Link href={`/detail/${article?.id}`}>
|
||||
{/* Image */}
|
||||
<div className="relative w-full h-[180px] overflow-hidden mb-3">
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={article.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black px-2 py-1 text-[10px] font-bold">
|
||||
{category.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="font-semibold text-sm md:text-base mb-2 leading-snug group-hover:underline cursor-pointer">
|
||||
{article.title}
|
||||
</h3>
|
||||
{/* Title */}
|
||||
<h3 className="font-semibold text-sm md:text-base mb-2 leading-snug group-hover:underline cursor-pointer">
|
||||
{article.title}
|
||||
</h3>
|
||||
|
||||
{/* Date */}
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<Calendar size={14} />
|
||||
{new Date(article.createdAt).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</div>
|
||||
{/* Date */}
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<Calendar size={14} />
|
||||
{new Date(article.createdAt).toLocaleDateString(
|
||||
"en-GB",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
@ -219,48 +227,50 @@ export default function BreakingNews() {
|
|||
"/placeholder.png";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={article.id}
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-4"
|
||||
>
|
||||
{/* LEFT - Image */}
|
||||
<div className="relative w-full h-[180px] md:h-[140px] rounded-md overflow-hidden md:col-span-1">
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={article.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* RIGHT - Content */}
|
||||
<div className="md:col-span-2 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg md:text-xl mb-2 leading-snug hover:underline cursor-pointer">
|
||||
{article.title}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 mb-2">
|
||||
<span className="font-semibold text-blue-600">
|
||||
{article.createdByName || "DODDODYDOD"}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar size={14} />
|
||||
{new Date(article.createdAt).toLocaleDateString(
|
||||
"en-GB",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<span>0</span>
|
||||
<div key={article.id}>
|
||||
<Link
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-4"
|
||||
href={`/detail/${article?.id}`}
|
||||
>
|
||||
{/* LEFT - Image */}
|
||||
<div className="relative w-full h-[180px] md:h-[140px] rounded-md overflow-hidden md:col-span-1">
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={article.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-600 line-clamp-2">
|
||||
{article.description}
|
||||
</p>
|
||||
</div>
|
||||
{/* RIGHT - Content */}
|
||||
<div className="md:col-span-2 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg md:text-xl mb-2 leading-snug hover:underline cursor-pointer">
|
||||
{article.title}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 mb-2">
|
||||
<span className="font-semibold text-blue-600">
|
||||
{article.createdByName || "DODDODYDOD"}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar size={14} />
|
||||
{new Date(article.createdAt).toLocaleDateString(
|
||||
"en-GB",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<span>0</span>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-600 line-clamp-2">
|
||||
{article.description}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
@ -291,31 +301,36 @@ export default function BreakingNews() {
|
|||
<div className="space-y-4">
|
||||
{sideArticles.map((a) => (
|
||||
<div key={a.id} className="flex gap-3 items-center">
|
||||
<div className="relative w-20 h-16 flex-shrink-0 rounded overflow-hidden">
|
||||
<Image
|
||||
src={
|
||||
a.thumbnailUrl ||
|
||||
a.files?.[0]?.fileUrl ||
|
||||
"/placeholder.png"
|
||||
}
|
||||
alt={a.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-semibold line-clamp-2 hover:underline">
|
||||
{a.title}
|
||||
</h4>
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
|
||||
<Calendar size={12} />
|
||||
{new Date(a.createdAt).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
<Link
|
||||
className="flex gap-3 items-center"
|
||||
href={`/detail/${a?.id}`}
|
||||
>
|
||||
<div className="relative w-20 h-16 flex-shrink-0 rounded overflow-hidden">
|
||||
<Image
|
||||
src={
|
||||
a.thumbnailUrl ||
|
||||
a.files?.[0]?.fileUrl ||
|
||||
"/placeholder.png"
|
||||
}
|
||||
alt={a.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-semibold line-clamp-2 hover:underline">
|
||||
{a.title}
|
||||
</h4>
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
|
||||
<Calendar size={12} />
|
||||
{new Date(a.createdAt).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -365,48 +380,55 @@ export default function BreakingNews() {
|
|||
{/* Artikel Utama (Top 1) */}
|
||||
{popularArticles.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<div className="relative w-full h-[220px] md:h-[280px] rounded overflow-hidden">
|
||||
<Image
|
||||
src={
|
||||
popularArticles[0].thumbnailUrl ||
|
||||
popularArticles[0].files?.[0]?.fileUrl ||
|
||||
"/placeholder.png"
|
||||
}
|
||||
alt={popularArticles[0].title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-start justify-between mt-3">
|
||||
<h3 className="font-bold text-base md:text-lg leading-snug max-w-[85%]">
|
||||
{popularArticles[0].title}
|
||||
</h3>
|
||||
<span className="text-3xl font-bold text-gray-300">01</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
|
||||
<span>154 Shares</span>
|
||||
</div>
|
||||
<Link href={`/detail/${popularArticles[0]?.id}`}>
|
||||
<div className="relative w-full h-[220px] md:h-[280px] rounded overflow-hidden">
|
||||
<Image
|
||||
src={
|
||||
popularArticles[0].thumbnailUrl ||
|
||||
popularArticles[0].files?.[0]?.fileUrl ||
|
||||
"/placeholder.png"
|
||||
}
|
||||
alt={popularArticles[0].title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-start justify-between mt-3">
|
||||
<h3 className="font-bold text-base md:text-lg leading-snug max-w-[85%]">
|
||||
{popularArticles[0].title}
|
||||
</h3>
|
||||
<span className="text-3xl font-bold text-gray-300">01</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
|
||||
<span>154 Shares</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Artikel 2 - 5 */}
|
||||
<div className="space-y-4">
|
||||
{popularArticles.slice(1, 5).map((a, i) => (
|
||||
<div key={a.id} className="flex items-center gap-3">
|
||||
{/* Nomor Urut */}
|
||||
<div className="w-10 h-10 flex items-center justify-center rounded-full border text-sm font-bold text-gray-500">
|
||||
{String(i + 2).padStart(2, "0")}
|
||||
</div>
|
||||
|
||||
{/* Judul & Info */}
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-semibold line-clamp-2 hover:underline">
|
||||
{a.title}
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-400 mt-1">
|
||||
<span>{154 - i} Shares</span>
|
||||
<div key={a.id}>
|
||||
<Link
|
||||
className="flex items-center gap-3"
|
||||
href={`/detail/${a?.id}`}
|
||||
>
|
||||
{/* Nomor Urut */}
|
||||
<div className="w-10 h-10 flex items-center justify-center rounded-full border text-sm font-bold text-gray-500">
|
||||
{String(i + 2).padStart(2, "0")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Judul & Info */}
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-semibold line-clamp-2 hover:underline">
|
||||
{a.title}
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-400 mt-1">
|
||||
<span>{154 - i} Shares</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
|
|||
import Image from "next/image";
|
||||
import { Calendar } from "lucide-react";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -72,38 +73,40 @@ export default function Header() {
|
|||
key={article.id}
|
||||
className="relative h-[438px] md:h-[438px] overflow-hidden"
|
||||
>
|
||||
{/* Background Image */}
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={article.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<Link href={`/detail/${article?.id}`}>
|
||||
{/* Background Image */}
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={article.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
|
||||
{/* Overlay Warna */}
|
||||
<div
|
||||
className={`absolute inset-0 ${
|
||||
overlayColors[idx] || "bg-black/50"
|
||||
}`}
|
||||
></div>
|
||||
{/* Overlay Warna */}
|
||||
<div
|
||||
className={`absolute inset-0 ${
|
||||
overlayColors[idx] || "bg-black/50"
|
||||
}`}
|
||||
></div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-white text-center">
|
||||
<span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3">
|
||||
{category.toUpperCase()}
|
||||
</span>
|
||||
<h3 className="text-lg md:text-2xl font-bold mb-3 leading-snug">
|
||||
{article.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-200">
|
||||
<Calendar size={14} />
|
||||
{new Date(article.createdAt).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
{/* Content */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-white text-center">
|
||||
<span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3">
|
||||
{category.toUpperCase()}
|
||||
</span>
|
||||
<h3 className="text-lg md:text-2xl font-bold mb-3 leading-snug">
|
||||
{article.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-200">
|
||||
<Calendar size={14} />
|
||||
{new Date(article.createdAt).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -24,7 +26,19 @@ type Article = {
|
|||
export default function BumnNews() {
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
const [popular, setPopular] = useState<Article[]>([]);
|
||||
const [categoryName, setCategoryName] = useState("Bumn News");
|
||||
const pathname = usePathname(); // ⬅️ "/bumn-news" misalnya
|
||||
const categoryName =
|
||||
pathname
|
||||
.split("/")
|
||||
.filter(Boolean)
|
||||
.pop()
|
||||
?.replace(/-/g, " ") // ubah slug jadi teks rapi
|
||||
?.replace(/\b\w/g, (c) => c.toUpperCase()) || "News";
|
||||
|
||||
useEffect(() => {
|
||||
fetchArticles();
|
||||
fetchPopular();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchArticles();
|
||||
|
|
@ -84,30 +98,35 @@ export default function BumnNews() {
|
|||
<h1 className="text-3xl font-bold">{categoryName}</h1>
|
||||
</div>
|
||||
{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>
|
||||
<div key={item.id}>
|
||||
<Link
|
||||
className="flex gap-4 border-b pb-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>
|
||||
|
|
@ -147,43 +166,47 @@ export default function BumnNews() {
|
|||
<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>
|
||||
</div>
|
||||
<Link href={`/detail/${popular[0]?.id}`}>
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Item sisanya */}
|
||||
<div className="space-y-4">
|
||||
{popular.slice(1).map((item, i) => (
|
||||
<div
|
||||
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>
|
||||
<div key={item.id}>
|
||||
<Link
|
||||
className="flex gap-3 items-start border-b pb-2 last:border-b-0"
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue