web-humas-fe/components/main/detail/new-detail.tsx

"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>
    </>
  );
}