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

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

63 lines 2.3 KB

Raw Download Zip

1	import type {SettingField, Step} from "../../types";
2	import {memo} from "@wordpress/element";
3	import Premium from "./Premium";
4	import Fields from "../Fields/Fields";
5	// @ts-ignore
6	import Icon from '@/utils/Icon';
7	import Accordion from "../Fields/Accordion";
8
9	export const ModalContent = memo(({ step, settings, onFieldChange }: {
10	step: Step,
11	settings: SettingField[],
12	onFieldChange: (fieldId: string, value: string \| boolean) => void
13	}) => {
14
15	return (
16	<div className="w-full max-w-[70ch] mx-auto flex flex-col my-3 space-y-2 gap-2">
17	{step.intro_bullets?.length > 0 && (
18	<div className="space-y-2 flex flex-col ">
19	{step.intro_bullets.map((bullet, index) => (
20	<div key={`${step.id}-bullet-${index}`} className="flex items-center gap-2 ml-2">
21	<span className="flex-shrink-0">
22	<Icon
23	name={bullet.icon}
24	size={24}
25	type=""
26	strokeWidth={1}
27	stroke="none"
28	color="var(--teamupdraft-orange-dark)"
29	className="bg-[#fff5eb] rounded-[80px] p-2 shadow-[0_0_10px_#fff5eb] border border-[#fff5eb]"
30	/>
31	</span>
32	<div>
33	<p className="font-medium text-md">{bullet.title}</p>
34	<p className="text-[var(--teamupdraft-grey-600)] text-md">{bullet.desc}</p>
35	</div>
36	</div>
37	))}
38	</div>
39	)}
40	{step.bullets?.length > 0 &&
41	<Premium bullets={step.bullets} stepId={step.id} />
42	}
43	{ /Grouped field/ }
44	{ step?.groups?.length > 0 && (
45	<Accordion
46	key={step.id}
47	groups={step.groups}
48	fields={step.fields}
49	onChange={onFieldChange}
50	/>
51	)}
52
53	{/* Non-grouped field, which are all fields without a group_id. */ }
54	{ step?.fields?.some(f => !f.group_id) && (
55	<Fields
56	fields={step.fields.filter(f => !f.group_id)}
57	onChange={onFieldChange}
58	/>
59	)}
60	</div>
61	);
62	});
63