Draft up some initial components for Author

and LessonHeader. Play with in Lesson 4.

Author: briangershon

components/mdx/Author.tsx

@@ -0,0 +1,14 @@
+import { Box, Text } from '@chakra-ui/react'
+
+interface AuthorProps {
+  author: string
+}
+
+export function Author({ author }: AuthorProps) {
+  return (
+    <Box mt="8" py="5">
+      <Text>[Author Bio Goes Here]</Text>
+      <Text>{author}</Text>
+    </Box>
+  )
+}

components/mdx/LessonHeader.tsx

@@ -0,0 +1,19 @@
+import { Box, useStyleConfig, Text } from '@chakra-ui/react'
+
+interface LessonHeaderProps {
+  title: string
+  author: string
+}
+
+export function LessonHeader({ title, author }: LessonHeaderProps) {
+  const headerStyle = useStyleConfig('LessonHeader')
+
+  return (
+    <Box>
+      <Box __css={headerStyle}>
+        <Text>{title}</Text>
+      </Box>
+      <div>Author: {author}</div>
+    </Box>
+  )
+}

pages/lessons/projects/4.mdx

@@ -5,7 +5,10 @@ description:
 icons: ['solidity', 'hardhat', 'openzeppelin']
 ---
 
-# Lesson 4: Testing your TierNFT
+import { LessonHeader } from '../../../components/mdx/LessonHeader';
+import { Author } from '../../../components/mdx/Author';
+
+<LessonHeader title="Lesson 4: Testing your TierNFT" author="brianfive" />
 
 In this lesson, we'll be adding automated tests for our smart contract created
 in Lesson 3.
@@ -886,3 +889,5 @@ With TDD:
 
 Go forth, test, and prosper knowing you have confidence in the code you're
 deploying into the world.
+
+<Author author="brianfive" />

theme.ts

@@ -133,6 +133,15 @@ const components = {
       },
     },
   },
+  LessonHeader: {
+    baseStyle: {
+      mt: '1.5em',
+      fontWeight: 'bold',
+      fontSize: '1.875rem',
+      letterSpacing: '-.025em',
+      color: 'yellow.300',
+    },
+  },
 }
 
 export const theme = extendTheme({