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{' '}
50 <Link href={`https://github.com/${latestCommit.login}`} showUnderline={true}>
51 {latestCommit.login}
52 </Link>{' '}
53 on{' '}
54 <Link href={latestCommit.url} showUnderline={true}>
55 {format(new Date(latestCommit.date))}
56 </Link>
57 </Text>
58 ) : null}
59 </>
60 )
61 }
62
63 const PageFooter = () => {
64 const {editUrl, latestCommit, contributors = []} = usePage().pageContext
65
66 if (!editUrl && !contributors.length) {
67 return null
68 }
69
70 return (
71 <Box
72 sx={{
73 borderWidth: 0,
74 borderTopWidth: 1,
75 borderRadius: 0,
76 mt: 8,
77 py: 5,
78 borderStyle: 'solid',
79 borderColor: 'border.default',
80 }}
81 >
82 <Box sx={{display: 'grid', gap: 4}}>
83 {editUrl ? (
84 <Link href={editUrl}>
85 <Octicon icon={PencilIcon} sx={{mr: 2}} />
86 Edit this page on GitHub
87 </Link>
88 ) : null}
89 <Contributors contributors={contributors} latestCommit={latestCommit} />
90 </Box>
91 </Box>
92 )
93 }
94
95 export default PageFooter