src/app/p/[uploadId]/layout.tsx
Type error: Type '{ params: { uploadId: string; }; }' does not satisfy the constraint 'LayoutProps'.
  Types of property 'params' are incompatible.
    Type '{ uploadId: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

import type { Metadata } from "next";
import { Viewport } from 'next';

export async function generateViewport({ params }: { params: { uploadId: string } }): Promise<Viewport> {
    try {
        const { uploadId } = await params;
        const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
        const response = await fetch(`${baseUrl}/api/v1/public/storage/details/${uploadId}`);
        const data = await response.json();

        return {
            themeColor: data.file.embed.color || '#000000'
        };
    } catch (error) {
        return {
            themeColor: '#000000'
        };
    }
}

export async function generateMetadata({ params }: { params: { uploadId: string } }): Promise<Metadata> {
    try {
        const { uploadId } = await params;

        const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
        const Assets = process.env.NEXT_PUBLIC_ASSETS || 'http://192.168.51.4:9000'
        const response = await fetch(`${baseUrl}/api/v1/public/storage/details/${uploadId}`);
        const data = await response.json();

        const metadata = {
            title: data.file.embed.title || "Lambda / Viewing File",
            description: data.file.embed.description || "Lambda - Private file hosting service",
            openGraph: {
                title: data.file.embed.title || "Lambda / Viewing File",
                description: data.file.embed.description || "Lambda - Private file hosting service",
                images: [{
                    url: `${Assets}/${data.file.objectPath}`,
                    width: 1200,
                    height: 630,
                    alt: data.file.filename
                }]
            },
            twitter: {
                card: 'summary_large_image',
                title: data.file.embed.title || "Lambda / Viewing File",
                description: data.file.embed.description || "Lambda - Private file hosting service",
                images: [`${Assets}/${data.file.objectPath}`]
            }
        };

        return metadata;
    } catch (error) {
        return {
            title: "Lambda / Viewing File",
            description: "Lambda - Private file hosting service",
        };
    }
}

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <div className="h-[100vh]">
            {children}
        </div>
    );
}