@panoramax/web-viewer/src/components/menus/SemanticsDoc.js

Panoramax web viewer for geolocated pictures

import { LitElement, html } from "lit";
import { faSvg, titles } from "../styles";
import { fa } from "../../utils/widgets";
import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";

/**
 * Semantics Doc displays a synthetic summary of what are semantics and how to use it.
 * @class Panoramax.components.menus.SemanticsDoc
 * @element pnx-semantics-doc
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @example
 * ```html
 * <pnx-semantics-doc ._t=${viewer._t} />
 * ```
 */
export default class SemanticsDoc extends LitElement {
	static styles = [ titles, faSvg ];

	render() {
		return html`
			<h4>${fa(faTags)} ${this._t?.pnx.semantics_doc_title}</h4>
			<p>${this._t?.pnx.semantics_doc_info1}</p>
			<p>${this._t?.pnx.semantics_doc_info2}</p>
			<p>${this._t?.pnx.semantics_doc_info3}</p>
			<pnx-link-button
				href="https://docs.panoramax.fr/tags/"
				target="_blank"
				kind="outline"
				style="width: 100%"
			>${this._t?.pnx.semantics_doc_link}</pnx-link-button>
		`;
	}
}

customElements.define("pnx-semantics-doc", SemanticsDoc);