87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
import React from "react";
|
|
import { Link } from "@inertiajs/react";
|
|
import { Post } from "@/components/DetailArtikel/types";
|
|
|
|
interface DetailSearchProps {
|
|
searchResults: Post[];
|
|
searchQuery: string;
|
|
}
|
|
|
|
export default function DetailSearch({
|
|
searchResults,
|
|
searchQuery,
|
|
}: DetailSearchProps) {
|
|
const getRouteByCategory = (kategori: string, slug: string) => {
|
|
const routes: { [key: string]: string } = {
|
|
Pengumuman: `/pengumuman/${slug}`,
|
|
Peraturan: `/peraturan/${slug}`,
|
|
Undangan: `/undangan/${slug}`,
|
|
};
|
|
|
|
return routes[kategori] || `/sekilasinfo/${slug}`;
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold mb-2">Hasil Pencarian</h1>
|
|
<p className="text-gray-600">
|
|
Menampilkan hasil untuk "{searchQuery}" (
|
|
{searchResults.length} hasil)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{searchResults.map((result) => (
|
|
<Link
|
|
key={result.PostId}
|
|
href={getRouteByCategory(
|
|
result.kategori?.NamaKategori || "",
|
|
result.SlugPost
|
|
)}
|
|
className="group"
|
|
>
|
|
<div className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow h-full">
|
|
<img
|
|
src={`/storage/${result.ImagePost}`}
|
|
alt={result.JudulPost}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
<div className="p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="bg-red-500 text-white px-2 py-1 text-xs rounded">
|
|
{result.kategori?.NamaKategori}
|
|
</span>
|
|
<span className="text-sm text-gray-500">
|
|
{new Date(
|
|
result.created_at
|
|
).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
</div>
|
|
<h2 className="font-semibold mb-2 group-hover:text-red-600 transition-colors">
|
|
{result.JudulPost}
|
|
</h2>
|
|
<p className="text-sm text-gray-600 line-clamp-2">
|
|
{result.DescPost.replace(/<[^>]*>/g, "")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{searchResults.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<p className="text-gray-500">
|
|
Tidak ada hasil yang ditemukan
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|