PickerInput

import { useState } from "react"

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

import { PreviewLayout } from "./_section"

const THEME_OPTIONS = [
  [
    { label: "Light", value: "light" },
    { label: "Dark", value: "dark" },
    { label: "System", value: "system" },
  ],
]

export function PickerInputDefaultPreview() {
  const [value, setValue] = useState<(string | number)[]>(["light"])
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Theme</Body1>
        <PickerInput
          data={THEME_OPTIONS}
          value={value}
          onOk={(v) => setValue(v)}
        />
      </Flex>
    </PreviewLayout>
  )
}

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

const COUNTRIES = [
  [
    { label: "Singapore", value: "SG" },
    { label: "Taiwan", value: "TW" },
    { label: "United States", value: "US" },
  ],
]

import { PreviewLayout } from "./_section"

export function PickerInputErrorPreview() {
  return (
    <PreviewLayout>
      <Flex vertical gap={6}>
        <Body1 weight="semibold">Country</Body1>
        <PickerInput data={COUNTRIES} value={[]} hasError onOk={() => {}} />
        <Footnote2 color="text-3">Please select a country.</Footnote2>
      </Flex>
    </PreviewLayout>
  )
}