From 3ed9a2d57d7a47cfc81c5ae9f06db08bcbf960e9 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 22 Feb 2022 17:22:13 -0800
Subject: [PATCH] feature (#2): add joke block component to home page

---
 components/JokeBlock.vue | 25 +++++++++++++++++++++++++
 pages/index.vue          |  6 +++++-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 components/JokeBlock.vue

diff --git a/components/JokeBlock.vue b/components/JokeBlock.vue
new file mode 100644
index 0000000..73ea89e
--- /dev/null
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index c3dd9b5..140ec6f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,10 @@
 <template>
-  <FeedbackForm />
+  <main>
+    <FeedbackForm />
+    <JokeBlock />
+  </main>
 </template>
+
 <style>
 * {
   font-family: 'Helvetica', sans-serif;