v5.2.0: undo/redo, version history, embedded AI assistant, mobile builder & more (#3205)

apps/web/src/features/resume/public/public-resume.tsx

@@ -1,4 +1,5 @@
 import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { CircleNotchIcon, DownloadSimpleIcon } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
 import { getRouteApi } from "@tanstack/react-router";
@@ -41,15 +42,41 @@ export function PublicResumeRoute() {
 
 	if (!resume) return <LoadingScreen />;
 
+	const { basics, picture } = resume.data;
+
 	return (
 		<>
 			<div className="mx-auto flex w-full flex-col items-center gap-6 px-4 py-6 print:m-0 print:block print:max-w-full print:p-0">
-				<div className="w-full max-w-5xl bg-white print:max-w-full">
+				<header className="flex w-full max-w-5xl flex-col items-center gap-4 text-center print:hidden">
+					{picture.url && !picture.hidden && (
+						<img src={picture.url} alt={basics.name} className="size-20 rounded-full object-cover shadow-sm" />
+					)}
+					<div className="space-y-1">
+						{basics.name && <h1 className="font-semibold text-2xl tracking-tight">{basics.name}</h1>}
+						{basics.headline && <p className="text-muted-foreground">{basics.headline}</p>}
+					</div>
+					<Button onClick={onDownloadPDF} disabled={isPrinting}>
+						{isPrinting ? (
+							<CircleNotchIcon className="size-4 animate-spin" />
+						) : (
+							<DownloadSimpleIcon className="size-4" />
+						)}
+						<Trans>Download PDF</Trans>
+					</Button>
+				</header>
+
+				<main className="w-full max-w-5xl bg-white print:max-w-full">
 					<PdfViewer data={resume.data} className="block w-full" />
-				</div>
+				</main>
 
 				<footer className="flex justify-center print:hidden">
-					<BrandIcon variant="icon" className="size-8 opacity-60" />
+					<a
+						href="/"
+						className="flex items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground"
+					>
+						<BrandIcon variant="icon" className="size-5" />
+						<Trans>Build your own resume</Trans>
+					</a>
 				</footer>
 			</div>