feature (#2): add joke block component to home page

components/JokeBlock.vue

@@ -0,0 +1,25 @@
+<script>
+export default {
+  data: () => ({
+    joke: '',
+  }),
+  async mounted() {
+    this.joke = await fetch('/api/joke').then((res) => res.json())
+  },
+}
+</script>
+
+<template>
+  <article>
+    <blockquote>
+      <p>{{ joke }}</p>
+    </blockquote>
+  </article>
+</template>
+
+<style scoped>
+blockquote {
+  border-left: 5px solid #ccc;
+  padding: 0.5rem;
+}
+</style>

pages/index.vue

@@ -1,6 +1,10 @@
 <template>
-  <FeedbackForm />
+  <main>
+    <FeedbackForm />
+    <JokeBlock />
+  </main>
 </template>
+
 <style>
 * {
   font-family: 'Helvetica', sans-serif;