Extract out a title component

web/components/title.tsx

@@ -0,0 +1,8 @@
+export function Title(props: { text: string }) {
+  const { text } = props
+  return (
+    <h1 className="text-2xl font-major-mono text-indigo-700 font-bold mt-6 mb-4">
+      {text}
+    </h1>
+  )
+}

web/pages/account.tsx

@@ -5,6 +5,7 @@ import { useUser } from '../hooks/use-user'
 import { useState, useEffect } from 'react'
 import { Contract, listContracts } from '../lib/firebase/contracts'
 import { ContractsList } from '../components/contracts-list'
+import { Title } from '../components/title'
 
 export default function Account() {
   const user = useUser()
@@ -46,9 +47,7 @@ export default function Account() {
           </div>
         </div>
 
-        <h1 className="text-2xl font-major-mono text-indigo-700 font-bold mt-6 mb-4">
-          Your markets
-        </h1>
+        <Title text="Contracts" />
         <ContractsList contracts={contracts} />
       </div>
     </div>

web/pages/contract/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { ContractsList } from '../../components/contracts-list'
 import { Header } from '../../components/header'
 import { Spacer } from '../../components/layout/spacer'
+import { Title } from '../../components/title'
 import { useUser } from '../../hooks/use-user'
 import {
   Contract,
@@ -55,9 +56,7 @@ export default function NewContract() {
     <div>
       <Header />
       <div className="max-w-4xl py-12 lg:mx-auto px-4">
-        <h1 className="text-2xl font-major-mono text-indigo-700 font-bold my-6">
-          Create a new prediction market
-        </h1>
+        <Title text="Create a new prediction market" />
         <div className="w-full bg-gray-200 rounded-lg shadow-xl p-6">
           {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
           {/* When the form is submitted, create a new contract in the database */}
@@ -175,11 +174,7 @@ export default function NewContract() {
 
         <Spacer h={10} />
 
-        {/* Show a separate card for each contract */}
-        <h1 className="text-2xl font-major-mono text-indigo-700 font-bold my-6">
-          Your markets
-        </h1>
-
+        <Title text="Your markets" />
         <ContractsList contracts={contracts} />
       </div>
     </div>