83 lines
3.1 KiB
TypeScript
83 lines
3.1 KiB
TypeScript
|
import React, { useEffect, useState } from "react";
|
|||
|
|
|
|||
|
|
const images = ["/assets/banner-sample.png", "/assets/img-header-blog.png"];
|
|||
|
|
|
|||
|
|
const Hero: React.FC = () => {
|
|||
|
|
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
|||
|
|
useEffect(() => {
|
|||
|
|
const intervalId = setInterval(() => {
|
|||
|
|
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
|
|||
|
|
}, 10000);
|
|||
|
|
return () => clearInterval(intervalId);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className="flex flex-col lg:flex-row items-start gap-4 p-4 max-w-screen-xl h-fit mx-auto">
|
|||
|
|
{/* Section Gambar Utama */}
|
|||
|
|
<div className="lg:w-2/3 w-full">
|
|||
|
|
<div className="relative">
|
|||
|
|
<img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full rounded-lg" />
|
|||
|
|
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
|
|||
|
|
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
|
|||
|
|
<h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
|
|||
|
|
<p className="text-sm mt-1">15 Maret 2024 14:01 WIB | 👁️ 633</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Section Daftar Artikel */}
|
|||
|
|
<div className="lg:w-1/3 w-full">
|
|||
|
|
<ul className="space-y-4">
|
|||
|
|
{[
|
|||
|
|
{
|
|||
|
|
label: "OPS MANTAP PRAJA & PILKADA 2024",
|
|||
|
|
title: "Doa Bersama Lintas Agama Jelang Pilkada di Papua",
|
|||
|
|
time: "26 November 2024 16:33 WIT",
|
|||
|
|
views: 13,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "OPS MANTAP PRAJA & PILKADA 2024",
|
|||
|
|
title: "Potret Pengawalan Distribusi Logistik Pilkada ke Distrik-distrik di Kabupaten Yahukimo",
|
|||
|
|
time: "26 November 2024 16:29 WIT",
|
|||
|
|
views: 29,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "INFOGRAFIS",
|
|||
|
|
title: "Dirgahayu ke-62 Seskoal",
|
|||
|
|
time: "26 November 2024 16:26 WIB",
|
|||
|
|
views: 2,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "UNGKAP KASUS",
|
|||
|
|
title: "Evakuasi 30 Korban Kecelakaan Maut Truk di Tolikara",
|
|||
|
|
time: "26 November 2024 16:25 WIT",
|
|||
|
|
views: 26,
|
|||
|
|
},
|
|||
|
|
].map((item, index) => (
|
|||
|
|
<li key={index} className="flex gap-4 items-start bg-white shadow rounded-lg p-4">
|
|||
|
|
<div className="flex-shrink-0 w-24 h-16 bg-gray-200 rounded-lg">
|
|||
|
|
{/* Placeholder Thumbnail */}
|
|||
|
|
<img
|
|||
|
|
src="/"
|
|||
|
|
alt={item.title}
|
|||
|
|
className="w-full h-full object-cover rounded-lg"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg text-xs font-bold uppercase">{item.label}</span>
|
|||
|
|
<h3 className="text-sm font-bold mt-2">{item.title}</h3>
|
|||
|
|
<p className="text-xs text-gray-500 mt-1">
|
|||
|
|
{item.time} | 👁️ {item.views}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Hero;
|