ErrorBoundary
1 year ago
Icons
10 months ago
Notifications
11 months ago
Tabs
9 months ago
store
1 year ago
AdminDetailsPage.module.scss
8 months ago
AdminSection.tsx
1 year ago
ConfirmationDialog.tsx
10 months ago
DefaultPrimaryActionButton.tsx
1 year ago
index.tsx
9 months ago
types.ts
9 months ago
utils.ts
10 months ago
AdminSection.tsx
77 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 | children: ReactNode; |
| 27 | error?: string; |
| 28 | } |
| 29 | |
| 30 | /** |
| 31 | * @since 4.4.0 |
| 32 | */ |
| 33 | export function AdminSectionField({ subtitle, children, error }: AdminSectionFieldProps) { |
| 34 | return ( |
| 35 | <ErrorBoundary> |
| 36 | <div className={sharedStyles.sectionField}> |
| 37 | {subtitle && <h3 className={sharedStyles.sectionSubtitle}>{subtitle}</h3>} |
| 38 | {children} |
| 39 | {error && <div className={sharedStyles.errorMsg}>{error}</div>} |
| 40 | </div> |
| 41 | </ErrorBoundary> |
| 42 | ); |
| 43 | } |
| 44 | |
| 45 | /** |
| 46 | * @since 4.4.0 |
| 47 | */ |
| 48 | export function AdminSectionsWrapper({ children }: { children: ReactNode }) { |
| 49 | return ( |
| 50 | <div className={sharedStyles.sections}> |
| 51 | {children} |
| 52 | </div> |
| 53 | ); |
| 54 | } |
| 55 | |
| 56 | /** |
| 57 | * @since 4.4.0 |
| 58 | */ |
| 59 | export default function AdminSection({ title, description, children }: AdminSectionProps) { |
| 60 | return ( |
| 61 | <ErrorBoundary> |
| 62 | <div className={sharedStyles.section}> |
| 63 | <div className={sharedStyles.leftColumn}> |
| 64 | <h2 className={sharedStyles.sectionTitle}>{title}</h2> |
| 65 | <div className={sharedStyles.sectionDescription}> |
| 66 | {description} |
| 67 | </div> |
| 68 | </div> |
| 69 | |
| 70 | <div className={sharedStyles.rightColumn}> |
| 71 | {children} |
| 72 | </div> |
| 73 | </div> |
| 74 | </ErrorBoundary> |
| 75 | ); |
| 76 | } |
| 77 |