give / src / Views / Components / AdminDetailsPage / AdminSection.tsx

AdminSection.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.16.9, at src/Views/Components/AdminDetailsPage/AdminSection.tsx

80 lines 2.0 KB

Raw Download Zip

1	/**
2	* External Dependencies
3	*/
4	import { ReactNode } from 'react';
5
6	/**
7	* Internal Dependencies
8	*/
9	import sharedStyles from '@givewp/components/AdminDetailsPage/AdminDetailsPage.module.scss';
10	import ErrorBoundary from './ErrorBoundary';
11
12	/**
13	* @since 4.4.0
14	*/
15	interface AdminSectionProps {
16	title: string;
17	description: string;
18	children: ReactNode;
19	}
20
21	/**
22	* @since 4.4.0
23	*/
24	interface AdminSectionFieldProps {
25	subtitle?: string;
26	description?: string;
27	children: ReactNode;
28	error?: string;
29	}
30
31	/**
32	* @since 4.13.1 Add description prop
33	* @since 4.4.0
34	*/
35	export function AdminSectionField({ subtitle, description, children, error }: AdminSectionFieldProps) {
36	return (
37	<ErrorBoundary>
38	<div className={sharedStyles.sectionField}>
39	{subtitle && <h3 className={sharedStyles.sectionSubtitle}>{subtitle}</h3>}
40	{description && <p className={sharedStyles.sectionDescription}>{description}</p>}
41	{children}
42	{error && <div className={sharedStyles.errorMsg}>{error}</div>}
43	</div>
44	</ErrorBoundary>
45	);
46	}
47
48	/**
49	* @since 4.4.0
50	*/
51	export function AdminSectionsWrapper({ children }: { children: ReactNode }) {
52	return (
53	<div className={sharedStyles.sections}>
54	{children}
55	</div>
56	);
57	}
58
59	/**
60	* @since 4.4.0
61	*/
62	export default function AdminSection({ title, description, children }: AdminSectionProps) {
63	return (
64	<ErrorBoundary>
65	<div className={sharedStyles.section}>
66	<div className={sharedStyles.leftColumn}>
67	<h2 className={sharedStyles.sectionTitle}>{title}</h2>
68	<div className={sharedStyles.sectionDescription}>
69	{description}
70	</div>
71	</div>
72
73	<div className={sharedStyles.rightColumn}>
74	{children}
75	</div>
76	</div>
77	</ErrorBoundary>
78	);
79	}
80