Alert

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

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

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

import { AlertTriangleIcon } from "lucide-react"
 
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 
export function AlertWarning() {
	return (
		<Alert variant="warning">
			<AlertTriangleIcon />
			<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>
		</Alert>
	)
}

import { XCircleIcon } from "lucide-react"
 
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 
export function AlertDanger() {
	return (
		<Alert variant="danger">
			<XCircleIcon />
			<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>
		</Alert>
	)
}

import { AlertTriangleIcon } from "lucide-react"
 
import { Alert, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
 
export function AlertWithAction() {
	return (
		<Alert>
			<AlertTriangleIcon />
			<AlertTitle className="line-clamp-1 max-w-[calc(100%-4rem)] overflow-ellipsis">
				No Internet Connection
			</AlertTitle>
			<Button
				className="absolute top-1/2 right-4 h-6 -translate-y-1/2 shadow-none"
				size="sm"
				variant="outline"
			>
				Try Again
			</Button>
		</Alert>
	)
}