Files
immich-folio/app/page.tsx

70 lines
2.0 KiB
TypeScript

/**
* Homepage — Split hero layout.
* Left panel: site title, subtitle, navigation links.
* Right panel: hero image from Immich.
*/
import Link from 'next/link';
import { immich } from '@/lib/immich';
import { getConfig } from '@/lib/config';
import { imageUrl } from '@/lib/urls';
// Render at request time — requires live Immich connection
export const dynamic = 'force-dynamic';
export default async function HomePage() {
const config = getConfig();
const [subpages, albums] = await Promise.all([
immich.getSubpages(),
immich.getStandaloneAlbums(),
]);
return (
<div className="hero">
{/* ── Left Panel ──────────────────────────────── */}
<div className="hero__left">
<div className="hero__content">
<h1 className="hero__title">{config.siteTitle}</h1>
{config.siteSubtitle && (
<p className="hero__subtitle">{config.siteSubtitle}</p>
)}
<nav className="hero__nav">
{subpages.map((sp) => (
<Link
key={sp.slug}
href={`/${sp.slug}`}
className="hero__nav-link"
>
{sp.name}
</Link>
))}
{albums.map((album) => (
<Link
key={album.id}
href={`/${album.slug}`}
className="hero__nav-link"
>
{album.albumName}
</Link>
))}
</nav>
</div>
</div>
{/* ── Right Panel (Hero Image) ────────────────── */}
<div className="hero__right">
{config.heroImage ? (
<img
src={imageUrl(config.heroImage, 'preview')}
alt=""
className="hero__image"
/>
) : (
<div className="hero__image-placeholder" />
)}
</div>
</div>
);
}