Add forum message to LessonHeader, remove author.

Beef up Author component.

Author: briangershon

components/mdx/Author.tsx

@@ -1,14 +1,73 @@
-import { Box, Text } from '@chakra-ui/react'
+import { Box, Text, Link, HStack, Avatar } from '@chakra-ui/react'
+import NextLink from 'next/link'
 
 interface AuthorProps {
-  author: string
+  handle: string
 }
 
-export function Author({ author }: AuthorProps) {
+interface AuthorDetails {
+  displayName: string
+  moreInfoUrl?: string
+  avatarUrl?: string
+  about?: string
+}
+
+interface AuthorLookup {
+  [key: string]: AuthorDetails
+}
+
+const authors: AuthorLookup = {
+  brianfive: {
+    displayName: 'Brian Gershon',
+    moreInfoUrl: 'https://brianfive.xyz',
+    avatarUrl: 'https://brianfive.xyz/profile.png',
+    about:
+      'Brian has been a member of the DeveloperDAO since November 2021, and enjoys building Web3 user experiences and smart contracts. Also active with Next.js, React and Serverless.',
+  },
+}
+
+export function Author({ handle }: AuthorProps) {
+  const author = authors[handle]
+  if (!author) {
+    return null
+  }
+
   return (
-    <Box mt="8" py="5">
-      <Text>[Author Bio Goes Here]</Text>
-      <Text>{author}</Text>
+    <Box
+      marginY={12}
+      paddingY={4}
+      paddingBottom={8}
+      borderTopWidth="thin"
+      borderColor="gray"
+    >
+      <Text fontSize={25} marginBottom={4}>
+        Written by
+      </Text>
+      <HStack paddingX={2} columnGap={4}>
+        <Box>
+          <Avatar size="2xl" name={author.displayName} src={author.avatarUrl} />
+        </Box>
+        <Box>
+          {author.moreInfoUrl && (
+            <Link
+              as={NextLink}
+              href={author.moreInfoUrl}
+              passHref
+              isExternal
+              textDecoration="underline"
+            >
+              {author.displayName}
+            </Link>
+          )}
+          {!author.moreInfoUrl && <Text>{author.displayName}</Text>}
+
+          {author.about && (
+            <Box mt={2} maxWidth="xl">
+              {author.about}
+            </Box>
+          )}
+        </Box>
+      </HStack>
     </Box>
   )
 }

components/mdx/LessonHeader.tsx

@@ -1,19 +1,45 @@
-import { Box, useStyleConfig, Text } from '@chakra-ui/react'
+import { Box, useStyleConfig, Text, Link, HStack } from '@chakra-ui/react'
+import NextLink from 'next/link'
+import { QuestionIcon } from '@chakra-ui/icons'
 
 interface LessonHeaderProps {
   title: string
-  author: string
+  discussionUrl: string
 }
 
-export function LessonHeader({ title, author }: LessonHeaderProps) {
+export function LessonHeader({ title, discussionUrl }: LessonHeaderProps) {
   const headerStyle = useStyleConfig('LessonHeader')
 
   return (
     <Box>
       <Box __css={headerStyle}>
         <Text>{title}</Text>
       </Box>
-      <div>Author: {author}</div>
+      <HStack
+        borderWidth="thin"
+        borderColor="gray"
+        padding="4"
+        marginY="8"
+        columnGap={2}
+        maxWidth="xl"
+      >
+        <Box>
+          <QuestionIcon w={12} h={12} />
+        </Box>
+        <Box>
+          Please visit our{' '}
+          <Link
+            as={NextLink}
+            href={discussionUrl}
+            passHref
+            isExternal
+            textDecoration="underline"
+          >
+            forum
+          </Link>{' '}
+          for questions or more discussion.
+        </Box>
+      </HStack>
     </Box>
   )
 }

pages/lessons/projects/4.mdx

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