Added basic post creation.

components/posts/post.vue

@@ -0,0 +1,110 @@
+<template>
+	<a
+		:href="`/s/shack/posts/${post.id}`"
+		class="post"
+	>
+		<img
+			class="thumbnail"
+			:src="blockedIcon"
+		>
+
+		<div class="body">
+			<h2 class="title">
+				<a
+					:href="`/s/shack/posts/${post.id}`"
+					class="link"
+				>{{ post.title }}</a>
+			</h2>
+
+			<div class="meta">
+				<a
+					:href="`/user/${post.shelf.slug}`"
+					class="shelf link"
+				>s/{{ post.shelf.slug }}</a>
+
+				<a
+					:href="`/user/${post.user.username}`"
+					class="username link"
+				>u/{{ post.user.username }}</a>
+
+				<span
+					:title="format(post.createdAt, 'MMMM d, yyyy hh:mm:ss')"
+					class="timestamp"
+				>{{ formatDistance(post.createdAt, new Date(), { includeSeconds: true }) }} ago</span>
+			</div>
+		</div>
+	</a>
+</template>
+
+<script setup>
+import { format, formatDistance } from 'date-fns';
+import blockedIcon from '../../assets/icons/blocked.svg?url'; // eslint-ignore import/no-unresolved
+
+defineProps({
+	post: {
+		type: Object,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.post {
+	display: flex;
+	color: var(--text);
+	border-radius: .25rem;
+	background: var(--background);
+	text-decoration: none;
+
+	& :hover {
+		cursor: pointer;
+
+		.title {
+			color: var(--text);
+		}
+	}
+}
+
+.body {
+	margin-left: 1rem;
+}
+
+.title {
+	padding: .5rem 0;
+	margin: 0;
+	font-size: 1.25rem;
+	font-weight: normal;
+	color: var(--grey-dark-30);
+
+	.link {
+		color: inherit;
+		text-decoration: none;
+	}
+}
+
+.thumbnail {
+	width: 7rem;
+	height: 4rem;
+	box-sizing: border-box;
+	padding: 1rem;
+	border-radius: .25rem;
+	margin: .5rem;
+	background: var(--grey-light-10);
+	opacity: .25;
+}
+
+.meta {
+	display: flex;
+	gap: 1rem;
+	font-size: .9rem;
+}
+
+.shelf {
+	color: inherit;
+	font-weight: bold;
+}
+
+.timestamp {
+	color: var(--grey-dark-20);
+}
+</style>