60 lines
2.8 KiB
TypeScript
60 lines
2.8 KiB
TypeScript
import type { Metadata } from "next";
|
|
import messages from "../../../messages/en/index";
|
|
import { getTranslation } from "../../../lib/i18n/getTranslation";
|
|
import { routeMetadata } from "../../../lib/siteMetadata";
|
|
import ContentThumbnailTemplate from "../../components/content/ContentThumbnailTemplate";
|
|
import ContentLockup from "../../components/type/ContentLockup";
|
|
import AskOrganizer from "../../components/sections/AskOrganizer";
|
|
import { getAllBlogPosts } from "../../../lib/content";
|
|
|
|
export const metadata: Metadata = routeMetadata("/learn", {
|
|
title: messages.metadata.learn.title,
|
|
});
|
|
|
|
export default function LearnPage() {
|
|
const allPosts = getAllBlogPosts();
|
|
|
|
const t = (key: string) => getTranslation(messages, key);
|
|
|
|
const contentLockupData = {
|
|
title: t("pages.learn.contentLockup.title"),
|
|
subtitle: t("pages.learn.contentLockup.subtitle"),
|
|
variant: "learn" as const,
|
|
alignment: "left" as const,
|
|
};
|
|
|
|
const askOrganizerData = {
|
|
title: t("pages.learn.askOrganizer.title"),
|
|
subtitle: t("pages.learn.askOrganizer.subtitle"),
|
|
description: t("pages.learn.askOrganizer.description"),
|
|
buttonText: t("pages.learn.askOrganizer.buttonText"),
|
|
variant: "centered" as const,
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
|
<ContentLockup {...contentLockupData} />
|
|
|
|
{/*
|
|
* Single responsive render: ContentThumbnailTemplate variant="responsive"
|
|
* uses <picture> to swap horizontal/vertical art at smd (530px). Wrap and
|
|
* center leftover cards so a short last row is not left-aligned.
|
|
*/}
|
|
<div
|
|
data-testid="learn-article-grid"
|
|
className="flex flex-col space-y-[var(--space-050)] sm:space-y-[var(--space-200)] sm:px-[var(--space-500)] sm:pt-[var(--space-600)] sm:pb-[var(--space-600)] smd:flex-row smd:flex-wrap smd:justify-center smd:gap-[var(--space-200)] smd:space-y-0 smd:px-[var(--space-500)] smd:pt-[var(--space-600)] smd:pb-[var(--space-600)] md:gap-[var(--space-400)] md:px-[var(--space-800)] xmd:gap-[var(--space-300)] lg:gap-[var(--space-400)] lg:px-[var(--space-1800)] lg:pt-[var(--space-800)] lg:pb-[var(--space-1800)] lg2:gap-x-[var(--space-400)] lg2:gap-y-[var(--space-600)] xl:gap-x-[var(--space-400)] xl:gap-y-[var(--space-400)] [&>*]:min-w-0 [&>*]:w-full smd:[&>*]:w-[calc((100%-var(--space-200))/2)] md:[&>*]:w-[calc((100%-var(--space-400))/2)] xmd:[&>*]:w-[calc((100%-2*var(--space-300))/3)] lg:[&>*]:w-[calc((100%-2*var(--space-400))/3)] lg2:[&>*]:w-[calc((100%-3*var(--space-400))/4)] xl:[&>*]:w-[calc((100%-4*var(--space-400))/5)]"
|
|
>
|
|
{allPosts.map((post) => (
|
|
<ContentThumbnailTemplate
|
|
key={post.slug}
|
|
post={post}
|
|
variant="responsive"
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<AskOrganizer {...askOrganizerData} />
|
|
</div>
|
|
);
|
|
}
|