"use client";
import ImageHeader from "@/components/imageHeader";
import { useEffect, useState } from "react";
import { IoChevronForwardOutline, IoHome } from "react-icons/io5";
export default function N219Training() {
const [data, setData] = useState({ id: "", title: "", content: "" });
const contentId = 3;
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(
`http://localhost:5000/api/content/${contentId}`
);
const jsonData = await response.json();
console.log(jsonData);
setData(jsonData);
} catch (error) {
console.error("Error fetching data:", error);
}
}
fetchData();
}, [contentId]);
return (
<div>
<ImageHeader />
<div>
<nav
className="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50"
aria-label="Breadcrumb"
>
<ol className="inline-flex items-center space-x-1 md:space-x-3">
<li className="inline-flex items-center">
<a
href="#"
className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-700"
>
<IoHome className="w-3 h-3 mr-2.5" />
Home
</a>
</li>
<li aria-current="page">
<div className="flex items-center">
<IoChevronForwardOutline className="w-4 h-4 mx-1 text-gray-400" />
<span className="ml-1 text-sm font-medium text-gray-500 md:ml-2">
Training
</span>
</div>
</li>
<li aria-current="page">
<div className="flex items-center">
<IoChevronForwardOutline className="w-4 h-4 mx-1 text-gray-400" />
<span className="ml-1 text-sm font-medium text-gray-500 md:ml-2">
Training Detail
</span>
</div>
</li>
</ol>
</nav>
</div>
{/* Content */}
<div className="relative min-h-screen bg-gradient-to-r from-blue-900 to-blue-600 p-4 md:p-8">
<div className="flex px-2 pb-4 pt-8 md:px-8">
<div className="text-3xl font-bold text-gray-200 border-b-4 border-pink-600 mb-4">
{data.title}
</div>
</div>
<div className="flex flex-col p-8 bg-sky-100 rounded-md mx-2 md:mx-8">
<div>
<div
className="mb-2 space-y-2 list-outside list-disc"
dangerouslySetInnerHTML={{ __html: data.content }}
></div>
</div>
</div>
</div>
</div>
);
}