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;
|