Alerts

Find the source code here.

Installation

Notes

To use this component, you need to initialize your project first. If not done yet, run one of the following command:

npx jsxpine init or yarn jsxpine init or pnpm jsxpine init or bunx jsxpine init.

Go to the installation and usage page to learn more.

jsxpine add alert
Copied !

Copied !


	--------------------     Alert Component   -------------------------

		import { Icon } from "./icon.component";
import clsx from "clsx";

/**
 * @typedef AlertProps
 * @type {{ title?: string, icon?: import("@kitajs/html").Children, iconName?: import("./icon.component").IconName } & import("../common/props").VariantColorProps & import("../common/props").HTMLTag}
 */

/**
 * Alert props
 * @param {AlertProps} props
 */
export function Alert({
	class: className,
	title,
	children,
	icon,
	iconName,
	...restProps
}) {
	return (
		<div
			class={clsx(
				"relative w-full flex flex-col gap-y-2 rounded-lg border p-4",
				className
			)}
			{...restProps}
		>
			{title ? (
				<h4 class="mb-1 font-medium leading-none tracking-tight flex items-center gap-x-3">
					{icon ?? (iconName ? <Icon name={iconName} /> : null)}
					<span safe>{title}</span>
				</h4>
			) : null}
			<div class="text-sm opacity-90">{children}</div>
		</div>
	);
}

/**
 * Primary Alert props
 * @param {AlertProps} props
 */
export function PrimaryAlert({ variant = "solid", ...restProps }) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantColorMap = new Map([
		["solid", "border-transparent bg-primary text-primary-foreground"],
		["outlined", "border-transparent text-primary bg-primary-light-1"],
		[
			"inversed",
			"border-primary text-primary dark:border-primary-light-1 dark:text-primary-light-1"
		]
	]);

	return <Alert class={variantColorMap.get(variant)} {...restProps} />;
}

/**
 * Secondary Alert props
 * @param {AlertProps} props
 */
export function SecondaryAlert({ variant = "solid", ...restProps }) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantColorMap = new Map([
		["solid", "border-transparent bg-secondary text-secondary-foreground"],
		["outlined", "border-transparent text-secondary bg-secondary-light"],
		[
			"inversed",
			"border-secondary text-secondary dark:border-secondary-light dark:text-secondary-light"
		]
	]);

	return <Alert class={variantColorMap.get(variant)} {...restProps} />;
}

/**
 * Success Alert props
 * @param {AlertProps} props
 */
export function SuccessAlert({ variant = "solid", ...restProps }) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantColorMap = new Map([
		["solid", "border-transparent bg-success text-foreground"],
		["outlined", "border-transparent text-success-dark bg-success-light"],
		["inversed", "border-success text-success"]
	]);

	return <Alert class={variantColorMap.get(variant)} {...restProps} />;
}

/**
 * Danger Alert props
 * @param {AlertProps} props
 */
export function DangerAlert({ variant = "solid", ...restProps }) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantColorMap = new Map([
		["solid", "border-transparent bg-danger text-foreground"],
		["outlined", "border-transparent text-danger bg-danger-light"],
		["inversed", "border-danger text-danger"]
	]);

	return <Alert class={variantColorMap.get(variant)} {...restProps} />;
}

/**
 * Info Alert props
 * @param {AlertProps} props
 */
export function InfoAlert({ variant = "solid", ...restProps }) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantColorMap = new Map([
		["solid", "border-transparent bg-info text-info-foreground"],
		["outlined", "border-transparent text-info-dark bg-info-light"],
		["inversed", "border-info text-info"]
	]);

	return <Alert class={variantColorMap.get(variant)} {...restProps} />;
}

/**
 * Warning Alert props
 * @param {AlertProps} props
 */
export function WarningAlert({ variant = "solid", ...restProps }) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantColorMap = new Map([
		["solid", "border-transparent bg-warning text-warning-foreground"],
		["outlined", "border-transparent text-warning-dark bg-warning-light"],
		["inversed", "border-warning text-warning-dark dark:text-warning"]
	]);

	return <Alert class={variantColorMap.get(variant)} {...restProps} />;
}

Default Alert

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

Alert Message Headline with Icon

This is the subtext for your alert message, providing important information or instructions.
This is the subtext for your alert message without title, providing important information or instructions.

Alert Message Headline with Custom Icon

This is the subtext for your alert message, providing important information or instructions.

Copied !

import { Alert } from "$components/alert.component";
import { Icon } from "$components/icon.component";

export function DefaultAlertExample() {
	return (
		<div class="flex flex-col gap-y-4 justify-center">
			<Alert title="Alert Message Headline">
				This is the subtext for your alert message, providing important
				information or instructions.
			</Alert>

			<Alert
				title="Alert Message Headline with Icon"
				iconName="ri.notification-4-line"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</Alert>
			<Alert>
				This is the subtext for your alert message without title, providing
				important information or instructions.
			</Alert>
			<Alert
				title="Alert Message Headline with Custom Icon"
				icon={
					<section class={"flex items-center gap-x-1"}>
						<Icon name="ri.star-smile-fill" />
						<Icon name="ri.star-smile-fill" />
						<Icon name="ri.star-smile-fill" />
					</section>
				}
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</Alert>
		</div>
	);
}

Primary Alert

Primary Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Primary Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Primary Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

NEWPrimary Alert with Icon

This is the subtext for your alert message, providing important information or instructions.

Copied !

import { PrimaryAlert } from "$components/alert.component";
import { capitalCase } from 'change-case';

