@carlonicora/nextjs-jsonapi 5.3.0 → 5.4.0

package/src/features/blog/components/admin/BlogPostTranslationEditor.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { EditorSheet, FormBlockNote, FormInput, FormTextarea } from "../../../../components";
+import { Modules } from "../../../../core";
+import { BlogPostTranslationInterface, BlogPostTranslationService } from "../../data";
+import { useBlogLanguageName } from "./BlogTranslationStatus";
+import { BLOG_POST_UPLOAD_PREFIX } from "../../types/blog.constants";
+
+type BlogPostTranslationEditorProps = {
+  translation: BlogPostTranslationInterface;
+  trigger?: ReactNode;
+  onSuccess?: () => void | Promise<void>;
+};
+
+const isBodyEmpty = (body: any) => !body || (Array.isArray(body) && body.length === 0);
+
+const buildFormSchema = (t: (key: string) => string) =>
+  z.object({
+    id: z.string().uuid(),
+    title: z.string().min(1, { message: t("blog.errors.title") }),
+    slug: z.string().optional(),
+    summary: z.string().optional(),
+    body: z.any(),
+    coverImageAlt: z.string().optional(),
+  });
+
+/**
+ * Edits one non-original translation by hand. Saving marks it `manual` and
+ * re-runs nothing. Mirrors features/how-to/components/forms/HowToEditor.tsx.
+ */
+export function BlogPostTranslationEditor({ translation, trigger, onSuccess }: BlogPostTranslationEditorProps) {
+  const t = useTranslations();
+  const formSchema = useMemo(() => buildFormSchema(t), [t]);
+  const languageName = useBlogLanguageName();
+  const [isBodyEmptyState, setIsBodyEmptyState] = useState<boolean>(isBodyEmpty(translation.body));
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: translation.id,
+      title: translation.title ?? "",
+      slug: translation.slug ?? "",
+      summary: translation.summary ?? "",
+      body: translation.body || [],
+      coverImageAlt: translation.coverImageAlt ?? "",
+    }),
+    [translation],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  const { dirtyFields } = form.formState;
+  const isFormDirty = useCallback(() => {
+    const dirty: Record<string, unknown> = { ...dirtyFields };
+    if (dirty.body && isBodyEmptyState) delete dirty.body;
+    return Object.keys(dirty).length > 0;
+  }, [dirtyFields, isBodyEmptyState]);
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("blog.entities.post")}
+      entityName={translation.title}
+      title={`${t("blog.admin.editPost")} · ${languageName(translation.language)}`}
+      isEdit
+      module={Modules.BlogPostTranslation}
+      size="lg"
+      isFormDirty={isFormDirty}
+      onSubmit={async (values) =>
+        BlogPostTranslationService.update({
+          id: values.id,
+          title: values.title,
+          slug: values.slug || undefined,
+          summary: values.summary,
+          body: values.body,
+          coverImageAlt: values.coverImageAlt,
+        })
+      }
+      onReset={() => {
+        setIsBodyEmptyState(isBodyEmpty(translation.body));
+        return getDefaultValues();
+      }}
+      onSuccess={onSuccess ?? (() => {})}
+      trigger={trigger}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        <FormInput form={form} id="title" name={t("blog.fields.title")} isRequired />
+        <FormInput form={form} id="slug" name={t("blog.fields.slug")} description={t("blog.fields.slugHelp")} />
+        <FormTextarea form={form} id="summary" name={t("blog.fields.summary")} />
+        <FormInput form={form} id="coverImageAlt" name={t("blog.fields.coverImageAlt")} />
+        <FormBlockNote
+          uploadKeyPrefix={BLOG_POST_UPLOAD_PREFIX}
+          form={form}
+          id="body"
+          name={t("blog.fields.body")}
+          type="blog-post"
+          isRequired
+          onEmptyChange={setIsBodyEmptyState}
+        />
+      </div>
+    </EditorSheet>
+  );
+}

