40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import type { Component, ComponentProps } from "solid-js"
|
|
import { splitProps } from "solid-js"
|
|
|
|
import type { VariantProps } from "class-variance-authority"
|
|
import { cva } from "class-variance-authority"
|
|
|
|
import { cn } from "~/lib/utils"
|
|
|
|
const calloutVariants = cva("rounded-md border-l-4 p-2 pl-4", {
|
|
variants: {
|
|
variant: {
|
|
default: "border-info-foreground bg-info text-info-foreground",
|
|
success: "border-success-foreground bg-success text-success-foreground",
|
|
warning: "border-warning-foreground bg-warning text-warning-foreground",
|
|
error: "border-error-foreground bg-error text-error-foreground"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
variant: "default"
|
|
}
|
|
})
|
|
|
|
type CalloutProps = ComponentProps<"div"> & VariantProps<typeof calloutVariants>
|
|
|
|
const Callout: Component<CalloutProps> = (props) => {
|
|
const [local, others] = splitProps(props, ["class", "variant"])
|
|
return <div class={cn(calloutVariants({ variant: local.variant }), local.class)} {...others} />
|
|
}
|
|
|
|
const CalloutTitle: Component<ComponentProps<"h3">> = (props) => {
|
|
const [local, others] = splitProps(props, ["class"])
|
|
return <h3 class={cn("font-semibold", local.class)} {...others} />
|
|
}
|
|
|
|
const CalloutContent: Component<ComponentProps<"div">> = (props) => {
|
|
const [local, others] = splitProps(props, ["class"])
|
|
return <div class={cn("mt-2", local.class)} {...others} />
|
|
}
|
|
|
|
export { Callout, CalloutTitle, CalloutContent }
|