118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import React, { useEffect, useRef, useState } from "react";
|
|
import NewsTicker from "react-advanced-news-ticker"
|
|
import { CarouselItem } from "../ui/carousel";
|
|
|
|
|
|
// Definisikan tipe data untuk carousel item
|
|
interface CarouselItem {
|
|
id: number;
|
|
title: string;
|
|
name?: string;
|
|
slug: string;
|
|
fileType?: {
|
|
id: number;
|
|
};
|
|
createdAt: string;
|
|
}
|
|
|
|
const NewsBottom: React.FC = () => {
|
|
const [content, setContent] = useState<CarouselItem[]>([]);
|
|
const newsTickerRef = useRef<any>(null);
|
|
|
|
useEffect(() => {
|
|
async function fetchCarouselData() {
|
|
try {
|
|
const response = await CarouselItem();
|
|
setContent(response.data?.data || []);
|
|
console.log("Carousel data:", response.data?.data);
|
|
} catch (error) {
|
|
console.error("Error fetching carousel data:", error);
|
|
}
|
|
}
|
|
|
|
fetchCarouselData();
|
|
}, []);
|
|
|
|
function formatDateIndonesianWithTime(dateString: string): string {
|
|
const options: Intl.DateTimeFormatOptions = {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
};
|
|
|
|
const formattedDate = new Date(dateString).toLocaleDateString("id-ID", options);
|
|
|
|
return formattedDate.replace("pukul", "-");
|
|
}
|
|
|
|
const dummyNews: CarouselItem[] = Array.from({ length: 10 }, (_, index) => ({
|
|
id: index + 1,
|
|
title: `Berita ${index + 1}`,
|
|
name: `Penulis ${index + 1}`,
|
|
slug: "",
|
|
createdAt: new Date().toISOString(),
|
|
}));
|
|
|
|
return (
|
|
<section className="section-news fixed-bottom">
|
|
<div className="breaking-news pt-3 pl-3">Breaking News</div>
|
|
<div className="news pt-3">
|
|
{content.length > 0 ? (
|
|
<NewsTicker
|
|
maxRows={1}
|
|
rowHeight={45}
|
|
duration={4000}
|
|
ref={newsTickerRef}
|
|
autoStart={true}
|
|
style={{ listStyleType: "none" }}
|
|
>
|
|
{content.map((item) => (
|
|
<div key={item.id} className="news-item">
|
|
<a
|
|
style={{ color: "black" }}
|
|
href={
|
|
Number(item.fileType?.id) === 1
|
|
? `/image/detail/${item.slug}`
|
|
: Number(item.fileType?.id) === 2
|
|
? `/video/detail/${item.slug}`
|
|
: Number(item.fileType?.id) === 3
|
|
? `/document/detail/${item.slug}`
|
|
: `/audio/detail/${item.slug}`
|
|
}
|
|
>
|
|
{item.title}.
|
|
</a>
|
|
<div>{formatDateIndonesianWithTime(item.createdAt)}</div>
|
|
</div>
|
|
))}
|
|
</NewsTicker>
|
|
) : (
|
|
<p className="pl-4">Loading...</p> // Tampilkan pesan "Loading..." saat data belum tersedia.
|
|
)}
|
|
</div>
|
|
<div className="navigation pr-0 mr-0">
|
|
<button
|
|
className="arrow-button left"
|
|
onClick={() => {
|
|
newsTickerRef.current?.moveDown();
|
|
}}
|
|
>
|
|
◀
|
|
</button>
|
|
<button
|
|
className="arrow-button right"
|
|
onClick={() => {
|
|
newsTickerRef.current?.moveUp();
|
|
}}
|
|
>
|
|
▶
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default NewsBottom;
|