54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { type VariantProps, cva } from 'class-variance-authority'
|
|
import { HTMLAttributes, defineComponent } from 'vue'
|
|
import { cn } from '@/utils'
|
|
|
|
const alertVariants = cva(
|
|
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: 'bg-background text-foreground',
|
|
destructive:
|
|
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
},
|
|
},
|
|
)
|
|
|
|
const Alert = defineComponent<VariantProps<typeof alertVariants> & HTMLAttributes>((props, { slots, attrs }) => {
|
|
const variant = props.variant ?? 'default'
|
|
return () => (
|
|
<div
|
|
role="alert"
|
|
class={cn(alertVariants({ variant }), attrs.class ?? '')}
|
|
{...props}
|
|
>
|
|
{slots.default?.()}
|
|
</div>
|
|
)
|
|
}, {name: "Alert"})
|
|
|
|
const AlertTitle = defineComponent<HTMLAttributes>((props, {slots, attrs}) => {
|
|
return () =>(
|
|
<h5
|
|
class={cn('mb-1 font-medium leading-none tracking-tight', attrs.class ?? '')}
|
|
{...props}
|
|
>
|
|
{slots.default?.()}
|
|
</h5>
|
|
)}, {name: "AlertTitle"})
|
|
|
|
const AlertDescription = defineComponent<HTMLAttributes>((props, {slots, attrs}) => { return () => (
|
|
<div
|
|
class={cn('text-sm [&_p]:leading-relaxed', attrs.class ?? '')}
|
|
{...props}
|
|
>
|
|
{slots.default?.()}
|
|
</div>
|
|
)}, {name: "AlertDescription"})
|
|
|
|
export { Alert, AlertTitle, AlertDescription }
|