TextArea

import { useState } from "react"

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

import { PreviewLayout } from "./_section"

export function TextareaDefaultPreview() {
  const [value, setValue] = useState("")
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Tell us about yourself</Body1>
        <TextArea
          value={value}
          onChange={(_e, v) => setValue(v)}
          placeholder="A few words…"
          autoSize={{ minRows: 3, maxRows: 8 }}
        />
      </Flex>
    </PreviewLayout>
  )
}

import { useState } from "react"

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

import { PreviewLayout } from "./_section"

export function TextareaFilledPreview() {
  const [value, setValue] = useState(
    "App froze on the checkout screen after I tapped Confirm. Lost my session twice."
  )
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Bug report</Body1>
        <TextArea
          value={value}
          onChange={(_e, v) => setValue(v)}
          autoSize={{ minRows: 3, maxRows: 8 }}
        />
      </Flex>
    </PreviewLayout>
  )
}

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

import { PreviewLayout } from "./_section"

export function TextareaErrorPreview() {
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Notes</Body1>
        <TextArea value="too short" hasError rows={3} onChange={() => {}} />
        <Footnote2 color="text-3">Minimum 20 characters.</Footnote2>
      </Flex>
    </PreviewLayout>
  )
}

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

import { PreviewLayout } from "./_section"

export function TextareaDisabledPreview() {
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Read-only summary</Body1>
        <TextArea
          value="System-generated transcript. Locked for audit."
          disabled
          rows={3}
        />
      </Flex>
    </PreviewLayout>
  )
}