85 lines
3.5 KiB
TypeScript
85 lines
3.5 KiB
TypeScript
import Link from "next/link";
|
|
import { ChapterContent } from "@/components/ChapterContent";
|
|
import { ChapterNav } from "@/components/ChapterNav";
|
|
import { ReadSidebar } from "@/components/ReadSidebar";
|
|
import { ReadingProgress } from "@/components/ReadingProgress";
|
|
import { SiteHeader } from "@/components/SiteHeader";
|
|
import { chapters, ebookMeta } from "@/content/ebook";
|
|
|
|
export const metadata = {
|
|
title: `Read — ${ebookMeta.title} | Digital Nomad Guide`,
|
|
description: ebookMeta.subtitle,
|
|
};
|
|
|
|
export default function ReadPage() {
|
|
return (
|
|
<div className="relative min-h-screen">
|
|
<SiteHeader ctaLabel="Home" ctaHref="/" showBack />
|
|
<ReadingProgress />
|
|
|
|
<div className="mx-auto flex max-w-6xl gap-10 px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
|
|
<ReadSidebar />
|
|
|
|
<div className="min-w-0 flex-1" style={{ maxWidth: "var(--read-max)" }}>
|
|
<header className="mb-10 border-b border-[var(--border)] pb-10 text-center sm:mb-12 sm:pb-12">
|
|
<p className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--accent)]">
|
|
Digital nomad · English
|
|
</p>
|
|
<h1 className="mt-4 font-serif text-3xl font-medium tracking-tight sm:text-4xl">
|
|
<span className="gradient-text">{ebookMeta.title}</span>
|
|
</h1>
|
|
<p className="mx-auto mt-3 max-w-lg text-[var(--muted)] leading-relaxed">
|
|
{ebookMeta.subtitle}
|
|
</p>
|
|
<p className="mt-3 text-sm text-[var(--muted)]">
|
|
{ebookMeta.author} · {ebookMeta.readTime} · {ebookMeta.pages} pages
|
|
</p>
|
|
<Link href="/" className="btn-secondary mt-6 text-sm lg:hidden">
|
|
← Landing page
|
|
</Link>
|
|
</header>
|
|
|
|
<article className="prose-ebook">
|
|
{chapters.map((chapter, index) => (
|
|
<section
|
|
key={chapter.id}
|
|
id={chapter.id}
|
|
className={
|
|
index > 0
|
|
? "mt-16 scroll-mt-[calc(var(--header-h)+1.5rem)] border-t border-[var(--border)] pt-16 sm:mt-20 sm:pt-20"
|
|
: "scroll-mt-[calc(var(--header-h)+1.5rem)]"
|
|
}
|
|
>
|
|
<h2>{chapter.title}</h2>
|
|
{chapter.summary ? (
|
|
<p className="chapter-lead">{chapter.summary}</p>
|
|
) : null}
|
|
<ChapterContent content={chapter.content} />
|
|
<ChapterNav chapterId={chapter.id} />
|
|
</section>
|
|
))}
|
|
</article>
|
|
|
|
<footer className="mt-16 rounded-2xl border border-[var(--border)] bg-[var(--surface)] px-6 py-10 text-center backdrop-blur-md sm:mt-20">
|
|
<p className="font-display text-lg font-bold text-[var(--foreground)]">
|
|
You've finished the trailhead
|
|
</p>
|
|
<p className="mt-2 text-sm text-[var(--muted)]">
|
|
Pick one habit from this guide and test it in your next base. Safe
|
|
travels—and deep work.
|
|
</p>
|
|
<div className="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
|
<Link href="/" className="btn-secondary">
|
|
Back to home
|
|
</Link>
|
|
<a href="#introduction" className="btn-primary">
|
|
Re-read intro
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|