motto/src/app/[...file]/page.tsx

import type { Metadata, ResolvingMetadata } from 'next';
import Image from 'next/image';

import Content from './content';
import * as style from './page.css';
import download_image from './download.svg';

type SearchParams = { [key: string]: string | string[] | undefined };

type Props = {
	params: { file: string },
	searchParams: SearchParams,
};

function get_path(file: string[]) {
	return file.join("/");
}

function get_root(search_params: SearchParams) {
	return search_params['root'] ?? 'raw.monodon.me';
}

export async function generateMetadata(
	{ params, searchParams }: Props,
	parent: ResolvingMetadata,
): Promise<Metadata> {
	return {
		title: `${get_path(params.file)} | ${get_root(searchParams)}`,
	};
}

export default async function Page({
	params, searchParams
}: Props) {
	const path = get_path(params.file);
	const root = `https://${get_root(searchParams)}/`;

	return (
		<div className={style.root}>
			<div className={style.center}>
				<div className={style.title_group}>
					<div className={style.title_text_group}>
		 				<p className={style.supertitle}>{root}</p>
						<p className={style.title}>{path}</p>
					</div>
					<button className={style.download_button}>
						<Image
							className={style.download_button_image}
							src={download_image}
							alt="Download Button"
						/>
					</button>
				</div>
				<Content src={`${root}${path}`} />
			</div>
		</div>
	);
}