Alert

1import type { Component, ComponentProps, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import * as AlertPrimitive from "@kobalte/core/alert"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6import type { VariantProps } from "class-variance-authority"
7import { cva } from "class-variance-authority"
8 
9import { cn } from "~/lib/utils"
10 
11const alertVariants = cva(
12  "relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
13  {
14    variants: {
15      variant: {
16        default: "bg-background text-foreground",
17        destructive:
18          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
19      }
20    },
21    defaultVariants: {
22      variant: "default"
23    }
24  }
25)
26 
27type AlertRootProps<T extends ValidComponent = "div"> = AlertPrimitive.AlertRootProps<T> &
28  VariantProps<typeof alertVariants> & { class?: string | undefined }
29 
30const Alert = <T extends ValidComponent = "div">(props: PolymorphicProps<T, AlertRootProps<T>>) => {
31  const [local, others] = splitProps(props as AlertRootProps, ["class", "variant"])
32  return (
33    <AlertPrimitive.Root
34      class={cn(alertVariants({ variant: props.variant }), local.class)}
35      {...others}
36    />
37  )
38}
39 
40const AlertTitle: Component<ComponentProps<"h5">> = (props) => {
41  const [local, others] = splitProps(props, ["class"])
42  return <h5 class={cn("mb-1 font-medium leading-none tracking-tight", local.class)} {...others} />
43}
44 
45const AlertDescription: Component<ComponentProps<"div">> = (props) => {
46  const [local, others] = splitProps(props, ["class"])
47  return <div class={cn("text-sm [&_p]:leading-relaxed", local.class)} {...others} />
48}
49 
50export { Alert, AlertTitle, AlertDescription }