wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Alert.tsx

Alert.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance trunk, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Alert.tsx

131 lines 4.9 KB

Raw Download Zip

1	"use client";
2
3	import { memo } from 'react';
4	import Icon from '../utils/Icon';
5	import { __ } from '@wordpress/i18n';
6	import { clsx } from 'clsx';
7	import type { IconName } from '../utils/Icon';
8	import { renderPossiblyHtml } from '../utils/html';
9
10	export interface AlertProps {
11	variant?: 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'loading';
12	title?: string;
13	message: string;
14	icon?: IconName;
15	className?: string;
16	}
17
18	const Alert = ({
19	variant = 'info',
20	title,
21	message,
22	icon,
23	className,
24	}: AlertProps) => {
25	let resolvedIconName: IconName = 'info';
26	let resolvedTitle: string = '';
27	let displayBorderClass = '';
28	let displayBgClass = '';
29	let displayTextColor = 'text-[#4F565B]'; // Default text color for message
30	let displayIconColor = 'var(--teamupdraft-grey-700)';
31	let displayIconFill = 'var(--teamupdraft-grey-700)';
32
33	switch (variant) {
34	case 'primary':
35	resolvedIconName = 'info';
36	resolvedTitle = __("Information", "ONBOARDING_WIZARD_TEXT_DOMAIN");
37	displayIconColor = 'var(--teamupdraft-blue)';
38	displayIconFill = 'var(--teamupdraft-blue)';
39	displayBorderClass = 'border-blue';
40	displayBgClass = 'bg-blue-lightest';
41	displayTextColor = 'text-blue-dark';
42	break;
43	case 'success':
44	resolvedIconName = 'success';
45	resolvedTitle = __("Success", "ONBOARDING_WIZARD_TEXT_DOMAIN");
46	displayIconColor = 'var(--teamupdraft-green)';
47	displayIconFill = 'var(--teamupdraft-green)';
48	displayBorderClass = 'border-green';
49	displayBgClass = 'bg-green-light';
50	displayTextColor = 'text-green';
51	break;
52	case 'danger':
53	resolvedIconName = 'error';
54	resolvedTitle = __("Error", "ONBOARDING_WIZARD_TEXT_DOMAIN");
55	displayIconColor = '#B40000';
56	displayIconFill = '#B40000';
57	displayBorderClass = 'border-[#FECACA]';
58	displayBgClass = 'bg-[#FEF2F2]';
59	displayTextColor = 'text-[#B40000]';
60	break;
61	case 'warning':
62	resolvedIconName = 'warning';
63	resolvedTitle = __("Warning", "ONBOARDING_WIZARD_TEXT_DOMAIN");
64	displayIconColor = 'var(--teamupdraft-orange-dark)';
65	displayIconFill = 'var(--teamupdraft-orange-dark)';
66	displayBorderClass = 'border-orange';
67	displayBgClass = 'bg-orange-light';
68	displayTextColor = 'text-orange-darkish';
69	break;
70	case 'info':
71	resolvedIconName = 'info';
72	resolvedTitle = __("Information", "ONBOARDING_WIZARD_TEXT_DOMAIN");
73	displayIconColor = 'var(--teamupdraft-blue)';
74	displayIconFill = 'var(--teamupdraft-blue)';
75	displayBorderClass = 'border-blue';
76	displayBgClass = 'bg-blue-lightest';
77	displayTextColor = 'text-blue-dark';
78	break;
79	case 'loading':
80	resolvedIconName = 'loading-circle';
81	resolvedTitle = __("Loading...", "ONBOARDING_WIZARD_TEXT_DOMAIN");
82	displayIconColor = 'var(--teamupdraft-orange-dark)';
83	displayIconFill = 'var(--teamupdraft-orange-dark)';
84	displayBorderClass = 'border-gray-300';
85	displayBgClass = 'bg-gray-100';
86	displayTextColor = 'text-[#4F565B]';
87	break;
88	default: // 'secondary' or any other unknown variant
89	resolvedIconName = 'info';
90	resolvedTitle = __("Information", "ONBOARDING_WIZARD_TEXT_DOMAIN");
91	displayIconColor = 'var(--teamupdraft-grey-700)';
92	displayIconFill = 'var(--teamupdraft-grey-700)';
93	displayBorderClass = 'border-gray-300';
94	displayBgClass = 'bg-gray-100';
95	displayTextColor = 'text-[#4F565B]';
96	break;
97	}
98
99	// Override with props if explicitly provided
100	const finalIconName = icon !== undefined ? icon : resolvedIconName;
101	const finalTitle = title !== undefined ? title : resolvedTitle;
102
103	return (
104	<div className={clsx(
105	"flex items-start gap-2 rounded-md border px-4 py-3 text-sm mt-2",
106	displayBorderClass,
107	displayBgClass,
108	className
109	)}>
110	<Icon
111	name={finalIconName}
112	color={displayIconColor}
113	fill={displayIconFill}
114	size={16}
115	className="mr-2 mt-[3px]"
116	/>
117	<div className="break-words overflow-y-auto max-h-[200px]">
118	{finalTitle && (
119	<p className="font-semibold text-[#1C252C]">
120	{finalTitle}
121	</p>
122	)}
123	<div className={displayTextColor}>
124	{renderPossiblyHtml(message)}
125	</div>
126	</div>
127	</div>
128	);
129	};
130
131	export default memo(Alert);