Componente de Alerta

O componente Alert permite exibir mensagens de alerta com diferentes tipos de severidade: success, error, warning, e info. Cada tipo possui cores e ícones personalizados.

Como importar

import { Alert } from '@/app/shared/@JustLaunch/components'

Tipos de Alerta

Success

Este alerta é utilizado para informar o usuário sobre o sucesso de uma operação.

<Alert.Root
    title="Success Alert"
    type="success"
  >
    <Alert.Message>
      Operation was successful!
    </Alert.Message>
  </Alert.Root>

Info

Este alerta é utilizado para fornecer informações importantes ao usuário.

  <Alert.Root
    title="Info Alert"
    type="info"
  >
    <Alert.Message>
      This is a default alert message.
    </Alert.Message>
  </Alert.Root>

Warning com Footer e Buttons

Este alerta é utilizado para informar o usuário sobre o sucesso de uma operação.

<Alert.Root
    title="Warning Alert"
    type="warning"
  >
    <>
      <Alert.Message>
          Be careful with this operation.
      </Alert.Message>
      <Alert.Footer>
        <Alert.Link href="#">
          Learn more
        </Alert.Link>
      </Alert.Footer>
    </>
  </Alert.Root>

Error com Footer e Buttons

Este alerta é utilizado para informar o usuário sobre um erro que ocorreu.

<Alert.Root
    title="Error Alert"
    type="error"
  >
    <>
      <Alert.Message>
        There was an error processing your request.
      </Alert.Message>
      <Alert.Footer>
        <Alert.Link href="#">
          Retry
        </Alert.Link>
        <Alert.Link href="#">
          Contact Support
        </Alert.Link>
      </Alert.Footer>
    </>
  </Alert.Root>