Alert

// Package alert holds the site's example gsx components for ui/alert.
package alert

import (
	"github.com/gsxhq/gsxui/ui"
	uiicon "github.com/gsxhq/gsxui/ui/icon"
)

// Basic renders a default Alert with an icon, title, and description.
component Basic() {
	<ui.Alert>
		<uiicon.Terminal/>
		<ui.AlertTitle>Heads up!</ui.AlertTitle>
		<ui.AlertDescription>You can add components to your app using the CLI.</ui.AlertDescription>
	</ui.Alert>
}

package alert

import (
	"github.com/gsxhq/gsxui/ui"
	uiicon "github.com/gsxhq/gsxui/ui/icon"
)

// Variants renders the default and destructive Alert variants together.
component Variants() {
	<div class="flex flex-col gap-4">
		<ui.Alert>
			<uiicon.CircleCheck/>
			<ui.AlertTitle>Success! Your changes have been saved.</ui.AlertTitle>
			<ui.AlertDescription>This is an alert with icon, title, and description.</ui.AlertDescription>
		</ui.Alert>
		<ui.Alert variant="destructive">
			<uiicon.CircleAlert/>
			<ui.AlertTitle>Unable to process your payment.</ui.AlertTitle>
			<ui.AlertDescription>Please verify your billing information and try again.</ui.AlertDescription>
		</ui.Alert>
	</div>
}