build-info.js

import {html, css} from 'lit';
import * as commonStyles from '@dbp-toolkit/common/styles';
import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";

export class BuildInfo extends AdapterLitElement {

    constructor() {
        super();
        this.env = '';
        this.gitInfo = '';
        this.buildUrl = '';
        this.buildTime = '';
    }

    static get properties() {
        return {
            ...super.properties,
            env: { type: String },
            buildUrl: { type: String, attribute: "build-url" },
            buildTime: { type: String, attribute: "build-time" },
            gitInfo: { type: String, attribute: "git-info" }
        };
    }

    static get styles() {
        return css`
            ${commonStyles.getThemeCSS()}
            ${commonStyles.getGeneralCSS()}
            ${commonStyles.getTagCSS()}

            :host {
                display: inline-block;
            }
        `;
    } 

    render() {
        const date = new Date(this.buildTime);

        return html`
            <a href="${this.buildUrl}" style="float: right">
                <div class="tags has-addons" title="Build Time: ${date.toString()}">
                    <span class="tag is-light">build</span>
                    <span class="tag is-dark">${this.gitInfo} (${this.env})</span>
                </div>
            </a>
        `;
    }
}