From 569bea124001301bd484ff03eb9680cb8813c011 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 15 Nov 2019 16:56:11 +0700
Subject: [PATCH] Add title

---
 client/Home.jsx              | 3 +++
 client/layouts/Centering.jsx | 3 +++
 client/useDocumentTitle.js   | 9 +++++++++
 3 files changed, 15 insertions(+)
 create mode 100644 client/useDocumentTitle.js

diff --git a/client/Home.jsx b/client/Home.jsx
index f7063b5..70991a8 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -3,8 +3,11 @@ import { Link } from 'react-router-dom';
 
 import CenterCover from './covers/CenterCover';
 import Layout from './Layout';
+import useDocumentTitle from './useDocumentTitle';
 
 const Home = () => {
+    useDocumentTitle('CSS Layout');
+
     return (
         <Layout>
             <h2 className="f2 lh-copy">Pattern</h2>
diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx
index db6ff1c..1714990 100644
--- a/client/layouts/Centering.jsx
+++ b/client/layouts/Centering.jsx
@@ -3,8 +3,11 @@ import React from 'react';
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
 import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
 
 const Centering = () => {
+    useDocumentTitle('CSS Layout ∙ Centering');
+
     return (
         <DetailsLayout name="Centering">
             <BrowserFrame
diff --git a/client/useDocumentTitle.js b/client/useDocumentTitle.js
new file mode 100644
index 0000000..17066ee
--- /dev/null
+++ b/client/useDocumentTitle.js
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+const useDocumentTitle = (title) => {
+    useEffect(() => {
+        document.title = title;
+    }, [title]);
+};
+
+export default useDocumentTitle;