# code-snippets/3.10.2/js/components/common/cloud/CloudStatusBadge.tsx

Code Snippets, version 3.10.2. 51 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.2/code/js/components/common/cloud/CloudStatusBadge.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.2/raw/js/components/common/cloud/CloudStatusBadge.tsx
- Modified: 2026-08-04T13:35:40+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/code-snippets/3.10.2/code/js/components/common/cloud/CloudStatusBadge.tsx#L10-L20`.

```tsx
import React from 'react'
import { __ } from '@wordpress/i18n'
import { CloudStatus } from '../../../types/schema/CloudSnippetSchema'

export const getCloudStatusLabel = (status: CloudStatus) => {
	switch (status) {
		case CloudStatus.Public:
			return __('Public', 'code-snippets')

		case CloudStatus.Private:
			return __('Private', 'code-snippets')

		case CloudStatus.Unverified:
			return __('Unverified', 'code-snippets')

		case CloudStatus.AI_Verified:
			return __('AI Verified', 'code-snippets')

		case CloudStatus.Pro_Verified:
			return __('Pro Verified', 'code-snippets')

		default:
			return __('Unknown', 'code-snippets')
	}
}

const STATUS_BADGES: Record<CloudStatus, string | undefined> = {
	[CloudStatus.Public]: 'public',
	[CloudStatus.Private]: 'private',
	[CloudStatus.Unverified]: 'failure',
	[CloudStatus.AI_Verified]: 'info',
	[CloudStatus.Pro_Verified]: 'success'
}

const getStatusClassName = (status: CloudStatus): string | undefined =>
	(CloudStatus[status] as typeof CloudStatus[number] | undefined)?.toLowerCase().replace('_', '-')

export interface CloudStatusBadgeProps {
	status: CloudStatus
}

export const CloudStatusIndicator: React.FC<CloudStatusBadgeProps> = ({ status }) =>
	<span className={`cloud-snippet-status cloud-snippet-status-${getStatusClassName(status) ?? 'unknown'}`}>
		{getCloudStatusLabel(status)}
	</span>

export const CloudStatusBadge: React.FC<CloudStatusBadgeProps> = ({ status }) =>
	<span className={`badge ${STATUS_BADGES[status] ?? 'neutral'}-badge`}>
		{getCloudStatusLabel(status)}
	</span>

```