TextInput

import { TextInput } from "@camome/core/TextInput";

export default function Default() {
  return <TextInput label="Name" placeholder="John Doe" />;
}

import { TextInput } from "@camome/core/TextInput";

export default function Required() {
  return <TextInput label="Name" placeholder="John Doe" required />;
}

import { TextInput } from "@camome/core/TextInput";

export default function Fill() {
  return (
    <div style={{ minWidth: "30rem" }}>
      <TextInput label="Name" placeholder="John Doe" fill />
    </div>
  );
}

import { TextInput } from "@camome/core/TextInput";

export default function Description() {
  return (
    <TextInput
      label="Name"
      description="Description text"
      placeholder="John Doe"
    />
  );
}

import { TextInput } from "@camome/core/TextInput";

export default function Error() {
  return (
    <TextInput label="Name" error="Something is wrong" placeholder="John Doe" />
  );
}

import { TextInput } from "@camome/core/TextInput";

export default function Disabled() {
  return <TextInput label="Name" placeholder="John Doe" disabled />;
}

import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";

import { Kbd } from "@camome/core/Kbd";
import { TextInput } from "@camome/core/TextInput";
import { TextInputGroup } from "@camome/core/TextInputGroup";

import styles from "./styles.module.scss";

export default function Group() {
  return (
    <TextInputGroup
      input={<TextInput type="search" size="md" placeholder="Search" />}
      leftDecorator={
        <MagnifyingGlassIcon
          strokeWidth="2.5"
          style={{ color: "var(--cmm-color-gray-3)" }}
        />
      }
      rightDecorator={
        <div
          style={{
            display: "flex",
            fontSize: "0.9rem",
          }}
        >
          <Kbd>⌘ + K</Kbd>
        </div>
      }
      className={styles.group}
    />
  );
}