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

Premium.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/Modal/Premium.tsx

53 lines 2.0 KB

Raw Download Zip

1	import { memo, useMemo } from "react";
2	import Icon from "../../utils/Icon";
3	import { renderPossiblyHtml } from '../../utils/html';
4
5	const Premium = memo(({ bullets }: { bullets?: string[] \| string[][] }) => {
6	if (!bullets \|\| bullets.length === 0) return null;
7
8	/**
9	* Normalize bullets
10	*/
11	const rows = useMemo(() => {
12	const isRowArray = Array.isArray(bullets[0]);
13	return isRowArray ? bullets : bullets.map((b) => [b]);
14	}, [bullets]);
15
16	return (
17	<div className="table mx-auto">
18	{rows.map((row, rowIndex) => (
19	<div key={`row-${rowIndex}`} className="table-row">
20	{row.map((bullet, colIndex) => {
21	const baseText =
22	typeof bullet === "string" ? bullet : bullet?.text;
23
24	const baseIcon =
25	typeof bullet === "string"
26	? "check"
27	: bullet?.icon ?? "check";
28
29	return (
30	<div
31	key={`bullet-${rowIndex}-${colIndex}`}
32	className="table-cell pr-3"
33	>
34	<div className="flex items-start gap-2">
35	<Icon
36	name={baseIcon}
37	color="var(--teamupdraft-orange-dark)"
38	size={25}
39	/>
40	<div className="text-[var(--teamupdraft-grey-700)] text-md font-normal leading-relaxed">
41	{renderPossiblyHtml(baseText)}
42	</div>
43	</div>
44	</div>
45	);
46	})}
47	</div>
48	))}
49	</div>
50	);
51	});
52
53	export default Premium;