package/src/features/blog/components/admin/BlogPostTranslationPanel.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { PencilIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useState } from "react";
+import { DetailField } from "../../../../components";
+import { Alert, AlertDescription, Badge, Button } from "../../../../shadcnui";
+import { isRemoteImageSrc } from "../../../../utils";
+import { BlogPostInterface, BlogPostTranslationInterface, BlogPostTranslationService } from "../../data";
+import { BlogPostComparison, BlogPostTranslationFields } from "./BlogPostComparison";
+import { BlogPostEditor } from "./BlogPostEditor";
+import { BlogPostTranslationEditor } from "./BlogPostTranslationEditor";
+import { useBlogCategoryNames } from "../../hooks/useBlogCategoryNames";
+import { BlogTranslationStatus, useBlogDateFormatter, useBlogLanguageName } from "./BlogTranslationStatus";
+
+type BlogPostTranslationPanelProps = {
+  post: BlogPostInterface;
+  translation: BlogPostTranslationInterface;
+  /** Re-reads the post after an edit or a re-translation request. */
+  onChanged?: () => Promise<void>;
+};
+
+/**
+ * One language tab of the admin post page (approved mockup A).
+ * - Original tab: cover image, categories, status, the text fields and an Edit
+ *   that opens BlogPostEditor (which re-translates every other language).
+ * - Translation tab: where the text came from, whether it was edited by hand,
+ *   the overwrite warning, "Compare with original", the job status, the text
+ *   fields and an Edit that opens BlogPostTranslationEditor.
+ */
+export function BlogPostTranslationPanel({ post, translation, onChanged }: BlogPostTranslationPanelProps) {
+  const t = useTranslations();
+  const categoryName = useBlogCategoryNames();
+  const languageName = useBlogLanguageName();
+  const formatDate = useBlogDateFormatter();
+  const [isComparing, setIsComparing] = useState<boolean>(false);
+
+  const original = post.original;
+  const reload = onChanged ?? (async () => {});
+
+  const editTrigger = (
+    <Button render={<div />} nativeButton={false} size="sm" variant="outline">
+      <PencilIcon />
+      {t("blog.actions.edit")}
+    </Button>
+  );
+
+  if (translation.isOriginal) {
+    const statusLabel = {
+      draft: t("blog.status.draft"),
+      published: t("blog.status.published"),
+      unpublished: t("blog.status.unpublished"),
+    }[post.status];
+
+    return (
+      <div className="flex w-full flex-col gap-y-6 p-4">
+        <div className="flex items-center justify-between gap-x-4">
+          <Badge variant="softGray">{t("blog.translation.original")}</Badge>
+          <BlogPostEditor post={post} trigger={editTrigger} onSuccess={reload} />
+        </div>
+        {post.coverImage && (
+          <Image
+            src={post.coverImage}
+            alt={translation.coverImageAlt ?? translation.title}
+            width={640}
+            height={360}
+            className="h-auto max-h-72 w-auto rounded-lg object-cover"
+            unoptimized={isRemoteImageSrc(post.coverImage)}
+          />
+        )}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+          <DetailField label={t("blog.fields.status")} value={statusLabel} />
+          <DetailField label={t("blog.fields.publishedAt")} value={formatDate(post.publishedAt) || "—"} />
+          <DetailField
+            label={t("blog.fields.categories")}
+            value={
+              post.categories
+                .map((category) => categoryName(category.id))
+                .filter(Boolean)
+                .join(", ") || "—"
+            }
+          />
+        </div>
+        <BlogPostTranslationFields translation={translation} />
+      </div>
+    );
+  }
+
+  const isWorking = translation.aiStatus === "pending" || translation.aiStatus === "in_progress";
+
+  return (
+    <div className="flex w-full flex-col gap-y-6 p-4">
+      <Alert>
+        <AlertDescription className="flex flex-col gap-y-2">
+          <div className="flex flex-wrap items-center gap-2">
+            {translation.source === "manual" && <Badge variant="softAmber">{t("blog.translation.editedByHand")}</Badge>}
+            {original && translation.translatedAt && (
+              <span>
+                {t("blog.translation.translatedFrom", {
+                  language: languageName(original.language),
+                  date: formatDate(translation.translatedAt),
+                })}
+              </span>
+            )}
+          </div>
+          <span>{t("blog.translation.overwriteWarning")}</span>
+          {original && (
+            <div>
+              <Button type="button" size="sm" variant="ghost" onClick={() => setIsComparing((value) => !value)}>
+                {isComparing ? t("blog.actions.hideComparison") : t("blog.actions.compareWithOriginal")}
+              </Button>
+            </div>
+          )}
+        </AlertDescription>
+      </Alert>
+
+      <div className="flex items-center justify-between gap-x-4">
+        <BlogTranslationStatus
+          aiStatus={translation.aiStatus}
+          onRetranslate={async () => {
+            await BlogPostTranslationService.retranslate({ id: translation.id });
+            await reload();
+          }}
+        />
+        {!isWorking && <BlogPostTranslationEditor translation={translation} trigger={editTrigger} onSuccess={reload} />}
+      </div>
+
+      {isComparing && original ? (
+        <BlogPostComparison original={original} translation={translation} />
+      ) : (
+        <BlogPostTranslationFields translation={translation} />
+      )}
+    </div>
+  );
+}

