Submit 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>
  );
}