Input

import { useState } from "react"

import { Body1, Flex, Input } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function InputDefaultPreview() {
  const [value, setValue] = useState("")
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Your name</Body1>
        <Input
          value={value}
          onChange={(_e, v) => setValue(v)}
          placeholder="e.g. Nurs"
        />
      </Flex>
    </PreviewLayout>
  )
}

import { useState } from "react"

import { Body1, Flex, Input } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function InputFilledPreview() {
  const [value, setValue] = useState("nurs@boxo.com")
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Email</Body1>
        <Input
          value={value}
          onChange={(_e, v) => setValue(v)}
          placeholder="you@boxo.com"
        />
      </Flex>
    </PreviewLayout>
  )
}

import { useState } from "react"

import { Body1, Flex, Footnote2, Input } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function InputErrorPreview() {
  const [value, setValue] = useState("+886 invalid")
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Phone</Body1>
        <Input
          value={value}
          hasError
          onChange={(_e, v) => setValue(v)}
          placeholder="+886 9xx xxx xxx"
        />
        <Footnote2 color="text-3">
          Please enter a valid phone number.
        </Footnote2>
      </Flex>
    </PreviewLayout>
  )
}

import { Body1, Flex, Input } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function InputDisabledPreview() {
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Locked field</Body1>
        <Input value="account_id_42" disabled />
      </Flex>
    </PreviewLayout>
  )
}