Alerts

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"
				icon="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="star-smile-fill" />
						<Icon name="star-smile-fill" />
						<Icon name="star-smile-fill" />
					</section>
				}
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</Alert>
		</div>
	);
}

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-500 text-primary-100 rounded-full"} safe>
			{text}
		</span>
	);
}

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`}
				icon="question-answer-fill"
				variant="inversed"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</SecondaryAlert>
		</div>
	);
}

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`}
				icon="checkbox-circle-fill"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</SuccessAlert>
		</div>
	);
}

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`}
				icon="close-circle-fill"
				variant="outlined"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</DangerAlert>
		</div>
	);
}

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`}
				icon="information-2-line"
				variant="inversed"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</InfoAlert>
		</div>
	);
}

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`}
				icon="error-warning-line"
				variant="outlined"
			>
				This is the subtext for your alert message, providing important
				information or instructions.
			</WarningAlert>
		</div>
	);
}