Glass Alert

1import * as React from 'react'
2import { cva, type VariantProps } from 'class-variance-authority'
3 
4import { cn } from '@/lib/utils'
5 
6export const glassAlertVariants = cva(
7  'relative grid grid-cols-[0_1fr] items-start gap-x-3 rounded-2xl border p-4 text-sm backdrop-blur-md [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg]:text-current has-[svg]:grid-cols-[auto_1fr] has-[svg]:pl-11',
8  {
9    variants: {
10      variant: {
11        default: 'border-glass-border bg-glass text-body',
12        info: 'border-ruri/25 bg-ruri/10 text-ruri dark:border-ruri-soft/25 dark:bg-ruri-soft/10 dark:text-ruri-soft',
13        warning:
14          'border-korozen/25 bg-korozen/10 text-korozen dark:border-korozen-soft/25 dark:bg-korozen-soft/10 dark:text-korozen-soft',
15        destructive: 'border-destructive/30 bg-destructive/10 text-destructive',
16      },
17    },
18    defaultVariants: {
19      variant: 'default',
20    },
21  },
22)
23 
24export interface GlassAlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof glassAlertVariants> {}
25 
26function GlassAlert({ variant, className, ...props }: GlassAlertProps) {
27  return <div role="alert" className={cn(glassAlertVariants({ variant }), className)} {...props} />
28}
29 
30function GlassAlertTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
31  return <h5 className={cn('col-start-2 font-medium leading-none tracking-tight', className)} {...props} />
32}
33 
34function GlassAlertDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
35  return <div className={cn('col-start-2 text-sm text-muted-foreground [&_p]:leading-relaxed', className)} {...props} />
36}
37 
38export { GlassAlert, GlassAlertTitle, GlassAlertDescription }