1 import React from 'react'
2 import {Box, Octicon, Avatar, Text} from '@primer/react'
3 import {Tooltip} from '@primer/react/next'
4 import {PencilIcon} from '@primer/octicons-react'
5 import Link from './link'
6 import usePage from '../hooks/use-page'
7
8 const months = [
9 'January',
10 'February',
11 'March',
12 'April',
13 'May',
14 'June',
15 'July',
16 'August',
17 'September',
18 'October',
19 'November',
20 'December',
21 ]
22
23 const format = d => `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`
24
25 const pluralize = (word, count) => `${word}${count === 1 ? '' : 's'}`
26
27 const Contributors = ({contributors = [], latestCommit}) => {
28 if (!contributors.length) {
29 return null
30 }
31
32 return (
33 <>
34 <Box sx={{display: 'flex', alignItems: 'center'}}>
35 <Text sx={{mr: 2}}>
36 {contributors.length} {pluralize('contributor', contributors.length)}
37 </Text>
38 {contributors.map(login => (
39 <Tooltip key={login} text={login}>
40 <Link href={`https://github.com/${login}`} sx={{lineHeight: 'condensedUltra', mr: 2}}>
41 <Avatar src={`https://github.com/${login}.png?size=40`} alt={login} />
42 </Link>
43 </Tooltip>
44 ))}
45 </Box>
46 {latestCommit ? (
47 <Text sx={{fontSize: 1, mt: 1}}>
48 Last edited by <Link href={`https://github.com/${latestCommit.login}`}>{latestCommit.login}</Link> on{' '}
49 <Link href={latestCommit.url}>{format(new Date(latestCommit.date))}</Link>
50 </Text>
51 ) : null}
52 </>
53 )
54 }
55
56 const PageFooter = () => {
57 const {editUrl, latestCommit, contributors = []} = usePage().pageContext
58
59 if (!editUrl && !contributors.length) {
60 return null
61 }
62
63 return (
64 <Box
65 sx={{
66 borderWidth: 0,
67 borderTopWidth: 1,
68 borderRadius: 0,
69 mt: 8,
70 py: 5,
71 borderStyle: 'solid',
72 borderColor: 'border.default',
73 }}
74 >
75 <Box sx={{display: 'grid', gap: 4}}>
76 {editUrl ? (
77 <Link href={editUrl}>
78 <Octicon icon={PencilIcon} sx={{mr: 2}} />
79 Edit this page on GitHub
80 </Link>
81 ) : null}
82 <Contributors contributors={contributors} latestCommit={latestCommit} />
83 </Box>
84 </Box>
85 )
86 }
87
88 export default PageFooter