ErrorBoundary
1 year ago
Icons
9 months ago
Notifications
11 months ago
Tabs
9 months ago
store
1 year ago
AdminDetailsPage.module.scss
7 months ago
AdminSection.tsx
7 months ago
ConfirmationDialog.tsx
9 months ago
DefaultPrimaryActionButton.tsx
1 year ago
index.tsx
5 months ago
types.ts
9 months ago
AdminSection.tsx
80 lines
| 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 |