refactor: make clear which date is created/archived

src/lib/components/Divider.svelte

@@ -1,5 +1,5 @@
-<script>
-	export let horizontalPadding;
+<script lang="ts">
+	export let horizontalPadding: string;
 </script>
 
 <svg

src/routes/announcements/[slug]/Date.svelte

@@ -23,19 +23,25 @@
 
 {#if (isEditing || isCreating) && !isPreviewing}
 	<span>
-		<input type="datetime-local" max="9999-12-31T23:59" bind:value={createdAtInput} />
+		<label>
+			Created
+			<input type="datetime-local" max="9999-12-31T23:59" bind:value={createdAtInput} />
+		</label>
 		{#if archivedAtInput}
 			<ArrowRight size="24" />
-			<input type="datetime-local" max="9999-12-31T23:59" bind:value={archivedAtInput} />
+			<label>
+				Archived
+				<input type="datetime-local" max="9999-12-31T23:59" bind:value={archivedAtInput} />
+			</label>
 		{/if}
 	</span>
 {:else if displayCreatedAt}
 	<span>
-		{relativeTime(displayCreatedAt)}
+		Created {relativeTime(displayCreatedAt)}
 
 		{#if displayArchivedAt}
 			<ArrowRight size="24" />
-			{relativeTime(displayArchivedAt)}
+			Archived {relativeTime(displayArchivedAt)}
 		{/if}
 	</span>
 {/if}
@@ -48,6 +54,12 @@
 		column-gap: 1rem;
 	}
 
+	label {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
 	input {
 		&,
 		&:focus {