Chap04 -> Creating a reusable styled component with Emotion

QandA/frontend/src/HomePage.tsx

@@ -1,8 +1,12 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import { PageTitle } from './PageTitle';
 import { Page } from './Page';
 import { QuestionList } from './QuestionList';
 import { getUnansweredQuestions, QuestionData } from './QuestionsData';
+import { PrimaryButton } from './Styles';
 
 export const HomePage = () => {
   const [questions, setQuestions] = React.useState<QuestionData[]>([]);
@@ -23,9 +27,17 @@ export const HomePage = () => {
 
   return (
     <Page>
-      <div>
+      <div
+        css={css`
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        `}
+      >
         <PageTitle>Unanswered Questions</PageTitle>
-        <button onClick={handleAskQuestionClick}>Ask a question</button>
+        <PrimaryButton onClick={handleAskQuestionClick}>
+          Ask a question
+        </PrimaryButton>
       </div>
       {questionsLoading ? (
         <div>Loading...</div>

QandA/frontend/src/Page.tsx

@@ -1,3 +1,6 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import { PageTitle } from './PageTitle';
 
@@ -7,7 +10,13 @@ interface Props {
 }
 
 export const Page = ({ title, children }: Props) => (
-  <div>
+  <div
+    css={css`
+      margin: 50px auto 20px auto;
+      padding: 30px 20px;
+      max-width: 600px;
+    `}
+  >
     {title && <PageTitle>{title}</PageTitle>}
     {children}
     {/* Component nested within Page component will be rendere here */}

QandA/frontend/src/PageTitle.tsx

@@ -1,5 +1,20 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 interface Props {
   children: React.ReactNode;
 }
-export const PageTitle = ({ children }: Props) => <h2>{children}</h2>;
+export const PageTitle = ({ children }: Props) => (
+  <h2
+    css={css`
+      font-size: 15px;
+      font-weight: bold;
+      margin: 10px 0px 5px;
+      text-align: center;
+      text-transform: uppercase;
+    `}
+  >
+    {children}
+  </h2>
+);

QandA/frontend/src/Styles.ts

@@ -1,3 +1,5 @@
+import styled from '@emotion/styled';
+
 export const gray1 = '#383737';
 export const gray2 = '#5c5a5a';
 export const gray3 = '#857c81';
@@ -10,3 +12,24 @@ export const accent1 = '#dbb365';
 export const accent2 = '#efd197';
 export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
 export const fontSize = '16px';
+export const PrimaryButton = styled.button`
+  background-color: ${primary2};
+  border-color: ${primary2};
+  border-style: solid;
+  border-radius: 5px;
+  font-family: ${fontFamily};
+  font-family: ${fontSize};
+  padding: 5px 10px;
+  color: white;
+  cursor: pointer;
+  :hover {
+    background-color: ${primary1};
+  }
+  :focus {
+    outline-color: ${primary2};
+  }
+  :disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;