svelte-website/src/components/misc/guestbook/guestbook-entry.svelte

<script lang="ts">
	import type { Comment } from '../guestbook.svelte';
	export let comment: Comment;
</script>

<div class="rounded bg-red-100 dark:bg-slate-800 dark:ring-2 dark:ring-slate-400 mt-2 break-words">
	<div class="rounded-t bg-slate-400 dark:bg-slate-700 grid grid-cols-2 gap-1 min-h-fit  px-3 py-1">
		<p class="text-xs">Author: {comment.name}</p>
		<p class="text-xs text-right">
			Time:
			{#if comment.time != null}
				{new Date(comment.time).toLocaleString('en-US', {dateStyle: 'long', timeStyle: 'short'})}
			{:else}
				brokn
			{/if}
		</p>
		{#if comment.website != null}
			<p class="text-xs col-span-2">Site: {comment.website}</p>
		{/if}
	</div>
	<div class="px-3 py-2">
		<p class="">{comment.message}</p>
	</div>
</div>