39 lines
916 B
Vue
39 lines
916 B
Vue
<script setup>
|
|
import { cn } from "@/lib/utils";
|
|
import { cva } from "class-variance-authority";
|
|
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: "default",
|
|
validator: (value) => ["default", "destructive"].includes(value),
|
|
},
|
|
class: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
|
|
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",
|
|
},
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="cn(alertVariants({ variant }), props.class)" role="alert">
|
|
<slot />
|
|
</div>
|
|
</template>
|