PinField

import { PinField } from "@prismane/core";

function Demo() {
  const [value, setValue] = useState("");

  const handleChange = (e) => setValue(e.target.value);

  return <PinField value={value} onChange={handleChange} />;
}

function Demo() {
  const [pin, setPin] = useState("");

  return (
    <>
      <PinField
        variant="outlined"
        placeholder="Default Field"
        label="Default Field:"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
      <PinField
        variant="filled"
        placeholder="Default Field"
        label="Default Field:"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
      <PinField
        variant="underlined"
        placeholder="Default Field"
        label="Default Field:"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
      <PinField
        variant="unstyled"
        placeholder="Default Field"
        label="Default Field:"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
    </>
  );
}

function Demo() {
  const [pin, setPin] = useState("");

  return (
    <Flex direction="column" gap={fr(2)}>
      <PinField
        size="xs"
        placeholder="Default Field"
        label="Default Field:"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
      <PinField
        size="sm"
        placeholder="Default Field"
        label="Default Field:"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
      <PinField
        size="base"
        placeholder="Default Field"
        label="Default Field:"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
      <PinField
        size="md"
        placeholder="Default Field"
        label="Default Field:"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
      <PinField
        size="lg"
        placeholder="Default Field"
        label="Default Field:"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
    </Flex>
  );
}