mediahub-fe/app/[locale]/(public)/image/detail/[slug]/page.tsx

import React, { useEffect, useState } from "react";
import {
  checkWishlistStatus,
  createPublicSuggestion,
  deletePublicSuggestion,
  deleteWishlist,
  getDetail,
  getDetailMetaData,
  getPublicSuggestionList,
  saveWishlist,
} from "@/service/landing/landing";
import { Metadata } from "next";
import DetailImage from "@/components/main/image-detail";

interface Size {
  label: string;
  value: string;
}

type Props = {
  params: {
    title: string;
    slug: string;
    description: string;
    thumbnailLink: string;
  };
};

export async function generateMetadata({ params }: any): Promise<Metadata> {
  const slug = String(params?.slug);
  const res = await getDetailMetaData(String(slug));
  const image = res?.data?.data;
  // console.log("image", image);
  return {
    title: image.title,
    description: image.description,
    openGraph: {
      title: image?.title,
      description: image?.description,
      images: [`${image?.smallThumbnailLink}`],
    },
  };
}

export default async function DetailInfo({ params }: Props) {
  return <div className="w-full"><DetailImage /></div>;
}