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