# elasticpress/5.0.2/assets/js/features/components/tab.js

ElasticPress, version 5.0.2. 42 lines.

- Page: https://pluginprobe.com/plugins/elasticpress/5.0.2/code/assets/js/features/components/tab.js
- Raw: https://pluginprobe.com/plugins/elasticpress/5.0.2/raw/assets/js/features/components/tab.js
- Modified: 2023-11-01T18:08:28+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/elasticpress/5.0.2/code/assets/js/features/components/tab.js#L10-L20`.

```javascript
/**
 * WordPress dependencies.
 */
import { WPElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies.
 */
import { useFeatureSettings } from '../provider';

/**
 * Styles.
 */
import '../style.css';

/**
 * Feature tab component.
 *
 * @param {object} props Component props.
 * @param {WPElement} props.feature Feature slug.
 * @returns {WPElement} Feature tab component.
 */
export default ({ feature }) => {
	const { getFeature, featuresRequiringSync } = useFeatureSettings();

	const { shortTitle, isAvailable } = getFeature(feature);

	const availabilityStatus = isAvailable ? '' : __('Unavailable', 'elasticpress');

	const status = featuresRequiringSync.includes(feature)
		? __('Sync required', 'elasticpress')
		: availabilityStatus;

	return (
		<div className="ep-feature-tab">
			{shortTitle}
			{status ? <small className="ep-feature-tab__status">{status}</small> : null}
		</div>
	);
};

```