import { getRouteApi } from '@tanstack/react-router'
import { AppShell } from '../ui/layout.tsx'
import { AboutPanel } from '../ui/about-panel.tsx'

const routeApi = getRouteApi('/about')

export function AboutPage() {
	const about = routeApi.useLoaderData()
	return (
		<AppShell page="about" heading="About">
			<AboutPanel
				sha={about.sha}
				shortSha={about.shortSha}
				message={about.message}
				publishedAt={about.publishedAt}
				committedAt={about.committedAt}
				codeUrl={about.codeUrl}
				runningSha={about.runningSha || about.sha}
				appId="__PACKAGE_ID__"
			/>
		</AppShell>
	)
}