web-humas-fe/app/static/[slug]/page.tsx

"use client";

import { HumasLayout } from "@/components/layout/humas-layout";
import { getCustomStaticDetailBySlug } from "@/services/static-page-service";
import { Card, CircularProgress } from "@heroui/react";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";

export default function StaticPage() {
  const params = useParams();
  const slug = params.slug;
  const [customData, setCustomData] = useState<any>();

  useEffect(() => {
    setCustomData(undefined);
    initFetch();
  }, [slug]);

  const initFetch = async () => {
    const res = await getCustomStaticDetailBySlug(slug ? String(slug) : "");
    const data = res?.data?.data;
    setCustomData(data);
  };

  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) return null;
  return (
    <HumasLayout>
      {customData ? (
        <>
          <div className="flex justify-center items-center">
            <div className="pt-4 hidden md:block">
              <img src="/al.png" alt="" className="" />
            </div>
            <div className="font-bold text-lg md:text-2xl text-[#DD8306]">
              {customData?.title}
            </div>
            <div className="hidden md:block absolute pb-10 pl-[310px]">
              <img src="spark.png" alt="" />
            </div>
          </div>
          <div className="rounded-md p-2 md:px-10 ">
            <div dangerouslySetInnerHTML={{ __html: customData?.htmlBody }} />
          </div>
        </>
      ) : (
        <div className="w-full justify-center flex">NO DATA</div>
      )}
    </HumasLayout>
  );
}