adilallo
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import TextInput from "../../components/controls/TextInput";
|
|
import { useTranslation } from "../../contexts/MessagesContext";
|
|
import { useCreateFlow } from "../context/CreateFlowContext";
|
|
import { useCreateFlowMdUp } from "../hooks/useCreateFlowMdUp";
|
|
import { CreateFlowHeaderLockup } from "../components/CreateFlowHeaderLockup";
|
|
import { CreateFlowStepShell } from "../components/CreateFlowStepShell";
|
|
|
|
/**
|
|
* Text page for the create flow
|
|
*
|
|
* Displays a text input field for user input using HeaderLockup and TextInput components.
|
|
* Lockup sizing via `CreateFlowHeaderLockup`. TextInput: small / medium by breakpoint.
|
|
* Below `md`, this step stays vertically centered in the main area (see `CreateFlowLayoutClient`).
|
|
*/
|
|
export default function TextPage() {
|
|
const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
|
|
const mdUp = useCreateFlowMdUp();
|
|
const t = useTranslation("create.text");
|
|
const [value, setValue] = useState(() =>
|
|
typeof state.title === "string" ? state.title : "",
|
|
);
|
|
|
|
useEffect(() => {
|
|
const incoming = state.title;
|
|
if (typeof incoming !== "string" || incoming.length === 0) return;
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect -- sync controlled field when context hydrates from server/local
|
|
setValue((prev) => (prev === "" ? incoming : prev));
|
|
}, [state.title]);
|
|
|
|
const maxLength = 48;
|
|
const characterCount = value.length;
|
|
const hint = t("characterCountTemplate")
|
|
.replace("{current}", String(characterCount))
|
|
.replace("{max}", String(maxLength));
|
|
|
|
return (
|
|
<CreateFlowStepShell variant="centeredNarrow">
|
|
<div className="flex w-full max-w-[640px] flex-col items-start gap-[18px]">
|
|
<CreateFlowHeaderLockup
|
|
title={t("title")}
|
|
description={t("description")}
|
|
justification="left"
|
|
/>
|
|
<div className="w-full">
|
|
<TextInput
|
|
placeholder={t("placeholder")}
|
|
value={value}
|
|
onChange={(e) => {
|
|
const v = e.target.value;
|
|
setValue(v);
|
|
markCreateFlowInteraction();
|
|
updateState({ title: v });
|
|
}}
|
|
inputSize={mdUp ? "medium" : "small"}
|
|
formHeader={false}
|
|
textHint={hint}
|
|
maxLength={maxLength}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CreateFlowStepShell>
|
|
);
|
|
}
|