From a2d892793c692d93057466a7419f30db5f74b294 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 30 Mar 2022 15:07:46 +1100
Subject: [PATCH] Chap05 -> Using route parameter -> Creating an AnswerList
 component -> 4 & 5 & 6: Created Answer component

---
 QandA/frontend/src/Answer.tsx | 38 +++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 QandA/frontend/src/Answer.tsx

diff --git a/QandA/frontend/src/Answer.tsx b/QandA/frontend/src/Answer.tsx
new file mode 100644
index 0000000..49a10b4
--- /dev/null
+++ b/QandA/frontend/src/Answer.tsx
@@ -0,0 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import React from 'react';
+import { AnswerData } from './QuestionsData';
+import { gray3 } from './Styles';
+
+interface Props {
+  data: AnswerData;
+}
+
+export const Answer = ({ data }: Props) => (
+  <div
+    css={`
+      padding: 10px 0px;
+    `}
+  >
+    <div
+      css={css`
+        padding: 10px 0px;
+        font-size: 13px;
+      `}
+    >
+      {data.content}
+    </div>
+    <div
+      css={css`
+        font-size: 12px;
+        font-style: italic;
+        color: ${gray3};
+      `}
+    >
+      {`Answered by ${
+        data.userName
+      } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}
+    </div>
+  </div>
+);