vore-scenario-generator/src/common/template/PageFooter.tsx

import { Fragment } from 'preact';

export interface PageFooterProps {
	creditsUrl: string
	includesResponses: boolean
	includesGenerator: boolean
}

export function reconstituteFooterProps(footer: HTMLElement, partial: Partial<PageFooterProps> = {}): PageFooterProps {
	return {
		creditsUrl: partial.creditsUrl ?? footer.querySelector<HTMLAnchorElement>(".creditsLink")!.href,
		includesResponses: partial.includesResponses ?? footer.querySelector<HTMLElement>(".jsOffHint") !== null,
		includesGenerator: partial.includesGenerator ?? footer.querySelector<HTMLElement>(".saveHint") !== null,
	}
}

export function PageFooter({creditsUrl, includesGenerator, includesResponses}: PageFooterProps) {
	return <footer>
		{includesGenerator
			? <Fragment>
					<noscript class="jsOffHint">
						<p>⚠️ Certain features - copy, select-all/select-none{
							includesResponses ? ", reroll offline, select response" : ""
						} - are currently disabled because JavaScript is disabled.</p>
					</noscript>
					{includesResponses
						? <p class="requiresJs saveHint">💡 You can save this page to be able to generate scenarios offline!</p>
						: null}
				</Fragment>
			: null}
		<p>
			<a class="creditsLink" href={creditsUrl} rel="external nofollow noreferrer">Project credits/instructions/source code/license</a>
		</p>
	</footer>
}