<.message
  id="message-single-default-message"
  message="Did you know that?"
  type={:hint}
  description="Neither did we 🤷"
  icon_class="fad fa-skull"
  dismissable
/>

<.message
  id="message-all-types-hint"
  message="We have a (latin) message for you!"
  type={:hint}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  dismissable
>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:hint} outline={true}
  />
</.message>
<.message
  id="message-all-types-info"
  message="We have a (latin) message for you!"
  type={:info}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  dismissable
>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:info} outline={true}
  />
</.message>
<.message
  id="message-all-types-success"
  message="We have a (latin) message for you!"
  type={:success}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  dismissable
>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:success} outline={true}
  />
</.message>
<.message
  id="message-all-types-error"
  message="We have a (latin) message for you!"
  type={:error}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  dismissable
>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:error} outline={true}
  />
</.message>
<.message
  id="message-all-types-warning"
  message="We have a (latin) message for you!"
  type={:warning}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  dismissable
>
  <.button text="Let me know" icon="fa fa-envelope"
    color={:warning} outline={true}
  />
</.message>

<.message
  id="message-inline-messages-hint"
  message="We have a (latin) message for you!"
  type={:hint}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  inline
>
  <.button text="Got it" icon="fa fa-check"
    color={:hint} outline={true}
  />
</.message>
<.message
  id="message-inline-messages-info"
  message="We have a (latin) message for you!"
  type={:info}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  inline
>
  <.button text="Got it" icon="fa fa-check"
    color={:info} outline={true}
  />
</.message>
<.message
  id="message-inline-messages-success"
  message="We have a (latin) message for you!"
  type={:success}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  inline
>
  <.button text="Got it" icon="fa fa-check"
    color={:success} outline={true}
  />
</.message>
<.message
  id="message-inline-messages-error"
  message="We have a (latin) message for you!"
  type={:error}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  inline
>
  <.button text="Got it" icon="fa fa-check"
    color={:error} outline={true}
  />
</.message>
<.message
  id="message-inline-messages-warning"
  message="We have a (latin) message for you!"
  type={:warning}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing."
  inline
>
  <.button text="Got it" icon="fa fa-check"
    color={:warning} outline={true}
  />
</.message>

<.message
  id="message-single-no-title-message"
  message={nil}
  type={:hint}
  description="This is a message without a title"
  dismissable
/>

<.button text="Show flash" phx-click={JS.push("psb-assign", value: %{show: true})}/>
<div class="fixed w-100 right-4 top-4 z-50">
  <.message
    id="message-single-flash"
    message="I should appear in the corner"
    type={:success}
    description="Flash description"
    flash
    dismissable
  />
</div>