46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import DetailNews from "../../page/detail-news";
|
|
import SidebarDetail from "../../page/sidebar-detail";
|
|
import RelatedNews from "../../page/related-news";
|
|
import Comment from "./comment";
|
|
import { getArticleById } from "@/service/article";
|
|
import { useParams } from "next/navigation";
|
|
|
|
export default function NewsDetailPage() {
|
|
const params = useParams();
|
|
const id = params.id;
|
|
const [detailArticle, setDetailArticle] = useState();
|
|
|
|
useEffect(() => {
|
|
initFetch();
|
|
}, []);
|
|
|
|
const initFetch = async () => {
|
|
const res = await getArticleById(id);
|
|
const data = res?.data?.data;
|
|
setDetailArticle(data);
|
|
};
|
|
return (
|
|
<>
|
|
<div className="text-black md:flex bg-white p-10">
|
|
<div className="w-auto md:w-[75%]">
|
|
<DetailNews data={detailArticle} />
|
|
</div>
|
|
<div className="w-auto md:w-[25%] hidden md:block">
|
|
<SidebarDetail />
|
|
</div>
|
|
</div>
|
|
<div className="bg-[#eeeeee] text-black h-auto my-2 md:my-5 lg:my-10 px-3 md:px-36">
|
|
<Comment />
|
|
</div>
|
|
<div className="px-36">
|
|
<RelatedNews />
|
|
</div>
|
|
<div className="md:hidden text-black">
|
|
<SidebarDetail />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|