chore: init

components/AccountInfo.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Account } from '~/api-client/types'
+
+const props = defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <div flex gap-2>
+    <div p1>
+      <img :src="account.avatar" rounded w-10 h-10>
+    </div>
+    <div flex flex-col>
+      <h4 font-bold>
+        {{ account.display_name }}
+      </h4>
+      <p op50>
+        @{{ account.acct }}
+      </p>
+    </div>
+  </div>
+</template>

components/PostActions.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { Post } from '~/api-client/types'
+
+const props = defineProps<{
+  post: Post
+}>()
+</script>
+
+<template>
+  <div flex justify-around px-2>
+    <button flex gap-1 items-center>
+      <div i-ri:chat-3-line />
+      <span>{{ post.replies_count }}</span>
+    </button>
+    <button flex gap-1 items-center>
+      <div i-ri:repeat-fill />
+      <span>{{ post.reblogs_count }}</span>
+    </button>
+    <button flex gap-1 items-center>
+      <div i-ri:heart-3-line />
+      <span>{{ post.favourites_count }}</span>
+    </button>
+  </div>
+</template>

components/PostCard.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Post } from '~/api-client/types'
+
+const props = defineProps<{
+  post: Post
+}>()
+</script>
+
+<template>
+  <div flex flex-col gap-4 mb-5>
+    <AccountInfo :account="post.account" />
+    <div v-html="post.content" />
+    <PostActions :post="post" />
+  </div>
+</template>