| 1 |
import React from 'react' |
| 2 |
import classnames from 'classnames' |
| 3 |
import type { ReactNode } from 'react' |
| 4 |
import type { SnippetType } from '../../types/Snippet' |
| 5 |
|
| 6 |
export type BadgeName = SnippetType | 'core' | 'pro' | 'ai' | 'cloud' | 'bundles' | 'cloud_search' | 'beta' |
| 7 |
|
| 8 |
const badgeIcons: Partial<Record<BadgeName, string>> = { |
| 9 |
cond: 'randomize', |
| 10 |
cloud: 'cloud', |
| 11 |
bundles: 'screenoptions', |
| 12 |
cloud_search: 'search' |
| 13 |
} |
| 14 |
|
| 15 |
export interface BadgeProps { |
| 16 |
name: BadgeName |
| 17 |
small?: boolean |
| 18 |
inverted?: boolean |
| 19 |
children?: ReactNode |
| 20 |
} |
| 21 |
|
| 22 |
export const Badge: React.FC<BadgeProps> = ({ name, small, inverted, children }) => |
| 23 |
<span className={classnames('badge', `${name}-badge`, { 'small-badge': small, 'inverted-badge': inverted })}> |
| 24 |
{badgeIcons[name] |
| 25 |
? <span className={`dashicons dashicons-${badgeIcons[name]}`} aria-hidden="true" /> |
| 26 |
: children ?? name |
| 27 |
} |
| 28 |
</span> |
| 29 |
|
