Callout

1import type { Component, ComponentProps } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { VariantProps } from "class-variance-authority"
5import { cva } from "class-variance-authority"
6 
7import { cn } from "~/lib/utils"
8 
9const calloutVariants = cva("rounded-md border-l-4 p-2 pl-4", {
10  variants: {
11    variant: {
12      default: "border-info-foreground bg-info text-info-foreground",
13      success: "border-success-foreground bg-success text-success-foreground",
14      warning: "border-warning-foreground bg-warning text-warning-foreground",
15      error: "border-error-foreground bg-error text-error-foreground"
16    }
17  },
18  defaultVariants: {
19    variant: "default"
20  }
21})
22 
23type CalloutProps = ComponentProps<"div"> & VariantProps<typeof calloutVariants>
24 
25const Callout: Component<CalloutProps> = (props) => {
26  const [local, others] = splitProps(props, ["class", "variant"])
27  return <div class={cn(calloutVariants({ variant: local.variant }), local.class)} {...others} />
28}
29 
30const CalloutTitle: Component<ComponentProps<"h3">> = (props) => {
31  const [local, others] = splitProps(props, ["class"])
32  return <h3 class={cn("font-semibold", local.class)} {...others} />
33}
34 
35const CalloutContent: Component<ComponentProps<"div">> = (props) => {
36  const [local, others] = splitProps(props, ["class"])
37  return <div class={cn("mt-2", local.class)} {...others} />
38}
39 
40export { Callout, CalloutTitle, CalloutContent }