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

update

This commit is contained in:
Anang Yusman 2025-10-12 17:21:22 +08:00
parent 437eded657
commit 41812a6696
6 changed files with 403 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/page.tsx
View File

@ -12,14 +12,7 @@ export default function Home() {
<div className="flex-1 bg-gray-300 mt-10">
<Header />
<BreakingNews />
<div className="max-w-7xl mx-auto px-4 relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
<Image
src={"/image-kolom.png"}
alt="Berita Utama"
fill
className="w-full object-cover"
/>
</div>
<News />
</div>
<Footer />

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

@ -6,6 +6,7 @@ import { getArticleById, getListArticle } from "@/service/article";
import { close, loading } from "@/config/swal";
import { useParams } from "next/navigation";
import { Link2, MailIcon } from "lucide-react";
import { getAdvertise } from "@/service/advertisement";
type TabKey = "trending" | "comments" | "latest";
@ -32,6 +33,15 @@ interface CategoryType {
value: number;
}
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function DetailContent() {
const params = useParams();
const id = params?.id;
@ -68,6 +78,36 @@ export default function DetailContent() {
{ id: "latest", label: "Latest" },
];
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
useEffect(() => {
initStateAdver();
}, []);
async function initStateAdver() {
const req = {
limit: 100,
page: 1,
sort: "desc",
sortBy: "created_at",
isPublish: true,
};
try {
const res = await getAdvertise(req);
const data: Advertise[] = res?.data?.data || [1];
// filter iklan dengan placement = "banner"
const banner = data.find((ad) => ad.placement === "jumbotron");
if (banner) {
setBannerAd(banner);
}
} catch (err) {
console.error("Error fetching advertisement:", err);
}
}
useEffect(() => {
fetchTabArticles();
}, [activeTab]);
@ -519,13 +559,32 @@ export default function DetailContent() {
<div className="md:col-span-1 space-y-6">
<div className="sticky top-0 space-y-6">
<div className="bg-white shadow p-4 rounded-lg">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={"/kolom.png"}
alt="Iklan"
width={345}
height={345}
className="rounded"
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
<button className="mt-4 w-full bg-black text-white py-2 rounded hover:opacity-90">
Learn More
</button>

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

@ -9,7 +9,7 @@ import { CloudUploadIcon, TimesIcon } from "@/components/icons";
import Image from "next/image";
import ReactSelect from "react-select";
import makeAnimated from "react-select/animated";
import { htmlToString } from "@/utils/global";
import { convertDateFormatNoTime, htmlToString } from "@/utils/global";
import { close, error, loading, successToast } from "@/config/swal";
import { useRouter } from "next/navigation";
import Link from "next/link";
@ -44,6 +44,13 @@ import GenerateSingleArticleForm from "./generate-ai-single-form";
import GenerateContentRewriteForm from "./generate-ai-content-rewrite-form";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import DatePicker from "react-datepicker";
const CustomEditor = dynamic(
() => {
@ -121,8 +128,8 @@ export default function CreateArticleForm() {
"publish"
);
const [isScheduled, setIsScheduled] = useState(false);
const [startDateValue, setStartDateValue] = useState<any>(null);
const [startDateValue, setStartDateValue] = useState<Date | undefined>();
const [startTimeValue, setStartTimeValue] = useState<string>("");
const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => {
@ -332,12 +339,34 @@ export default function CreateArticleForm() {
}
}
if (status === "scheduled") {
if (status === "scheduled" && startDateValue) {
// ambil waktu, default 00:00 jika belum diisi
const [hours, minutes] = startTimeValue
? startTimeValue.split(":").map(Number)
: [0, 0];
// gabungkan tanggal + waktu
const combinedDate = new Date(startDateValue);
combinedDate.setHours(hours, minutes, 0, 0);
// format: 2025-10-08 14:30:00
const formattedDateTime = `${combinedDate.getFullYear()}-${String(
combinedDate.getMonth() + 1
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
2,
"0"
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
combinedDate.getMinutes()
).padStart(2, "0")}:00`;
const request = {
id: articleId,
date: `${startDateValue?.year}-${startDateValue?.month}-${startDateValue?.day}`,
date: formattedDateTime,
};
console.log("📤 Sending schedule request:", request);
const res = await createArticleSchedule(request);
console.log("✅ Schedule response:", res);
}
close();
@ -812,32 +841,49 @@ export default function CreateArticleForm() {
</label>
</div>
{/* {isScheduled && (
<div className="flex flex-col lg:flex-row gap-3">
<div className="w-full lg:w-[140px] flex flex-col gal-2 ">
{isScheduled && (
<div className="flex flex-col lg:flex-row gap-3 mt-2">
{/* Pilih tanggal */}
<div className="w-full lg:w-[140px] flex flex-col gap-2">
<p className="text-sm">Tanggal</p>
<Popover>
<PopoverTrigger>
<Button
type="button"
className="w-full !h-[30px] lg:h-[40px] border-1 rounded-lg text-black"
className="w-full !h-[37px] lg:h-[37px] border-1 rounded-lg text-black"
variant="outline"
>
{startDateValue
? convertDateFormatNoTime(startDateValue)
? startDateValue.toISOString().split("T")[0]
: "-"}
</Button>
</PopoverTrigger>
<PopoverContent className="bg-transparent p-0">
<Calendar
<DatePicker
selected={startDateValue}
onSelect={setStartDateValue}
onChange={(date) =>
setStartDateValue(date ?? undefined)
}
dateFormat="yyyy-MM-dd"
className="w-full border rounded-lg px-2 py-1 text-black cursor-pointer h-[150px]"
placeholderText="Pilih tanggal"
/>
</PopoverContent>
</Popover>
</div>
{/* Pilih waktu */}
<div className="w-full lg:w-[140px] flex flex-col gap-2">
<p className="text-sm">Waktu</p>
<input
type="time"
value={startTimeValue}
onChange={(e) => setStartTimeValue(e.target.value)}
className="w-full border rounded-lg px-2 py-[6px] text-black"
/>
</div>
)} */}
</div>
)}
</div>
</div>

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

@ -6,6 +6,7 @@ import { Calendar, Eye, MessageSquare } from "lucide-react";
import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article";
import Link from "next/link";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -19,10 +20,49 @@ type Article = {
files: { fileUrl: string; file_alt: string }[];
};
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function Header() {
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("5");
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
useEffect(() => {
initStateAdver();
}, []);
async function initStateAdver() {
const req = {
limit: 100,
page: 1,
sort: "desc",
sortBy: "created_at",
isPublish: true,
};
try {
const res = await getAdvertise(req);
const data: Advertise[] = res?.data?.data || [1];
// filter iklan dengan placement = "banner"
const banner = data.find((ad) => ad.placement === "jumbotron");
if (banner) {
setBannerAd(banner);
}
} catch (err) {
console.error("Error fetching advertisement:", err);
}
}
useEffect(() => {
fetchArticles();
}, [showData]);
@ -160,12 +200,32 @@ export default function Header() {
{/* Kolom PPS */}
<div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/kolom.png"
alt="Berita Utama"
fill
className="object-contain rounded"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
</aside>
</div>

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

@ -4,6 +4,7 @@ import Image from "next/image";
import { getListArticle } from "@/service/article";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -17,12 +18,49 @@ type Article = {
files: { fileUrl: string; file_alt: string }[];
};
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function LatestNews() {
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("5");
const pathname = usePathname();
const currentSlug = pathname.split("/")[2] || "";
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
useEffect(() => {
initStateAdver();
}, []);
async function initStateAdver() {
const req = {
limit: 100,
page: 1,
sort: "desc",
sortBy: "created_at",
isPublish: true,
};
try {
const res = await getAdvertise(req);
const data: Advertise[] = res?.data?.data || [1];
// filter iklan dengan placement = "banner"
const banner = data.find((ad) => ad.placement === "jumbotron");
if (banner) {
setBannerAd(banner);
}
} catch (err) {
console.error("Error fetching advertisement:", err);
}
}
useEffect(() => {
fetchArticles();
}, []);
@ -108,13 +146,33 @@ export default function LatestNews() {
</p>
<h3 className="text-center text-md font-bold mb-4">ADVERTISEMENT</h3>
<div className="relative w-full h-[300px] bg-gray-100">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src="/adversment.png"
alt="Advertisement"
fill
className="object-contain"
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
<button className="mt-4 text-xs bg-black text-white px-4 py-2 hover:bg-gray-800">
LEARN MORE
</button>

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

@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
import Image from "next/image";
import { getListArticle } from "@/service/article";
import Link from "next/link";
import { getAdvertise } from "@/service/advertisement";
// Type dari API
type Article = {
@ -17,13 +18,50 @@ type Article = {
files: { fileUrl: string; file_alt: string }[];
};
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function News() {
const [articlesByCategory, setArticlesByCategory] = useState<
Record<string, Article[]>
>({});
const [loading, setLoading] = useState(true);
const [visiblePosts, setVisiblePosts] = useState<Record<string, number>>({});
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
useEffect(() => {
initStateAdver();
}, []);
async function initStateAdver() {
const req = {
limit: 100,
page: 1,
sort: "desc",
sortBy: "created_at",
isPublish: true,
};
try {
const res = await getAdvertise(req);
const data: Advertise[] = res?.data?.data || [];
// filter iklan dengan placement = "banner"
const banner = data.find((ad) => ad.placement === "banner");
if (banner) {
setBannerAd(banner);
}
} catch (err) {
console.error("Error fetching advertisement:", err);
}
}
useEffect(() => {
fetchArticles();
}, []);
@ -67,6 +105,35 @@ export default function News() {
}
return (
<>
<div className="max-w-7xl mx-auto relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/image-kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
{loading && <p className="text-center">Memuat data...</p>}
@ -92,16 +159,38 @@ export default function News() {
{/* Banner Kolom PPS */}
<div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[350px] flex justify-center">
<Image
src={"/image-kolom.png"}
alt="Kolom PPS"
fill
className="w-full object-cover"
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={350}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/image-kolom.png"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
{/* Posts bawah (pakai visiblePosts[category]) */}
{postsBottom.slice(0, visiblePosts[category] || 2).map((post) => (
{postsBottom
.slice(0, visiblePosts[category] || 2)
.map((post) => (
<PostItem key={post.id} post={post} />
))}
@ -125,6 +214,7 @@ export default function News() {
);
})}
</div>
</>
);
}