Alert

<div class="flex w-full max-w-lg flex-col items-center gap-3">
    <x-components.alert variant="primary" title="Primary Alert" description="This is the subtext for your alert message. Add information or instructions here." />
    <x-components.alert variant="secondary" title="Secondary Alert" description="This is the subtext for your alert message. Add information or instructions here." />
    <x-components.alert variant="destructive" title="Destructive Alert" description="This is the subtext for your alert message. Add information or instructions here." />
    <x-components.alert variant="info" title="Info Alert" description="This is the subtext for your alert message. Add information or instructions here." />
    <x-components.alert variant="success" title="Success Alert" description="This is the subtext for your alert message. Add information or instructions here." />
    <x-components.alert variant="warning" title="Warning Alert" description="This is the subtext for your alert message. Add information or instructions here." />
</div>

<div class="flex w-full max-w-lg justify-center">
    <x-components.alert variant="info" title="Scheduled maintenance" description="We'll be upgrading our servers this Sunday at 2 AM UTC.">
        <a href="#" class="text-sm font-medium underline underline-offset-4">View status page</a>
    </x-components.alert>
</div>