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