export function PrimaryAlertExample() {
	/**
	 * @type {Array<import("$common/types").VariantColorType>}
	 */
	const variants = ["solid", "outlined", "inversed"];
	return (
		<div class="flex flex-col gap-y-4 justify-center">
			{variants.map((variant) => {
				const capitalizeVariant = capitalCase(variant);
				return (
					<PrimaryAlert
						title={`Primary Alert ${capitalizeVariant}`}
						variant={variant}
					>
						This is the subtext for your alert message, providing important
						information or instructions.
					</PrimaryAlert>
				);
			})}
			<PrimaryAlert
				title={`Primary Alert with Icon`}
				icon={<PrimaryAlertCustomIcon text="NEW" />}
				variant="outlined"
				x-init="console.log('primary alert')"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</PrimaryAlert>
		</div>
	);
}

/**
 * @param {object} props
 * @param {string} props.text
 */
function PrimaryAlertCustomIcon({ text }) {
	return (
		<span class={"p-1 bg-primary text-primary-light-2 rounded-full"} safe>
			{text}
		</span>
	);
}

Secondary Alert

Secondary Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Secondary Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Secondary Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

Secondary Alert with Icon

This is the subtext for your alert message, providing important information or instructions.

Copied !

import { SecondaryAlert } from "$components/alert.component";
import { capitalCase } from 'change-case';

export function SecondaryAlertExample() {
	/**
	 * @type {Array<import("$common/types").VariantColorType>}
	 */
	const variants = ["solid", "outlined", "inversed"];
	return (
		<div class="flex flex-col gap-y-4 justify-center">
			{variants.map((variant) => {
				const capitalizeVariant = capitalCase(variant);
				return (
					<SecondaryAlert
						title={`Secondary Alert ${capitalizeVariant}`}
						variant={variant}
					>
						This is the subtext for your alert message, providing important
						information or instructions.
					</SecondaryAlert>
				);
			})}
			<SecondaryAlert
				title={`Secondary Alert with Icon`}
				iconName="ri.question-answer-fill"
				variant="inversed"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</SecondaryAlert>
		</div>
	);
}

Success Alert

Success Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Success Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Success Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

Success Alert with Icon

This is the subtext for your alert message, providing important information or instructions.

Copied !

import { SuccessAlert } from "$components/alert.component";
import { capitalCase } from 'change-case';

export function SuccessAlertExample() {
	/**
	 * @type {Array<import("$common/types").VariantColorType>}
	 */
	const variants = ["solid", "outlined", "inversed"];
	return (
		<div class="flex flex-col gap-y-4 justify-center">
			{variants.map((variant) => {
				const capitalizeVariant = capitalCase(variant);
				return (
					<SuccessAlert
						title={`Success Alert ${capitalizeVariant}`}
						variant={variant}
					>
						This is the subtext for your alert message, providing important
						information or instructions.
					</SuccessAlert>
				);
			})}
			<SuccessAlert
				title={`Success Alert with Icon`}
				iconName="ri.checkbox-circle-fill"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</SuccessAlert>
		</div>
	);
}

Danger Alert

Danger Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Danger Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Danger Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

Danger Alert with Icon

This is the subtext for your alert message, providing important information or instructions.

Copied !

import { DangerAlert } from "$components/alert.component";
import { capitalCase } from 'change-case';

export function DangerAlertExample() {
	/**
	 * @type {Array<import("$common/types").VariantColorType>}
	 */
	const variants = ["solid", "outlined", "inversed"];
	return (
		<div class="flex flex-col gap-y-4 justify-center">
			{variants.map((variant) => {
				const capitalizeVariant = capitalCase(variant);
				return (
					<DangerAlert
						title={`Danger Alert ${capitalizeVariant}`}
						variant={variant}
					>
						This is the subtext for your alert message, providing important
						information or instructions.
					</DangerAlert>
				);
			})}
			<DangerAlert
				title={`Danger Alert with Icon`}
				iconName="ri.close-circle-fill"
				variant="outlined"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</DangerAlert>
		</div>
	);
}

Info Alert

Info Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Info Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Info Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

Info Alert with Icon

This is the subtext for your alert message, providing important information or instructions.

Copied !

import { InfoAlert } from "$components/alert.component";
import { capitalCase } from 'change-case';

export function InfoAlertExample() {
	/**
	 * @type {Array<import("$common/types").VariantColorType>}
	 */
	const variants = ["solid", "outlined", "inversed"];
	return (
		<div class="flex flex-col gap-y-4 justify-center">
			{variants.map((variant) => {
				const capitalizeVariant = capitalCase(variant);
				return (
					<InfoAlert
						title={`Info Alert ${capitalizeVariant}`}
						variant={variant}
					>
						This is the subtext for your alert message, providing important
						information or instructions.
					</InfoAlert>
				);
			})}
			<InfoAlert
				title={`Info Alert with Icon`}
				iconName="ri.information-2-line"
				variant="inversed"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</InfoAlert>
		</div>
	);
}

Warning Alert

Warning Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Warning Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Warning Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

Warning Alert with Icon

This is the subtext for your alert message, providing important information or instructions.

Copied !

import { WarningAlert } from "$components/alert.component";
import { capitalCase } from 'change-case';

export function WarningAlertExample() {
	/**
	 * @type {Array<import("$common/types").VariantColorType>}
	 */
	const variants = ["solid", "outlined", "inversed"];
	return (
		<div class="flex flex-col gap-y-4 justify-center">
			{variants.map((variant) => {
				const capitalizeVariant = capitalCase(variant);
				return (
					<WarningAlert
						title={`Warning Alert ${capitalizeVariant}`}
						variant={variant}
					>
						This is the subtext for your alert message, providing important
						information or instructions.
					</WarningAlert>
				);
			})}
			<WarningAlert
				title={`Warning Alert with Icon`}
				iconName="ri.error-warning-line"
				variant="outlined"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</WarningAlert>
		</div>
	);
}
ComponentsAccordions
ComponentsAvatar