package/src/features/blog/components/admin/BlogPostsList.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { NewspaperIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { Button, EmptyState } from "../../../../shadcnui";
+import { BlogPostFields, BlogPostInterface, BlogPostService } from "../../data";
+import "../../hooks/useBlogPostTableStructure";
+import { BlogPostEditor } from "./BlogPostEditor";
+
+type BlogPostsListProps = {
+  /** Pass when the list is the page's own content inside a `RoundPageContainer fullWidth`. */
+  fullWidth?: boolean;
+};
+
+/** Admin posts table. Mirrors features/email-automation/components/lists/EmailAutomationsList.tsx. */
+export function BlogPostsList({ fullWidth }: BlogPostsListProps = {}) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<BlogPostInterface> = useDataListRetriever({
+    retriever: (params) => BlogPostService.findMany(params),
+    retrieverParams: {},
+    module: Modules.BlogPost,
+  });
+
+  // Creating navigates to the new post's page (EditorSheet's default without onSuccess).
+  const functions: ReactNode[] = [
+    <BlogPostEditor
+      key="create-blog-post"
+      trigger={
+        <Button render={<div />} nativeButton={false} size="sm" variant="outline">
+          {t("blog.admin.newPost")}
+        </Button>
+      }
+    />,
+  ];
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[
+        BlogPostFields.title,
+        BlogPostFields.status,
+        BlogPostFields.categories,
+        BlogPostFields.publishedAt,
+        BlogPostFields.languages,
+      ]}
+      tableGeneratorType={Modules.BlogPost}
+      functions={functions}
+      fullWidth={fullWidth}
+      title={t("blog.entities.posts")}
+      emptyState={<EmptyState icon={NewspaperIcon} title={t("blog.admin.empty")} />}
+    />
+  );
+}

