Consolidate some related components to single files

Author: lukekarrys

src/components/__tests__/contributors.test.js

@@ -1,9 +1,8 @@
 import React from 'react'
 import {Box} from '@primer/react'
 import styled from 'styled-components'
-import MobileSearch from './mobile-search'
+import * as Search from './search'
 import NavDrawer from './nav-drawer'
-import Search from './search'
 import Link from './link'
 import useSearch from '../hooks/use-search'
 import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
@@ -63,7 +62,7 @@ function Header() {
               {siteMetadata.title}
             </Link>
             <Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
-              <Search {...search} />
+              <Search.Desktop {...search} />
             </Box>
           </Box>
           <Box sx={{display: 'flex'}}>
@@ -75,7 +74,7 @@ function Header() {
               ))}
             </Box>
             <Box sx={{display: ['flex', null, null, 'none']}}>
-              <MobileSearch {...search} />
+              <Search.Mobile {...search} />
               <NavDrawer />
             </Box>
           </Box>

src/components/contributors.js

@@ -1,13 +1,65 @@
 import React from 'react'
-import {Box, Octicon} from '@primer/react'
+import {Box, Octicon, Avatar, Text, Tooltip} from '@primer/react'
 import {PencilIcon} from '@primer/octicons-react'
 import Link from './link'
-import Contributors from './contributors'
 import usePage from '../hooks/use-page'
 
-function PageFooter() {
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+const format = d => `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`
+
+const pluralize = (word, count) => `${word}${count === 1 ? '' : 's'}`
+
+const Contributors = ({contributors = [], latestCommit}) => {
+  if (!contributors.length) {
+    return null
+  }
+
+  return (
+    <div>
+      <Box sx={{display: 'flex', alignItems: 'center'}}>
+        <Text sx={{mr: 2}}>
+          {contributors.length} {pluralize('contributor', contributors.length)}
+        </Text>
+        {contributors.map(login => (
+          <Tooltip key={login} aria-label={login}>
+            <Link href={`https://github.com/${login}`} sx={{lineHeight: 'condensedUltra', mr: 2}}>
+              <Avatar src={`https://github.com/${login}.png?size=40`} alt={login} />
+            </Link>
+          </Tooltip>
+        ))}
+      </Box>
+      {latestCommit ? (
+        <Text sx={{fontSize: 1, color: 'fg.muted', mt: 1}}>
+          Last edited by <Link href={`https://github.com/${latestCommit.login}`}>{latestCommit.login}</Link> on{' '}
+          <Link href={latestCommit.url}>{format(new Date(latestCommit.date))}</Link>
+        </Text>
+      ) : null}
+    </div>
+  )
+}
+
+const PageFooter = () => {
   const {editUrl, latestCommit, contributors = []} = usePage().pageContext
-  return editUrl || contributors.length ? (
+
+  if (!editUrl && !contributors.length) {
+    return null
+  }
+
+  return (
     <Box
       sx={{
         borderWidth: 0,
@@ -26,10 +78,10 @@ function PageFooter() {
             Edit this page on GitHub
           </Link>
         ) : null}
-        {contributors.length ? <Contributors contributors={contributors} latestCommit={latestCommit} /> : null}
+        <Contributors contributors={contributors} latestCommit={latestCommit} />
       </Box>
     </Box>
-  ) : null
+  )
 }
 
 export default PageFooter