Billy Marcello
97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import Footer from "../Layout/Footer";
|
|
import Navbar from "../Layout/Navbar";
|
|
import { useEffect, useState } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
|
|
type ResearchItem = {
|
|
id: number;
|
|
image_path: string;
|
|
nama_project: string;
|
|
deskripsi: string;
|
|
link_project: string;
|
|
created_at: string;
|
|
};
|
|
|
|
const DetailsProduct = () => {
|
|
const { id } = useParams<{ id: string }>();
|
|
const [product, setProduct] = useState<ResearchItem | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!id) return;
|
|
|
|
fetch(`${import.meta.env.VITE_API_BASE_URL}/hasil-research-api/get/${id}`)
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
if (data && data.data) {
|
|
setProduct(data.data);
|
|
} else {
|
|
setProduct(null);
|
|
}
|
|
setLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
console.error("Gagal fetch data:", err);
|
|
setLoading(false);
|
|
});
|
|
}, [id]);
|
|
|
|
if (loading) {
|
|
return <div className="text-center mt-10">Loading...</div>;
|
|
}
|
|
|
|
if (!product) {
|
|
return (
|
|
<div className="text-center mt-10 text-red-500">Data tidak ditemukan</div>
|
|
);
|
|
}
|
|
console.log(`${import.meta.env.VITE_API_BASE_URL}${product.image_path}`);
|
|
|
|
|
|
return (
|
|
<div className="body-details-of-product bg-[#F8F9FA] min-h-screen">
|
|
{/* Navbar Section */}
|
|
<div className="navbar-section py-[20px]">
|
|
<Navbar />
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div className="title-of-content flex justify-center mt-[20px] mx-4 md:mx-[20px] mb-[30px] text-center">
|
|
<h2 className="text-[24px] md:text-[32px] font-bold">
|
|
{product.nama_project}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="content-container flex flex-col gap-[60px] mx-4 md:mx-[100px]">
|
|
{/* Image */}
|
|
<img
|
|
src={`${import.meta.env.VITE_API_BASE_URL}${product.image_path}`}
|
|
alt={product.nama_project}
|
|
className="w-full max-h-[500px] object-cover rounded-xl"
|
|
/>
|
|
|
|
{/* Deskripsi */}
|
|
<div
|
|
className="paragraf-section prose max-w-none text-[15px] md:text-[16px]"
|
|
dangerouslySetInnerHTML={{ __html: product.deskripsi }}
|
|
/>
|
|
|
|
{product.link_project && (
|
|
<a
|
|
href={product.link_project}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-6 inline-block text-blue-600 underline hover:text-blue-800"
|
|
>
|
|
Lihat Project ↗
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DetailsProduct;
|