Callout

1
import type { VariantProps } from "class-variance-authority";
2
import type { Component, ComponentProps, JSX } from "solid-js";
3

4
import { Show, splitProps } from "solid-js";
5
import { cva } from "class-variance-authority";
6
import CircleCheckIcon from "lucide-solid/icons/circle-check";
7
import CircleXIcon from "lucide-solid/icons/circle-x";
8
import InfoIcon from "lucide-solid/icons/info";
9
import TriangleAlertIcon from "lucide-solid/icons/triangle-alert";
10

11
import { cn } from "~/lib/utils";
12

13
const calloutVariants = cva("rounded-base border-2 px-4 py-3", {
14
  variants: {
15
    variant: {
16
      default: "border-primary bg-background text-primary",
17
      success: "border-success-foreground bg-success text-success-foreground",
18
      info: "border-info-foreground bg-info text-info-foreground",
19
      warning: "border-warning-foreground bg-warning text-warning-foreground",
20
      error: "border-error-foreground bg-error text-error-foreground",
21
    },
22
  },
23
  defaultVariants: {
24
    variant: "default",
25
  },
26
});
27

28
type CalloutProps = ComponentProps<"div"> &
29
  VariantProps<typeof calloutVariants>;
30

31
type CalloutVariant = NonNullable<
32
  VariantProps<typeof calloutVariants>["variant"]
33
>;
34

35
type IconMap = Exclude<CalloutVariant, "default">;
36

37
const iconMap: {
38
  [key in IconMap]: (props: { class?: string }) => JSX.Element;
39
} = {
40
  success: (props) => <CircleCheckIcon class={props.class} />,
41
  info: (props) => <InfoIcon class={props.class} />,
42
  warning: (props) => <TriangleAlertIcon class={props.class} />,
43
  error: (props) => <CircleXIcon class={props.class} />,
44
};
45

46
const Callout: Component<CalloutProps> = (props) => {
47
  const [local, others] = splitProps(props, ["class", "variant"]);
48

49
  return (
50
    <div
51
      data-slot="callout"
52
      data-variant={local.variant}
53
      class={cn(calloutVariants({ variant: local.variant }), local.class)}
54
      {...others}
55
    />
56
  );
57
};
58

59
const CalloutTitle: Component<
60
  ComponentProps<"h3"> & {
61
    icon?: JSX.Element | (() => JSX.Element);
62
  }
63
> = (props) => {
64
  const [local, others] = splitProps(props, ["class"]);
65
  return (
66
    <div class="flex items-center gap-2">
67
      <Show when={props.icon}>
68
        {typeof props.icon === "function" ? <props.icon /> : props.icon}
69
      </Show>
70
      <h3
71
        data-slot="callout-title"
72
        class={cn("font-semibold", local.class)}
73
        {...others}
74
      />
75
    </div>
76
  );
77
};
78

79
const CalloutContent: Component<ComponentProps<"div">> = (props) => {
80
  const [local, others] = splitProps(props, ["class"]);
81
  return (
82
    <div
83
      data-slot="callout-content"
84
      class={cn("mt-2", local.class)}
85
      {...others}
86
    />
87
  );
88
};
89

90
export { Callout, CalloutTitle, CalloutContent, iconMap as calloutIconMap };