# thinkrank/1.0.0/src/admin/components/common/SettingsCard.js

ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO, version 1.0.0. 129 lines.

- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/common/SettingsCard.js
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/common/SettingsCard.js
- Modified: 2025-08-10T07:57:44+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/thinkrank/1.0.0/code/src/admin/components/common/SettingsCard.js#L10-L20`.

```javascript
/**
 * SettingsCard Component
 * 
 * Standardized settings card component extracted from Site Identity patterns.
 * Provides consistent card structure with integrated optimization controls,
 * toggle functionality, and notice display across all Essential SEO tabs.
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

import { Card, CardHeader, CardBody, Flex, FlexItem, ToggleControl, Notice } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * SettingsCard Component
 * 
 * @param {Object} props Component props
 * @param {string} props.title Card title displayed in header
 * @param {boolean} props.enabled Enable/disable state for the feature
 * @param {Function} props.onToggle Toggle handler function
 * @param {string} props.toggleLabel Custom toggle label (overrides default)
 * @param {Array} props.optimizationButtons Array of optimization button components
 * @param {Object} props.notice Notice object with status and message
 * @param {Function} props.onNoticeRemove Notice removal handler
 * @param {React.ReactNode} props.children Card content
 * @param {string} props.className Additional CSS classes
 * @param {string} props.size Card size: 'small', 'medium', 'large'
 * @param {boolean} props.showDisabledWarning Show warning when disabled
 * @param {string} props.disabledWarningMessage Custom disabled warning message
 */
const SettingsCard = ({ 
    title,
    enabled = true,
    onToggle,
    toggleLabel,
    optimizationButtons = [],
    notice,
    onNoticeRemove,
    children,
    className = '',
    size = 'medium',
    showDisabledWarning = true,
    disabledWarningMessage,
    ...rest
}) => {
    /**
     * Handle notice dismissal
     * Following Site Identity notice management pattern
     */
    const handleNoticeRemove = () => {
        if (onNoticeRemove) {
            onNoticeRemove();
        }
    };

    /**
     * Get default disabled warning message
     */
    const getDisabledWarningMessage = () => {
        if (disabledWarningMessage) {
            return disabledWarningMessage;
        }
        return __('This feature is disabled. Enable it to access configuration options.', 'thinkrank');
    };

    // Combine CSS classes
    const cardClasses = [
        'thinkrank-settings-card',
        `thinkrank-settings-card--${size}`,
        className
    ].filter(Boolean).join(' ');

    return (
        <Card className={cardClasses} size={size} {...rest}>
            <CardHeader>
                <Flex justify="space-between" align="center">
                    <FlexItem>
                        <h2>{title}</h2>
                    </FlexItem>
                    <FlexItem>
                        <Flex gap={2}>
                            {/* Render optimization buttons */}
                            {optimizationButtons.map((button, index) => (
                                <div key={index}>{button}</div>
                            ))}
                            
                            {/* Render toggle control if onToggle is provided */}
                            {onToggle && (
                                <ToggleControl
                                    label={toggleLabel || __('Enable', 'thinkrank')}
                                    checked={enabled}
                                    onChange={onToggle}
                                    __nextHasNoMarginBottom={true}
                                />
                            )}
                        </Flex>
                    </FlexItem>
                </Flex>
            </CardHeader>
            <CardBody>
                {/* Show disabled warning if feature is disabled */}
                {!enabled && showDisabledWarning && (
                    <Notice status="warning" isDismissible={false}>
                        {getDisabledWarningMessage()}
                    </Notice>
                )}
                
                {/* Show notice if provided */}
                {notice && (
                    <Notice 
                        status={notice.status} 
                        isDismissible={true}
                        onRemove={handleNoticeRemove}
                        className="thinkrank-mb-md"
                    >
                        {notice.message}
                    </Notice>
                )}
                
                {/* Card content */}
                {children}
            </CardBody>
        </Card>
    );
};

export default SettingsCard;

```