| 1 |
import React from 'react' |
| 2 |
import { __ } from '@wordpress/i18n' |
| 3 |
import { CloudStatus } from '../../../types/schema/CloudSnippetSchema' |
| 4 |
|
| 5 |
export const getCloudStatusLabel = (status: CloudStatus) => { |
| 6 |
switch (status) { |
| 7 |
case CloudStatus.Public: |
| 8 |
return __('Public', 'code-snippets') |
| 9 |
|
| 10 |
case CloudStatus.Private: |
| 11 |
return __('Private', 'code-snippets') |
| 12 |
|
| 13 |
case CloudStatus.Unverified: |
| 14 |
return __('Unverified', 'code-snippets') |
| 15 |
|
| 16 |
case CloudStatus.AI_Verified: |
| 17 |
return __('AI Verified', 'code-snippets') |
| 18 |
|
| 19 |
case CloudStatus.Pro_Verified: |
| 20 |
return __('Pro Verified', 'code-snippets') |
| 21 |
|
| 22 |
default: |
| 23 |
return __('Unknown', 'code-snippets') |
| 24 |
} |
| 25 |
} |
| 26 |
|
| 27 |
const STATUS_BADGES: Record<CloudStatus, string | undefined> = { |
| 28 |
[CloudStatus.Public]: 'public', |
| 29 |
[CloudStatus.Private]: 'private', |
| 30 |
[CloudStatus.Unverified]: 'failure', |
| 31 |
[CloudStatus.AI_Verified]: 'info', |
| 32 |
[CloudStatus.Pro_Verified]: 'success' |
| 33 |
} |
| 34 |
|
| 35 |
const getStatusClassName = (status: CloudStatus): string | undefined => |
| 36 |
(CloudStatus[status] as typeof CloudStatus[number] | undefined)?.toLowerCase().replace('_', '-') |
| 37 |
|
| 38 |
export interface CloudStatusBadgeProps { |
| 39 |
status: CloudStatus |
| 40 |
} |
| 41 |
|
| 42 |
export const CloudStatusIndicator: React.FC<CloudStatusBadgeProps> = ({ status }) => |
| 43 |
<span className={`cloud-snippet-status cloud-snippet-status-${getStatusClassName(status) ?? 'unknown'}`}> |
| 44 |
{getCloudStatusLabel(status)} |
| 45 |
</span> |
| 46 |
|
| 47 |
export const CloudStatusBadge: React.FC<CloudStatusBadgeProps> = ({ status }) => |
| 48 |
<span className={`badge ${STATUS_BADGES[status] ?? 'neutral'}-badge`}> |
| 49 |
{getCloudStatusLabel(status)} |
| 50 |
</span> |
| 51 |
|
