queue/source/options/components/page-footer.ts

import {PrivacyLink} from '@holllo/preact-components';
import {html} from 'htm/preact';
import {Component} from 'preact';

import type {Settings} from '../../settings/settings.js';

type Props = {
  settings: Settings;
};

export class PageFooter extends Component<Props> {
  render() {
    const {settings} = this.props;
    const version = settings.manifest.version;

    const donateAttributes = {
      href: 'https://liberapay.com/Holllo',
    };
    const donateLink = html`
      <${PrivacyLink} attributes="${donateAttributes}">Donate<//>
    `;

    const versionAttributes = {
      href: `https://git.bauke.xyz/Holllo/queue/releases/tag/${version}`,
    };
    const versionLink = html`
      <${PrivacyLink} attributes="${versionAttributes}">v${version}<//>
    `;

    return html`
      <footer class="page-footer">
        <p>
          ${donateLink} 💖 ${versionLink} © Holllo — Free and open-source,
          forever.
        </p>
      </footer>
    `;
  }
}