package/src/features/blog/components/admin/BlogTranslationStatus.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { LoaderCircleIcon, RotateCcwIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useMemo, useState } from "react";
+import { errorToast } from "../../../../components";
+import { useI18nLocale } from "../../../../i18n";
+import { Badge, Button } from "../../../../shadcnui";
+import { BlogCategoryInterface } from "../../data";
+import { BlogAiStatus } from "../../types/blog.constants";
+
+/** Status pill colours for a post, shared by the post header and the admin posts table. */
+export const BLOG_STATUS_BADGE = {
+  draft: "softGray",
+  published: "softGreen",
+  unpublished: "softAmber",
+} as const;
+
+/** The category label in the admin: the category's own original-language name. */
+export function blogCategoryAdminName(category: BlogCategoryInterface): string {
+  return category.original?.name ?? category.name ?? "";
+}
+
+/**
+ * Language names come from `Intl.DisplayNames` in the viewer's locale: there is
+ * no per-language message key. An unknown code falls back to the code itself.
+ */
+export function useBlogLanguageName(): (language: string) => string {
+  const locale = useI18nLocale();
+  const names = useMemo(() => {
+    try {
+      return new Intl.DisplayNames([locale], { type: "language" });
+    } catch {
+      return undefined;
+    }
+  }, [locale]);
+
+  return useCallback(
+    (language: string) => {
+      const name = names?.of(language);
+      if (!name) return language;
+      return name.charAt(0).toLocaleUpperCase(locale) + name.slice(1);
+    },
+    [names, locale],
+  );
+}
+
+/** Formats a date for the admin pages in the viewer's locale. */
+export function useBlogDateFormatter(): (date?: Date) => string {
+  const locale = useI18nLocale();
+  return useCallback((date?: Date) => (date ? date.toLocaleDateString(locale, { dateStyle: "medium" }) : ""), [locale]);
+}
+
+type BlogTranslationStatusProps = {
+  aiStatus: BlogAiStatus;
+  /** Re-queues the translation of this one language. Shown only when the job failed. */
+  onRetranslate?: () => Promise<void>;
+};
+
+/**
+ * The translation state of one language. Nothing is rendered once the
+ * translation is `completed`; `failed` adds the "Translate again" action.
+ */
+export function BlogTranslationStatus({ aiStatus, onRetranslate }: BlogTranslationStatusProps) {
+  const t = useTranslations();
+  const [isRetrying, setIsRetrying] = useState<boolean>(false);
+
+  if (aiStatus === "completed") return null;
+
+  if (aiStatus === "pending" || aiStatus === "in_progress") {
+    return (
+      <div className="flex items-center gap-x-2">
+        <Badge variant="softBlue">
+          <LoaderCircleIcon className="animate-spin" />
+          {aiStatus === "pending" ? t("blog.translation.pending") : t("blog.translation.translating")}
+        </Badge>
+      </div>
+    );
+  }
+
+  const retranslate = async () => {
+    if (!onRetranslate) return;
+    setIsRetrying(true);
+    try {
+      await onRetranslate();
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setIsRetrying(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-x-2">
+      <Badge variant="softRed">{t("blog.translation.failed")}</Badge>
+      {onRetranslate && (
+        <Button type="button" size="sm" variant="outline" onClick={() => void retranslate()} disabled={isRetrying}>
+          <RotateCcwIcon />
+          {t("blog.actions.translateAgain")}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/features/blog/components/admin/__tests__/BlogPostTranslationPanel.spec.tsx

@@ -0,0 +1,100 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { BlogPostInterface, BlogPostTranslationInterface } from "../../../data";
+import { BlogPostTranslationPanel } from "../BlogPostTranslationPanel";
+
+const { retranslate } = vi.hoisted(() => ({ retranslate: vi.fn() }));
+
+vi.mock("next-intl", () => ({ useTranslations: () => (key: string) => key }));
+vi.mock("../../../data", () => ({ BlogPostTranslationService: { retranslate } }));
+vi.mock("../../../hooks/useBlogCategoryNames", () => ({ useBlogCategoryNames: () => () => "" }));
+// Editors and the BlockNote field display are not under test.
+vi.mock("../BlogPostEditor", () => ({ BlogPostEditor: () => <span>post-editor</span> }));
+vi.mock("../BlogPostTranslationEditor", () => ({
+  BlogPostTranslationEditor: () => <span>translation-editor</span>,
+}));
+vi.mock("../BlogPostComparison", () => ({
+  BlogPostTranslationFields: () => <div data-testid="fields" />,
+  BlogPostComparison: () => <div data-testid="comparison" />,
+}));
+
+const english = {
+  id: "t-en",
+  language: "en",
+  isOriginal: true,
+  source: "original",
+  aiStatus: "completed",
+  title: "Prep situations, not plots",
+  slug: "prep-situations-not-plots",
+  summary: "Why a scene that can go three ways beats one that must go one way.",
+  body: [],
+  readingMinutes: 6,
+} as unknown as BlogPostTranslationInterface;
+
+const translation = (overrides: Record<string, unknown>) =>
+  ({
+    id: "t-it",
+    language: "it",
+    isOriginal: false,
+    source: "ai",
+    aiStatus: "completed",
+    title: "Prepara situazioni, non trame",
+    slug: "prepara-situazioni-non-trame",
+    body: [],
+    readingMinutes: 6,
+    translatedAt: new Date("2026-10-12T09:00:00.000Z"),
+    ...overrides,
+  }) as unknown as BlogPostTranslationInterface;
+
+const manualItalian = translation({ source: "manual" });
+
+const post = {
+  id: "p1",
+  status: "published",
+  originalLanguage: "en",
+  publishedAt: new Date("2026-10-12T09:00:00.000Z"),
+  categories: [],
+  translations: [english, manualItalian],
+  original: english,
+  categoryIds: [],
+} as unknown as BlogPostInterface;
+
+describe("BlogPostTranslationPanel", () => {
+  it("warns that editing the original replaces hand edits", () => {
+    render(<BlogPostTranslationPanel post={post} translation={manualItalian} />);
+    expect(screen.getByText("blog.translation.editedByHand")).toBeInTheDocument();
+    expect(screen.getByText("blog.translation.overwriteWarning")).toBeInTheDocument();
+    expect(screen.getByText("blog.translation.translatedFrom")).toBeInTheDocument();
+  });
+
+  it("opens the comparison with the original on demand", () => {
+    render(<BlogPostTranslationPanel post={post} translation={manualItalian} />);
+    expect(screen.queryByTestId("comparison")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText("blog.actions.compareWithOriginal"));
+    expect(screen.getByTestId("comparison")).toBeInTheDocument();
+    expect(screen.getByText("blog.actions.hideComparison")).toBeInTheDocument();
+  });
+
+  it("failed translation shows Translate again, which re-queues that language", async () => {
+    const onChanged = vi.fn().mockResolvedValue(undefined);
+    retranslate.mockResolvedValue(undefined);
+    render(
+      <BlogPostTranslationPanel post={post} translation={translation({ aiStatus: "failed" })} onChanged={onChanged} />,
+    );
+
+    expect(screen.getByText("blog.translation.failed")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("blog.actions.translateAgain"));
+
+    await waitFor(() => expect(retranslate).toHaveBeenCalledWith({ id: "t-it" }));
+    await waitFor(() => expect(onChanged).toHaveBeenCalled());
+  });
+
+  it("original tab shows the Original badge and no overwrite warning", () => {
+    render(<BlogPostTranslationPanel post={post} translation={english} />);
+    expect(screen.getByText("blog.translation.original")).toBeInTheDocument();
+    expect(screen.getByText("post-editor")).toBeInTheDocument();
+    expect(screen.queryByText("blog.translation.overwriteWarning")).not.toBeInTheDocument();
+    expect(screen.queryByText("blog.translation.editedByHand")).not.toBeInTheDocument();
+  });
+});

package/src/features/blog/components/admin/__tests__/BlogPostsList.spec.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { ReactNode } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+import { ModuleRegistry } from "../../../../../core/registry/ModuleRegistry";
+import { BlogPostsList } from "../BlogPostsList";
+
+vi.mock("../../../../../hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../../hooks")>()),
+  useDataListRetriever: () => ({ data: [], refresh: vi.fn(), search: vi.fn() }),
+}));
+vi.mock("../../../../../components/tables/ContentListTable", () => ({
+  ContentListTable: ({ functions }: { functions: ReactNode[] }) => <div data-testid="functions">{functions}</div>,
+}));
+vi.mock("next-intl", () => ({ useTranslations: () => (key: string) => key }));
+// The editor sheet itself is not under test: render only the trigger the list hands it.
+vi.mock("../BlogPostEditor", () => ({
+  BlogPostEditor: ({ trigger }: { trigger?: ReactNode }) => <>{trigger}</>,
+}));
+
+beforeAll(() => {
+  ModuleRegistry.register("BlogPost" as any, { name: "blog-posts" } as any);
+});
+
+describe("BlogPostsList", () => {
+  it("offers the new-post editor", () => {
+    render(<BlogPostsList />);
+    expect(screen.getByText("blog.admin.newPost")).toBeInTheDocument();
+  });
+});

package/src/features/blog/components/admin/index.ts

@@ -0,0 +1,14 @@
+export * from "./BlogAdminContainer";
+export * from "./BlogPostContainer";
+export * from "./BlogPostsList";
+export * from "./BlogCategoriesList";
+export * from "./BlogLayoutSetting";
+export * from "./BlogPostTranslationPanel";
+export * from "./BlogPostComparison";
+export * from "./BlogTranslationStatus";
+export * from "./BlogPostEditor";
+export * from "./BlogPostTranslationEditor";
+export * from "./BlogCategoryEditor";
+export * from "./BlogPostPublishButton";
+export * from "./BlogPostDeleter";
+export * from "./BlogCoverImageField";

package/src/features/blog/components/public/BlogCategoryChips.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Badge, Link } from "../../../../shadcnui";
+import type { PublicBlogCategory } from "../../types/blog-public.types";
+import { blogListHref } from "./blogPublicHelpers";
+
+/**
+ * Category filter: "All" plus one link per category. Every link keeps the
+ * search query and drops the page, so a new filter starts from page one.
+ * `chips` is the horizontal pill row; `list` is the vertical rail list.
+ */
+export function BlogCategoryChips(props: {
+  categories: PublicBlogCategory[];
+  basePath: string;
+  activeCategorySlug?: string;
+  query?: string;
+  variant?: "chips" | "list";
+  className?: string;
+}) {
+  const { categories, basePath, activeCategorySlug, query, variant = "chips", className } = props;
+  const t = useTranslations();
+
+  const items = [
+    {
+      key: "all",
+      label: t("blog.public.all"),
+      href: blogListHref(basePath, { q: query }),
+      active: !activeCategorySlug,
+    },
+    ...categories.map((category) => ({
+      key: category.id,
+      label: category.name,
+      href: blogListHref(basePath, { category: category.slug, q: query }),
+      active: category.slug === activeCategorySlug,
+    })),
+  ];
+
+  // Pills are Badges rendered as links: the active one is the filled default
+  // variant, the rest are outline (chips row) or ghost (rail list).
+  const inactiveVariant = variant === "chips" ? "outline" : "ghost";
+
+  return (
+    <nav aria-label={t("blog.entities.categories")} className={className}>
+      <ul className={variant === "chips" ? "flex flex-wrap items-center gap-2" : "flex flex-col items-start gap-2"}>
+        {items.map((item) => (
+          <li key={item.key}>
+            <Badge
+              variant={item.active ? "default" : inactiveVariant}
+              render={<Link href={item.href} aria-current={item.active ? "page" : undefined} />}
+            >
+              {item.label}
+            </Badge>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/src/features/blog/components/public/BlogList.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { BlogListColumn } from "./BlogListColumn";
+import { BlogListFeatured } from "./BlogListFeatured";
+import type { BlogListProps } from "./BlogListParts";
+import { BlogListRail } from "./BlogListRail";
+
+/** Public blog list in the layout an administrator picked (BlogSettings.listLayout). */
+export function BlogList(props: BlogListProps) {
+  switch (props.layout) {
+    case "column":
+      return <BlogListColumn {...props} />;
+    case "rail":
+      return <BlogListRail {...props} />;
+    case "featured":
+    default:
+      return <BlogListFeatured {...props} />;
+  }
+}
+
+export type { BlogListProps };