Anvil/src/lib/components/atoms/DisplayName.svelte

<script lang="ts">
	import { _ } from 'svelte-i18n';

	/**
	 * Under which name shall the person be known?
	 */
	export let displayName: string = '';

	/**
	 * How to correctly address this person.
	 */
	export let pronoun: string = '';
</script>

<h1 class="h1 font-semibold text-4xl leading-tight">
	<!-- FIXME: Include placeholder in i18n -->
	<span class="sr-only">{$_('page.profile.heading')}</span>
	{@html displayName}
</h1>
<p class="leading-normal my-1">({@html pronoun})</p>