Callout

The Callout component is a custom component used to highlight important information in your application. It is designed to be flexible and easy to use, with four different types to choose from: info, success, warning, and error.

Props

The Callout component accepts the following props:

• type: (optional) This prop determines the type of the callout. It can be one of the following values: info, success, warning, error. If not provided, the default type is info.

• children: This prop is used to pass the content that will be displayed inside the callout.

Usage

Here is an example of how to use the Callout component:

1import {Callout} from '@components'
2
3<Callout type="info">
4  This is an important message.
5</Callout>

In this example, an info type callout is created with the message "This is an important message."

Styling

The Callout component uses different styles based on the type prop. The styles are defined in the calloutVariants object in the callout.tsx file. )

1export const calloutVariants = cva(
2	[ "relative rounded-lg border-l-4 border p-4 my-6 overflow-clip text-base-600 first:mt-0 last:mb-0"],
3	{
4		variants: {
5			type: {
6				info: "bg-white border-base-200",
7				success: "bg-emerald-200/40 border-emerald-200 dark:bg-emerald-950 dark:border-emerald-800/40",
8				warning: "bg-amber-200/40 border-amber-200 dark:bg-yellow-950 dark:border-yellow-800/40",
9				error: "bg-rose-200/40 border-rose-200 dark:bg-rose-950 dark:border-rose-800/40",
10			},
11		},
12		defaultVariants: {
13			type: "info",
14		},
15	},
16)

Each type has a different background color, border color, and text color. The colors are defined using Tailwind CSS classes.

Icons

The Callout component also includes an icon that corresponds to the type prop. The icons are imported from the @tabler/icons-react package.

1const Icon = {
2  info: IconInfoCircle,
3  success: IconCircleCheck,
4  warning: IconAlertCircle,
5  error: IconCircleX,
6}[type || "info"]

Examples