@carlonicora/nextjs-jsonapi 5.3.0 → 5.5.0

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 only when the list is the page's whole content inside a `RoundPageContainer fullWidth`; omit it in a tab so the list keeps its bordered card. */
+  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 };

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

@@ -0,0 +1,53 @@
+"use client";
+
+import { BlogCategoryChips } from "./BlogCategoryChips";
+import { BlogListEmpty, BlogListHeader, type BlogListProps, BlogLoadMore } from "./BlogListParts";
+import { BlogPostCard } from "./BlogPostCard";
+import { BlogSearchBox } from "./BlogSearchBox";
+
+/** Layout B: one narrow reading column, every post a row (image at the start, text at the end). */
+export function BlogListColumn(props: BlogListProps) {
+  const { list, categories, activeCategorySlug, query, page, basePath } = props;
+
+  return (
+    <section className="px-4 pt-16 pb-20 md:pt-20">
+      <div className="mx-auto max-w-2xl">
+        <BlogListHeader align="center" />
+        <BlogCategoryChips
+          categories={categories}
+          basePath={basePath}
+          activeCategorySlug={activeCategorySlug}
+          query={query}
+          className="mt-8 [&>ul]:justify-center"
+        />
+        <BlogSearchBox basePath={basePath} query={query} activeCategorySlug={activeCategorySlug} className="mt-4" />
+        {list.posts.length === 0 ? (
+          <BlogListEmpty query={query} />
+        ) : (
+          <div className="divide-border mt-10 flex flex-col divide-y">
+            {list.posts.map((post, index) => (
+              <div key={post.id} className="py-6 first:pt-0">
+                <BlogPostCard
+                  post={post}
+                  categories={categories}
+                  basePath={basePath}
+                  variant="row"
+                  priority={index === 0}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+        {list.hasMore ? (
+          <BlogLoadMore
+            basePath={basePath}
+            page={page}
+            activeCategorySlug={activeCategorySlug}
+            query={query}
+            className="mt-10"
+          />
+        ) : null}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,57 @@
+"use client";
+
+import { BlogCategoryChips } from "./BlogCategoryChips";
+import { BlogListEmpty, BlogListHeader, type BlogListProps, BlogLoadMore } from "./BlogListParts";
+import { BlogPostCard } from "./BlogPostCard";
+import { BlogSearchBox } from "./BlogSearchBox";
+
+/** Layout A: newest post as a hero, then filters, then a three-column grid. */
+export function BlogListFeatured(props: BlogListProps) {
+  const { list, categories, activeCategorySlug, query, page, basePath } = props;
+  const [hero, ...rest] = list.posts;
+
+  return (
+    <section className="px-4 pt-16 pb-20 md:pt-20">
+      <div className="mx-auto max-w-5xl">
+        <BlogListHeader />
+        {hero ? (
+          <div className="mt-10">
+            <BlogPostCard post={hero} categories={categories} basePath={basePath} variant="hero" priority />
+          </div>
+        ) : null}
+        <div className="mt-12 flex flex-col gap-3 md:flex-row md:items-center">
+          <BlogCategoryChips
+            categories={categories}
+            basePath={basePath}
+            activeCategorySlug={activeCategorySlug}
+            query={query}
+            className="flex-1"
+          />
+          <BlogSearchBox
+            basePath={basePath}
+            query={query}
+            activeCategorySlug={activeCategorySlug}
+            className="md:w-64"
+          />
+        </div>
+        {list.posts.length === 0 ? <BlogListEmpty query={query} /> : null}
+        {rest.length > 0 ? (
+          <div className="mt-8 grid gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
+            {rest.map((post) => (
+              <BlogPostCard key={post.id} post={post} categories={categories} basePath={basePath} />
+            ))}
+          </div>
+        ) : null}
+        {list.hasMore ? (
+          <BlogLoadMore
+            basePath={basePath}
+            page={page}
+            activeCategorySlug={activeCategorySlug}
+            query={query}
+            className="mt-12"
+          />
+        ) : null}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentTitle } from "../../../../components/navigations/ContentTitle";
+import { buttonVariants, Link } from "../../../../shadcnui";
+import { cn } from "../../../../utils/cn";
+import type { PublicBlogCategory, PublicBlogList } from "../../types/blog-public.types";
+import type { BlogListLayout } from "../../types/blog.constants";
+import { blogListHref } from "./blogPublicHelpers";
+
+export type BlogListProps = {
+  layout: BlogListLayout;
+  list: PublicBlogList;
+  categories: PublicBlogCategory[];
+  activeCategorySlug?: string;
+  query?: string;
+  page: number;
+  basePath: string;
+};
+
+/** Eyebrow, page title and (optionally) the subtitle. */
+export function BlogListHeader(props: { align?: "start" | "center"; showSubtitle?: boolean }) {
+  const { align = "start", showSubtitle = true } = props;
+  const t = useTranslations();
+  return (
+    <header className={align === "center" ? "text-center" : undefined}>
+      <ContentTitle
+        type={t("blog.public.eyebrow")}
+        element={t("blog.public.title")}
+        headingLevel={1}
+        className={cn("mb-0", align === "center" && "[&_div]:justify-center")}
+      />
+      {showSubtitle ? (
+        <p className="text-muted-foreground mt-3 text-sm leading-relaxed">{t("blog.public.subtitle")}</p>
+      ) : null}
+    </header>
+  );
+}
+
+/** Shown in place of the posts: "no results" when searching, "no posts yet" otherwise. */
+export function BlogListEmpty(props: { query?: string; className?: string }) {
+  const t = useTranslations();
+  return (
+    <p className={cn("text-muted-foreground py-12 text-center text-sm", props.className)}>
+      {props.query ? t("blog.public.noResults") : t("blog.public.empty")}
+    </p>
+  );
+}
+
+/** "Load more": a plain link to the next page, keeping category and query. */
+export function BlogLoadMore(props: {
+  basePath: string;
+  page: number;
+  activeCategorySlug?: string;
+  query?: string;
+  className?: string;
+}) {
+  const { basePath, page, activeCategorySlug, query, className } = props;
+  const t = useTranslations();
+  return (
+    <div className={cn("flex justify-center", className)}>
+      {/* A styled Link, not <Button render={<Link />} nativeButton={false}>: Base UI then
+          stamps role="button" on the anchor, so a control that navigates would announce
+          as a button (same reasoning as HelpHeader). */}
+      <Link
+        href={blogListHref(basePath, { category: activeCategorySlug, q: query, page: page + 1 })}
+        scroll={false}
+        className={buttonVariants({ variant: "outline" })}
+      >
+        {t("blog.public.loadMore")}
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { MicroLabel } from "../../../../components/typography";
+import { BlogCategoryChips } from "./BlogCategoryChips";
+import { BlogListEmpty, BlogListHeader, type BlogListProps, BlogLoadMore } from "./BlogListParts";
+import { BlogPostCard } from "./BlogPostCard";
+import { BlogSearchBox } from "./BlogSearchBox";
+
+/** Layout C: search and categories in a side rail; newest post large, the rest in two columns. */
+export function BlogListRail(props: BlogListProps) {
+  const { list, categories, activeCategorySlug, query, page, basePath } = props;
+  const t = useTranslations();
+  const [first, ...rest] = list.posts;
+
+  return (
+    <section className="px-4 pt-16 pb-20 md:pt-20">
+      <div className="mx-auto grid max-w-5xl gap-10 md:grid-cols-[13rem_1fr] md:gap-12">
+        <aside className="flex flex-col gap-6">
+          <BlogListHeader showSubtitle={false} />
+          <BlogSearchBox basePath={basePath} query={query} activeCategorySlug={activeCategorySlug} />
+          <div>
+            <MicroLabel as="span" className="block">
+              {t("blog.entities.categories")}
+            </MicroLabel>
+            <BlogCategoryChips
+              categories={categories}
+              basePath={basePath}
+              activeCategorySlug={activeCategorySlug}
+              query={query}
+              variant="list"
+              className="mt-3"
+            />
+          </div>
+        </aside>
+        <div className="min-w-0">
+          {first ? (
+            <BlogPostCard post={first} categories={categories} basePath={basePath} variant="large" priority />
+          ) : (
+            <BlogListEmpty query={query} />
+          )}
+          {rest.length > 0 ? (
+            <div className="border-border mt-10 grid gap-x-6 gap-y-10 border-t pt-10 sm:grid-cols-2">
+              {rest.map((post) => (
+                <BlogPostCard key={post.id} post={post} categories={categories} basePath={basePath} />
+              ))}
+            </div>
+          ) : null}
+          {list.hasMore ? (
+            <BlogLoadMore
+              basePath={basePath}
+              page={page}
+              activeCategorySlug={activeCategorySlug}
+              query={query}
+              className="mt-12"
+            />
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}