---
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
import Alert from '@ui/Alert.astro'
---

<ScreenshotLayout title="Alert" columns={2}>
  <div class="space-y">
    <Alert color="success" title="Well done!" description="You successfully read this important alert message." />
    <Alert color="warning" title="Warning!" description="Better check yourself, you're not looking too good." />
    <Alert color="danger" title="Oh snap!" description="Change a few things up and try submitting again." showClose />
    <Alert color="info" title="Heads up!" description="This alert needs your attention, but it's not super important." />
  </div>
</ScreenshotLayout>