75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
|
import {
|
||
|
|
DeesElement,
|
||
|
|
customElement,
|
||
|
|
html,
|
||
|
|
property,
|
||
|
|
css,
|
||
|
|
cssManager,
|
||
|
|
type TemplateResult,
|
||
|
|
} from '@design.estate/dees-element';
|
||
|
|
import type { TSgProtocol } from '../interfaces.js';
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'sg-protocol-badge': SgProtocolBadge;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const protocolColors: Record<string, string> = {
|
||
|
|
npm: '#cb3837',
|
||
|
|
oci: '#2496ed',
|
||
|
|
maven: '#c71a36',
|
||
|
|
cargo: '#dea584',
|
||
|
|
composer: '#885630',
|
||
|
|
pypi: '#3775a9',
|
||
|
|
rubygems: '#e9573f',
|
||
|
|
};
|
||
|
|
|
||
|
|
@customElement('sg-protocol-badge')
|
||
|
|
export class SgProtocolBadge extends DeesElement {
|
||
|
|
public static demo = () => html`
|
||
|
|
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||
|
|
<sg-protocol-badge .protocol=${'npm'}></sg-protocol-badge>
|
||
|
|
<sg-protocol-badge .protocol=${'oci'}></sg-protocol-badge>
|
||
|
|
<sg-protocol-badge .protocol=${'maven'}></sg-protocol-badge>
|
||
|
|
<sg-protocol-badge .protocol=${'cargo'}></sg-protocol-badge>
|
||
|
|
<sg-protocol-badge .protocol=${'pypi'}></sg-protocol-badge>
|
||
|
|
<sg-protocol-badge .protocol=${'composer'}></sg-protocol-badge>
|
||
|
|
<sg-protocol-badge .protocol=${'rubygems'}></sg-protocol-badge>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
public static demoGroups = ['Shared'];
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor protocol: TSgProtocol = 'npm';
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
cssManager.defaultStyles,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.badge {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 2px 8px;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
const color = protocolColors[this.protocol] || '#666';
|
||
|
|
return html`
|
||
|
|
<span class="badge" style="background: ${color}">
|
||
|
|
${this.protocol}
|
||
|
|
</span>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|