# thinkrank/1.0.0/src/admin/components/content-brief/KeywordInput.js

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

- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/content-brief/KeywordInput.js
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/content-brief/KeywordInput.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/content-brief/KeywordInput.js#L10-L20`.

```javascript
/**
 * Keyword Input Component
 *
 * Reusable component for managing multiple keyword/URL inputs
 *
 * @package ThinkRank
 * @since 1.0.0
 */

import { useState } from '@wordpress/element';
import { TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { plus, close } from '@wordpress/icons';

const KeywordInput = ({ 
    keywords = [''], 
    onChange, 
    label = __('Keywords', 'thinkrank'),
    help = '',
    placeholder = __('Enter keyword...', 'thinkrank'),
    maxItems = 10
}) => {
    /**
     * Handle keyword change
     */
    const handleKeywordChange = (index, value) => {
        const newKeywords = [...keywords];
        newKeywords[index] = value;
        onChange(newKeywords);
    };

    /**
     * Add new keyword input
     */
    const addKeyword = () => {
        if (keywords.length < maxItems) {
            onChange([...keywords, '']);
        }
    };

    /**
     * Remove keyword input
     */
    const removeKeyword = (index) => {
        if (keywords.length > 1) {
            const newKeywords = keywords.filter((_, i) => i !== index);
            onChange(newKeywords);
        }
    };

    return (
        <div className="thinkrank-mb-4">
            <label className="thinkrank-block thinkrank-text-sm thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-2">
                {label}
            </label>

            {help && (
                <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-mb-3">
                    {help}
                </p>
            )}

            <div className="thinkrank-space-y-3">
                {keywords.map((keyword, index) => (
                    <div key={index} className="thinkrank-flex thinkrank-gap-2">
                        <div className="thinkrank-flex-1">
                            <TextControl
                                value={keyword}
                                onChange={(value) => handleKeywordChange(index, value)}
                                placeholder={placeholder}
                                __next40pxDefaultSize={true}
                                __nextHasNoMarginBottom={true}
                            />
                        </div>

                        {keywords.length > 1 && (
                            <button
                                className="thinkrank-btn thinkrank-btn--danger thinkrank-btn--sm thinkrank-w-10 thinkrank-h-10 thinkrank-flex-center"
                                onClick={() => removeKeyword(index)}
                                title={__('Remove', 'thinkrank')}
                            >
                                <svg className="thinkrank-w-4 thinkrank-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        )}
                    </div>
                ))}
            </div>

            {keywords.length < maxItems && (
                <button
                    className="thinkrank-btn thinkrank-btn--secondary thinkrank-btn--sm thinkrank-flex thinkrank-items-center thinkrank-gap-2 thinkrank-mt-2"
                    onClick={addKeyword}
                >
                    <svg className="thinkrank-w-4 thinkrank-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    {label.includes('URL') ? __('Add URL', 'thinkrank') : __('Add Keyword', 'thinkrank')}
                </button>
            )}
        </div>
    );
};

export default KeywordInput;

```