adilallo
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import NumberedList from "../../components/type/NumberedList";
|
|
import { useTranslation } from "../../contexts/MessagesContext";
|
|
import { useCreateFlowMdUp } from "../hooks/useCreateFlowMdUp";
|
|
import { CreateFlowHeaderLockup } from "../components/CreateFlowHeaderLockup";
|
|
import { CreateFlowStepShell } from "../components/CreateFlowStepShell";
|
|
|
|
/**
|
|
* Informational page for the create flow
|
|
*
|
|
* Displays information about the create flow process using HeaderLockup and NumberedList components.
|
|
* Lockup sizing via `CreateFlowHeaderLockup`. NumberedList: S / M by breakpoint.
|
|
*/
|
|
export default function InformationalPage() {
|
|
const mdUp = useCreateFlowMdUp();
|
|
const t = useTranslation("create.informational");
|
|
|
|
const items = [
|
|
{
|
|
title: t("steps.0.title"),
|
|
description: t("steps.0.description"),
|
|
},
|
|
{
|
|
title: t("steps.1.title"),
|
|
description: t("steps.1.description"),
|
|
},
|
|
{
|
|
title: t("steps.2.title"),
|
|
description: t("steps.2.description"),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<CreateFlowStepShell
|
|
variant="centeredNarrow"
|
|
contentTopBelowMd="space-1400"
|
|
>
|
|
<div className="flex w-full max-w-[640px] flex-col items-center gap-12">
|
|
<CreateFlowHeaderLockup
|
|
title={t("title")}
|
|
description={t("description")}
|
|
justification="left"
|
|
/>
|
|
<NumberedList items={items} size={mdUp ? "M" : "S"} />
|
|
</div>
|
|
</CreateFlowStepShell>
|
|
);
|
|
}
|