Text Input

InputText

<InputText name="name" title="title" />

InputText - with Translation

import { useState } from "react";
import InputText from "~/components/ui/input/InputText";

export default function PreviewInputTextWithTranslation() {
  const [valid, setValid] = useState("shared.hi");
  const [invalid, setInvalid] = useState("shared.invalid.i18n.key");
  return (
    <>
      <InputText name="name" title="Valid i18n key" value={valid} setValue={setValid} withTranslation />
      <InputText name="name" title="Invalid i18n key" value={invalid} setValue={setInvalid} withTranslation />
    </>
  );
}

InputText - with Hint

<InputText name="name" title="Title" hint={<span className="text-red-500">Hint text</span>} />

InputText - with all Options

import { useState } from "react";
import InputText from "~/components/ui/input/InputText";

export default function PreviewInputTextWithAllOptions() {
  const [value, setValue] = useState("");
  return (
    <div id="input-text-with-all-options">
      <div className="border border-dashed border-gray-300 bg-white p-6">
        <InputText name="name" title="Title" value={value} setValue={setValue} minLength={0} maxLength={10} required uppercase />
      </div>
    </div>
  );
}

InputText - with Monaco Editor

import { marked } from "marked";
import { useState } from "react";
import InputText from "~/components/ui/input/InputText";

export default function PreviewInputTextWithMonacoEditor() {
  const [markdownValue, setMarkdownValue] = useState(`
  # Markdown Editor
  
  ## Title 1

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  _Image_:

  ![SaasRock](https://yahooder.sirv.com/saasrock/seo/cover-dark.png)
  `);
  return (
    <div id="input-text">
      <div className="border border-dashed border-gray-300 bg-white p-6">
        <div className="sm:grid sm:grid-cols-2 sm:gap-2">
          <InputText
            className="h-64"
            name="editor"
            title="Editor"
            editor="monaco"
            editorLanguage="markdown"
            editorHideLineNumbers={true}
            value={markdownValue}
            setValue={setMarkdownValue}
          />

          <div className="h-64 overflow-auto">
            <label className="text-xs font-medium text-gray-600">Preview</label>
            <div className="prose rounded-md border-2 border-dashed border-gray-300 p-6">
              <div
                dangerouslySetInnerHTML={{
                  __html: marked(markdownValue) ?? "",
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

InputMultiText

function () {
  const [value, setValue] = useState<{ order: number; value: string }[]>([]);
  return (
    <div id="input-text">
      <div className="border border-dashed border-gray-300 bg-white p-6">
        <InputMultiText name="name" title="Title" value={value} onSelected={setValue} />
      </div>
    </div>
  );
}