From 4affa35f003d3bff1d0238b4398a54e270d4da07 Mon Sep 17 00:00:00 2001
From: Yiqing Zhu <793831308@qq.com>
Date: Sat, 26 Mar 2022 14:10:10 +1100
Subject: [PATCH] Chap03 -> Creating function-based component -> Children props

---
 QandA/frontend/src/HomePage.tsx  |  8 +++++---
 QandA/frontend/src/Page.tsx      | 15 +++++++++++++++
 QandA/frontend/src/PageTitle.tsx |  5 +++++
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 QandA/frontend/src/Page.tsx
 create mode 100644 QandA/frontend/src/PageTitle.tsx

diff --git a/QandA/frontend/src/HomePage.tsx b/QandA/frontend/src/HomePage.tsx
index bfbe1eb..6b9f780 100644
--- a/QandA/frontend/src/HomePage.tsx
+++ b/QandA/frontend/src/HomePage.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
+import { PageTitle } from './PageTitle';
+import { Page } from './Page';
 import { QuestionList } from './QuestionList';
 import { getUnansweredQuestions } from './QuestionsData';
 
 export const HomePage = () => (
-  <div>
+  <Page>
     <div>
-      <h2>Unanswered Questions</h2>
+      <PageTitle>Unanswered Questions</PageTitle>
       <button>Ask a question</button>
     </div>
     <QuestionList data={getUnansweredQuestions()} />
-  </div>
+  </Page>
 );
diff --git a/QandA/frontend/src/Page.tsx b/QandA/frontend/src/Page.tsx
new file mode 100644
index 0000000..b9935b6
--- /dev/null
+++ b/QandA/frontend/src/Page.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { PageTitle } from './PageTitle';
+
+interface Props {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export const Page = ({ title, children }: Props) => (
+  <div>
+    {title && <PageTitle>{title}</PageTitle>}
+    {children}
+    {/* Component nested within Page component will be rendere here */}
+  </div>
+);
diff --git a/QandA/frontend/src/PageTitle.tsx b/QandA/frontend/src/PageTitle.tsx
new file mode 100644
index 0000000..a906d9e
--- /dev/null
+++ b/QandA/frontend/src/PageTitle.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+interface Props {
+  children: React.ReactNode;
+}
+export const PageTitle = ({ children }: Props) => <h2>{children}</h2>;