New ContributorFooter component for displaying

authors, reviewers and contributors.

Author: briangershon

components/mdx/Author.tsx

@@ -1,53 +1,47 @@
-import { Box, Text, Link, HStack, Avatar } from '@chakra-ui/react'
+import { Box, Text, Link, HStack, Avatar, Center } from '@chakra-ui/react'
 import NextLink from 'next/link'
 import { contributors } from '@data/contributors'
 
 interface AuthorProps {
   handle: string
+  avatarSize?: string
 }
 
-export function Author({ handle }: AuthorProps) {
+export function Author({ handle, avatarSize }: AuthorProps) {
   const author = contributors[handle]
   if (!author) {
     return null
   }
 
   return (
-    <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>}
+    <HStack paddingX={2} columnGap={4}>
+      <Center width={40}>
+        <Avatar
+          size={avatarSize}
+          name={author.displayName}
+          src={author.avatarUrl}
+        />
+      </Center>
+      <Box>
+        {author.moreInfoUrl && (
+          <Link
+            as={NextLink}
+            href={author.moreInfoUrl}
+            passHref
+            isExternal
+            textDecoration="underline"
+          >
+            <Text fontSize={18}>{author.displayName}</Text>
+          </Link>
+        )}
+        {!author.moreInfoUrl && <Text>{author.displayName}</Text>}
 
-          {author.about && (
-            <Box mt={2} maxWidth="xl">
-              {author.about}
-            </Box>
-          )}
-        </Box>
-      </HStack>
-    </Box>
+        {author.about && (
+          <Box mt={2} maxWidth="xl">
+            <Text fontSize={14}>{author.about}</Text>
+          </Box>
+        )}
+      </Box>
+    </HStack>
   )
 }

components/mdx/ContributorFooter.tsx

@@ -0,0 +1,65 @@
+import { Box, Text, VStack } from '@chakra-ui/react'
+import { Author } from '@components/mdx/Author'
+
+interface ContributorFooterProps {
+  authors: string[]
+  reviewers: string[]
+  contributors: string[]
+}
+
+export function ContributorFooter({
+  authors,
+  reviewers,
+  contributors,
+}: ContributorFooterProps) {
+  return (
+    <Box
+      marginY={12}
+      paddingY={4}
+      paddingBottom={8}
+      borderTopWidth="thin"
+      borderColor="gray"
+    >
+      {authors && authors.length > 0 && (
+        <Box>
+          <Text fontSize={26} marginTop={8} marginBottom={4}>
+            {authors.length > 1 ? 'Authors' : 'Author'}
+          </Text>
+          <VStack spacing={4} alignItems="left">
+            {authors.map((contrib) => {
+              return <Author handle={contrib} avatarSize="2xl" />
+            })}
+          </VStack>
+        </Box>
+      )}
+
+      {reviewers && reviewers.length > 0 && (
+        <Box>
+          <Text fontSize={20} marginTop={8} marginBottom={4}>
+            {reviewers.length > 1 ? 'Reviewers' : 'Reviewer'}
+          </Text>
+          <VStack spacing={4} alignItems="left">
+            {reviewers.map((contrib) => {
+              return <Author handle={contrib} avatarSize="lg" />
+            })}
+          </VStack>
+        </Box>
+      )}
+
+      {contributors && contributors.length > 0 && (
+        <Box>
+          <Text fontSize={20} marginTop={8} marginBottom={4}>
+            {contributors.length > 1
+              ? 'Additional Contributors'
+              : 'Additional Contributor'}
+          </Text>
+          <VStack spacing={4} alignItems="left">
+            {contributors.map((contrib) => {
+              return <Author handle={contrib} avatarSize="lg" />
+            })}
+          </VStack>
+        </Box>
+      )}
+    </Box>
+  )
+}

data/contributors.ts

@@ -17,4 +17,13 @@ export const contributors: ContributorLookup = {
     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.',
   },
+  piablo: {
+    displayName: 'piablo',
+  },
+  georgemac510: {
+    displayName: 'georgemac510',
+  },
+  lorem: {
+    displayName: 'Lorem Ipsum',
+  },
 }

pages/lessons/projects/4.mdx

@@ -6,7 +6,7 @@ icons: ['solidity', 'hardhat', 'openzeppelin']
 ---
 
 import { LessonHeader } from '../../../components/mdx/LessonHeader'
-import { Author } from '../../../components/mdx/Author'
+import { ContributorFooter } from '../../../components/mdx/ContributorFooter'
 
 <LessonHeader
   title="Lesson 4: Testing your TierNFT"
@@ -893,4 +893,8 @@ With TDD:
 Go forth, test, and prosper knowing you have confidence in the code you're
 deploying into the world.
 
-<Author handle="brianfive" />
+<ContributorFooter
+  authors={['brianfive']}
+  reviewers={['piablo', 'georgemac510']}
+  contributors={['lorem', 'lorem']}
+/>