Alert

import { CheckCircle2Icon, InfoIcon } from "lucide-react";

import {
	Alert,
	AlertDescription,
	AlertTitle,
} from "@/components/ui/alert";

export function AlertDemo() {
	return (
		<div className="grid w-full max-w-md items-start gap-4">
			<Alert>
				<CheckCircle2Icon />
				<AlertTitle>Payment successful</AlertTitle>
				<AlertDescription>
					Your payment of $29.99 has been processed. A receipt has been sent to
					your email address.
				</AlertDescription>
			</Alert>
			<Alert>
				<InfoIcon />
				<AlertTitle>New feature available</AlertTitle>
				<AlertDescription>
					We&apos;ve added dark mode support. You can enable it in your account
					settings.
				</AlertDescription>
			</Alert>
		</div>
	);
}

import {
	AlertCircleIcon,
	CheckCircle2Icon,
	InfoIcon,
	TriangleAlertIcon,
} from "lucide-react";

import {
	Alert,
	AlertDescription,
	AlertTitle,
} from "@/components/ui/alert";

export function AlertVariants() {
	return (
		<div className="grid w-full max-w-md items-start gap-4">
			<Alert>
				<InfoIcon />
				<AlertTitle>Default alert</AlertTitle>
				<AlertDescription>
					Use this for neutral updates and general information.
				</AlertDescription>
			</Alert>
			<Alert variant="primary">
				<InfoIcon />
				<AlertTitle>Primary alert</AlertTitle>
				<AlertDescription>
					Highlight important product updates and highlighted guidance.
				</AlertDescription>
			</Alert>
			<Alert variant="success">
				<CheckCircle2Icon />
				<AlertTitle>Success alert</AlertTitle>
				<AlertDescription>
					Your profile was updated successfully and synced across devices.
				</AlertDescription>
			</Alert>
			<Alert variant="warning">
				<TriangleAlertIcon />
				<AlertTitle>Warning alert</AlertTitle>
				<AlertDescription>
					Your trial will expire in three days unless you update billing.
				</AlertDescription>
			</Alert>
			<Alert variant="destructive">
				<AlertCircleIcon />
				<AlertTitle>Destructive alert</AlertTitle>
				<AlertDescription>
					Your payment could not be processed. Please try another card.
				</AlertDescription>
			</Alert>
		</div>
	);
}

import { BellIcon } from "lucide-react";

import {
	Alert,
	AlertAction,
	AlertDescription,
	AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export function AlertActionExample() {
	return (
		<Alert className="max-w-md">
			<BellIcon />
			<AlertTitle>Dark mode is now available</AlertTitle>
			<AlertDescription>
				Enable it under your profile settings to get started.
			</AlertDescription>
			<AlertAction>
				<Button size="xs" variant="default">
					Enable
				</Button>
			</AlertAction>
		</Alert>
	);
}

import { AlertTriangleIcon } from "lucide-react";

import {
	Alert,
	AlertDescription,
	AlertTitle,
} from "@/components/ui/alert";

export function AlertColors() {
	return (
		<Alert className="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
			<AlertTriangleIcon />
			<AlertTitle>Your subscription will expire in 3 days.</AlertTitle>
			<AlertDescription>
				Renew now to avoid service interruption or upgrade to a paid plan to
				continue using the service.
			</AlertDescription>
		</Alert>
	);
}

"use client";

import { CheckCircle2Icon, InfoIcon } from "lucide-react";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import {
	Alert,
	AlertDescription,
	AlertTitle,
} from "@/components/ui/alert";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			paymentTitle: "Payment successful",
			paymentDescription:
				"Your payment of $29.99 has been processed. A receipt has been sent to your email address.",
			featureTitle: "New feature available",
			featureDescription:
				"We've added dark mode support. You can enable it in your account settings.",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			paymentTitle: "تم الدفع بنجاح",
			paymentDescription:
				"تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.",
			featureTitle: "ميزة جديدة متاحة",
			featureDescription:
				"لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.",
		},
	},
	he: {
		dir: "rtl",
		values: {
			paymentTitle: "התשלום בוצע בהצלחה",
			paymentDescription:
				"התשלום שלך בסך 29.99 דולר עובד. קבלה נשלחה לכתובת האימייל שלך.",
			featureTitle: "תכונה חדשה זמינה",
			featureDescription:
				"הוספנו תמיכה במצב כהה. אתה יכול להפעיל אותו בהגדרות החשבון שלך.",
		},
	},
};

const alerts = [
	{
		icon: CheckCircle2Icon,
		titleKey: "paymentTitle" as const,
		descriptionKey: "paymentDescription" as const,
	},
	{
		icon: InfoIcon,
		titleKey: "featureTitle" as const,
		descriptionKey: "featureDescription" as const,
	},
] as const;

export function AlertRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	return (
		<div
			className="grid w-full max-w-md items-start gap-4"
			lang={language}
			dir={dir}
		>
			{alerts.map((alert, index) => {
				const Icon = alert.icon;
				return (
					<Alert key={index}>
						<Icon />
						<AlertTitle>{t[alert.titleKey]}</AlertTitle>
						<AlertDescription>{t[alert.descriptionKey]}</AlertDescription>
					</Alert>
				);
			})}
		</div>
	);
}