108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import React from "react";
|
|
|
|
interface ImageCardProps {
|
|
imageUrl: string;
|
|
label: string;
|
|
title: string;
|
|
date: string;
|
|
}
|
|
|
|
const ImageCard: React.FC<ImageCardProps> = ({ imageUrl, label, title, date }) => {
|
|
return (
|
|
<div className="relative rounded-lg overflow-hidden shadow-md">
|
|
<img src={imageUrl} alt={title} className="w-full h-full object-cover" />
|
|
<div className="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-4 text-white">
|
|
<span className="bg-red-600 text-xs font-bold px-2 py-1 rounded">{label}</span>
|
|
<h3 className="text-sm font-semibold mt-2 line-clamp-2">{title}</h3>
|
|
<span className="text-xs mt-1">{date}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ImageGallery: React.FC = () => {
|
|
const pathname = usePathname();
|
|
|
|
const images = [
|
|
{
|
|
imageUrl: "/assets/banner-sample.png",
|
|
label: "Giat Pimpinan",
|
|
title: "Foto Kapolri Dorong Transformasi Polri Presisi",
|
|
date: "2024-11-12 10:09:20 WIB",
|
|
},
|
|
{
|
|
imageUrl: "/assets/hot-topik-1.jpg",
|
|
label: "Giat Polri",
|
|
title: "Foto Kapolri Tinjau Pengungsi Gunung",
|
|
date: "2024-11-19 09:35:27 WIB",
|
|
},
|
|
{
|
|
imageUrl: "/assets/hot-topik-2.jpg",
|
|
label: "Giat Polri",
|
|
title: "Foto Kapolri dalam Acara Bersama TNI",
|
|
date: "2024-11-20 15:45:00 WIB",
|
|
},
|
|
];
|
|
|
|
const imageBottom = [
|
|
{
|
|
id: 1,
|
|
imageUrl: "/assets/hot-topik-1.jpg",
|
|
title: "Foto Kakorlantas Polri Tekankan Intervensi",
|
|
description:
|
|
"Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen. Pol. Dr. Drs. Aan Suhanan, M.Si. memimpin apel pagi di NTMC pada Senin (2/12/2024) dan menekankan pentingnya pengelolaan ekstra dalam pengamanan Natal dan Tahun Baru 2024.",
|
|
},
|
|
{
|
|
id: 2,
|
|
imageUrl: "/assets/hot-topik-1.jpg",
|
|
title: "Foto Kakorlantas Tinjau Jalur Tol, Jalur Wisata",
|
|
description: "Kakorlantas Polri Irjen.Pol. Dr. Drs. Aan Suhanan, M.Si. memimpin survei jalur tol dari Cikopo, Purwakarta hingga Kalikangkung, Jawa Tengah, untuk persiapan Operasi Lilin 2024.",
|
|
},
|
|
{
|
|
id: 3,
|
|
imageUrl: "/assets/hot-topik-2.jpg",
|
|
title: "Foto Kapolri Pastikan Kesiapan Polri Kawal Pilkada",
|
|
description: "Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo, M.Si menegaskan kesiapan Polri dalam mengawal Pilkada Serentak 2024 yang digelar Rabu, 27 November 2024.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Hero */}
|
|
<div className="max-w-screen-lg mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="md:col-span-2">
|
|
<ImageCard {...images[0]} />
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<ImageCard {...images[1]} />
|
|
<ImageCard {...images[2]} />
|
|
</div>
|
|
</div>
|
|
{/* Bottom */}
|
|
<div className="w-full">
|
|
<div className="flex flex-col gap-4">
|
|
{imageBottom.map((image) => (
|
|
<div key={image.id} className="flex flex-col md:flex-row items-start p-4 bg-white rounded-lg shadow-md hover:shadow-lg">
|
|
<div className="w-full md:w-1/3">
|
|
<img src={image.imageUrl} alt="" className="h-40 md:h-32 object-cover rounded-lg" />
|
|
</div>
|
|
<div className="flex flex-col justify-between w-full">
|
|
<Link href={`${pathname}/detail/${image.id}`} className="text-lg font-semibold text-gray-800">
|
|
{image.title}
|
|
</Link>
|
|
<p className="text-sm text-gray-600 mt-2">{image.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ImageGallery;
|