Alert

import { AlertTriangleIcon } from "lucide-react"
 
import {
	Alert,
	AlertContent,
	AlertDescription,
	AlertIcon,
	AlertTitle,
} from "@/components/ui/alert"
 
export function AlertDemo() {
	return (
		<Alert>
			<AlertIcon>
				<AlertTriangleIcon />
			</AlertIcon>
			<AlertContent>
				<AlertTitle>No Internet Connection</AlertTitle>
				<AlertDescription>
					Please check your internet connection and try again.
				</AlertDescription>
			</AlertContent>
		</Alert>
	)
}

import { CircleCheckIcon } from "lucide-react"
 
import {
	Alert,
	AlertContent,
	AlertDescription,
	AlertIcon,
	AlertTitle,
} from "@/components/ui/alert"
 
export function AlertSuccess() {
	return (
		<Alert variant="success">
			<AlertIcon>
				<CircleCheckIcon />
			</AlertIcon>
			<AlertContent>
				<AlertTitle>Your account has been created</AlertTitle>
				<AlertDescription>
					You can now sign in with your new account credentials.
				</AlertDescription>
			</AlertContent>
		</Alert>
	)
}

import { InfoIcon } from "lucide-react"
 
import {
	Alert,
	AlertContent,
	AlertDescription,
	AlertIcon,
	AlertTitle,
} from "@/components/ui/alert"
 
export function AlertInfo() {
	return (
		<Alert variant="info">
			<AlertIcon>
				<InfoIcon />
			</AlertIcon>
			<AlertContent>
				<AlertTitle>Browser Update Available</AlertTitle>
				<AlertDescription>
					A new version of your browser is available. Updating your browser
					ensures better security and performance.
				</AlertDescription>
			</AlertContent>
		</Alert>
	)
}

import { AlertTriangleIcon } from "lucide-react"
 
import {
	Alert,
	AlertContent,
	AlertDescription,
	AlertIcon,
	AlertTitle,
} from "@/components/ui/alert"
 
export function AlertWarning() {
	return (
		<Alert variant="warning">
			<AlertIcon>
				<AlertTriangleIcon />
			</AlertIcon>
			<AlertContent>
				<AlertTitle>Your session is about to expire</AlertTitle>
				<AlertDescription>
					You will be logged out in 5 minutes. Please save your work and refresh
					the page.
				</AlertDescription>
			</AlertContent>
		</Alert>
	)
}

import { XCircleIcon } from "lucide-react"
 
import {
	Alert,
	AlertContent,
	AlertDescription,
	AlertIcon,
	AlertTitle,
} from "@/components/ui/alert"
 
export function AlertDanger() {
	return (
		<Alert variant="danger">
			<AlertIcon>
				<XCircleIcon />
			</AlertIcon>
			<AlertContent>
				<AlertTitle>Your subscription has been canceled</AlertTitle>
				<AlertDescription>
					Your access to premium features will end in 30 days. You can
					reactivate your subscription anytime.
				</AlertDescription>
			</AlertContent>
		</Alert>
	)
}

import { AlertTriangleIcon } from "lucide-react"
 
import {
	Alert,
	AlertAction,
	AlertContent,
	AlertDescription,
	AlertIcon,
	AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
 
export function AlertWithAction() {
	return (
		<Alert>
			<AlertIcon>
				<AlertTriangleIcon />
			</AlertIcon>
			<AlertContent>
				<AlertTitle>No Internet Connection</AlertTitle>
				<AlertDescription>
					Please check your internet connection and try again.
				</AlertDescription>
			</AlertContent>
			<AlertAction>
				<Button size="sm" variant="outline">
					Try Again
				</Button>
			</AlertAction>
		</Alert>
	)
}