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>
}

package alert

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

// Rtl mirrors shadcn's own alert-rtl demo: a payment-success Alert and a
// new-feature Alert, translated to Arabic, wrapped in dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar" class="grid w-full max-w-md items-start gap-4">
		<ui.Alert>
			<uiicon.CircleCheck/>
			<ui.AlertTitle>تم الدفع بنجاح</ui.AlertTitle>
			<ui.AlertDescription>
				تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.
			</ui.AlertDescription>
		</ui.Alert>
		<ui.Alert>
			<uiicon.Info/>
			<ui.AlertTitle>ميزة جديدة متاحة</ui.AlertTitle>
			<ui.AlertDescription>لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.</ui.AlertDescription>
		</ui.Alert>
	</div>
}