diff --git a/source/options/app.tsx b/source/options/app.tsx index 53eb4c8..dd3ddb2 100644 --- a/source/options/app.tsx +++ b/source/options/app.tsx @@ -1,4 +1,5 @@ import {Component} from "preact"; +import {PageFooter} from "./components/page-footer.js"; import {PageHeader} from "./components/page-header.js"; import {Tours} from "./components/tours.js"; @@ -8,6 +9,7 @@ export class App extends Component { <> + ); } diff --git a/source/options/components/page-footer.tsx b/source/options/components/page-footer.tsx new file mode 100644 index 0000000..0a4a215 --- /dev/null +++ b/source/options/components/page-footer.tsx @@ -0,0 +1,41 @@ +import {Component} from "preact"; +import browser from "webextension-polyfill"; + +export class PageFooter extends Component { + render() { + const manifest = browser.runtime.getManifest(); + + const copyright = ( +

+ ©{" "} + + AGPL-3.0-or-later + +

+ ); + + const messageCommunity = ( + + Message @Community + + ); + + const version = ( + + v{manifest.version} + + ); + + return ( + + ); + } +} diff --git a/source/scss/components/page-footer.scss b/source/scss/components/page-footer.scss new file mode 100644 index 0000000..1972630 --- /dev/null +++ b/source/scss/components/page-footer.scss @@ -0,0 +1,7 @@ +.page-footer { + border-top: 2px solid var(--background-secondary); + display: flex; + gap: 8px; + margin: 16px; + padding: 16px; +} diff --git a/source/scss/global.scss b/source/scss/global.scss index a36c7bf..a148219 100644 --- a/source/scss/global.scss +++ b/source/scss/global.scss @@ -1,4 +1,5 @@ @use "reset"; +@use "components/page-footer"; @use "components/page-header"; @use "components/tours";