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

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 80 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Views/Components/AdminDetailsPage/AdminSection.tsx
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Views/Components/AdminDetailsPage/AdminSection.tsx
- Modified: 2025-11-18T14:37:22+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/Views/Components/AdminDetailsPage/AdminSection.tsx#L10-L20`.

```tsx
/**
 * External Dependencies
 */
import { ReactNode } from 'react';

/**
 * Internal Dependencies
 */
import sharedStyles from '@givewp/components/AdminDetailsPage/AdminDetailsPage.module.scss';
import ErrorBoundary from './ErrorBoundary';

/**
 * @since 4.4.0
 */
interface AdminSectionProps {
    title: string;
    description: string;
    children: ReactNode;
}

/**
 * @since 4.4.0
 */
interface AdminSectionFieldProps {
    subtitle?: string;
    description?: string;
    children: ReactNode;
    error?: string;
}

/**
 * @since 4.13.1 Add description prop
 * @since 4.4.0
 */
export function AdminSectionField({ subtitle, description, children, error }: AdminSectionFieldProps) {
    return (
        <ErrorBoundary>
            <div className={sharedStyles.sectionField}>
                {subtitle && <h3 className={sharedStyles.sectionSubtitle}>{subtitle}</h3>}
                {description && <p className={sharedStyles.sectionDescription}>{description}</p>}
                {children}
                {error && <div className={sharedStyles.errorMsg}>{error}</div>}
            </div>
        </ErrorBoundary>
    );
}

/**
 * @since 4.4.0
 */
export function AdminSectionsWrapper({ children }: { children: ReactNode }) {
    return (
        <div className={sharedStyles.sections}>
            {children}
        </div>
    );
}

/**
 * @since 4.4.0
 */
export default function AdminSection({ title, description, children }: AdminSectionProps) {
    return (
        <ErrorBoundary>
            <div className={sharedStyles.section}>
                <div className={sharedStyles.leftColumn}>
                    <h2 className={sharedStyles.sectionTitle}>{title}</h2>
                    <div className={sharedStyles.sectionDescription}>
                        {description}
                    </div>
                </div>

                <div className={sharedStyles.rightColumn}>
                    {children}
                </div>
            </div>
        </ErrorBoundary>
    );
}

```