A single-line text input with a submit button, built on Mantine, where Enter submits and an optional Escape cancels — the input clears on success or shows the rejection's error message beneath the row.
"use client";
import * as React from "react";
import * as Mantine from "@mantine/core";
import "@mantine/core/styles.css";
import SubmitRow from "@/components/ui/submit-row";
// Synthetic data standing in for a real room-join call site (one of the
// four near-identical call sites this component was extracted from).
export default function SubmitRowDemo() {
const [rooms, setRooms] = React.useState<string[]>([
"general",
"project-alpha",
]);
const [lastJoined, setLastJoined] = React.useState<string | undefined>(
undefined,
);
function joinRoom(value: string): Promise<void> {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (rooms.includes(value)) {
reject(new Error(`Already a member of "${value}"`));
return;
}
setRooms((previous) => [...previous, value]);
setLastJoined(value);
resolve();
}, 400);
});
}
return (
<Mantine.MantineProvider>
<div
style={{
display: "flex",
flexDirection: "column",
gap: 12,
width: "100%",
maxWidth: 420,
}}
>
<SubmitRow
ariaLabel="Room name"
submitLabel="Join"
placeholder="Enter a room name"
onSubmit={joinRoom}
/>
{lastJoined !== undefined && (
<div style={{ fontSize: 13, color: "var(--mantine-color-dimmed)" }}>
Joined "{lastJoined}". Rooms: {rooms.join(", ")}
</div>
)}
</div>
</Mantine.MantineProvider>
);
}