#GlobalStatus

<GlobalStatus
  title="Custom Title"
  text="Failure text"
  items={[
    {
      text: 'List item',
      status_anchor_url: '/uilib/components/global-status',
      status_anchor_label: 'eksempel',
    },
  ]}
  show={true}
  autoscroll={false}
  no_animation={true}
  omit_set_focus={true}
  id="demo-1"
/>

<GlobalStatus
  state="info"
  title="Custom info title ..."
  text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
  items={['Status text 1', 'Status text 2']}
  show={true}
  autoscroll={false}
  no_animation={true}
  omit_set_focus={true}
  id="demo-4"
/>

<GlobalStatus
  state="warning"
  title="Custom warning title ..."
  text="A string of text providing a warning or semi-urgent message of some kind to the user"
  show={true}
  autoscroll={false}
  no_animation={true}
  omit_set_focus={true}
  id="demo-5"
/>

<GlobalStatus
  state="success"
  title="Custom success title ..."
  text="A string of text providing a success message of some kind to the user"
  show={true}
  autoscroll={false}
  no_animation={true}
  omit_set_focus={true}
  id="demo-6"
/>

const InputWithError = () => {
  const [errorMessage, setErrorMessage] = React.useState(null)
  return (
    <Input
      label="Input:"
      placeholder="Write less than 5 chars and dismiss the focus to show the GlobalStatus ..."
      stretch
      status={errorMessage}
      on_blur={({ value }) => {
        setErrorMessage(value.length <= 4 ? 'With a message shown' : null)
      }}
      globalStatus={{
        id: 'main-status',
      }}
    />
  )
}
render(<InputWithError />)