forked from badges/shields
-
Notifications
You must be signed in to change notification settings - Fork 1
/
badge-examples.js
99 lines (88 loc) · 2.21 KB
/
badge-examples.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import {
badgeUrlFromPath,
staticBadgeUrl,
} from '../../core/badge-urls/make-badge-url'
import {
serviceDefinitionPropType,
examplePropType,
} from '../lib/service-definitions/service-definition-prop-types'
import { Badge } from './common'
import { StyledCode } from './snippet'
const ExampleTable = styled.table`
min-width: 50%;
margin: auto;
th,
td {
text-align: left;
}
`
const ClickableTh = styled.th`
cursor: pointer;
`
const ClickableCode = styled(StyledCode)`
cursor: pointer;
`
function Example({ baseUrl, onClick, exampleData }) {
const { title, example, preview } = exampleData
const { label, message, color, style, namedLogo } = preview
const previewUrl = staticBadgeUrl({
baseUrl,
label,
message,
color,
style,
namedLogo,
})
const { pattern, namedParams, queryParams } = example
const exampleUrl = badgeUrlFromPath({
baseUrl,
path: pattern,
namedParams,
queryParams,
})
const handleClick = () => onClick(exampleData)
return (
<tr>
<ClickableTh onClick={handleClick}>{title}:</ClickableTh>
<td>
<Badge clickable onClick={handleClick} src={previewUrl} />
</td>
<td>
<ClickableCode onClick={handleClick}>{exampleUrl}</ClickableCode>
</td>
</tr>
)
}
Example.propTypes = {
exampleData: examplePropType.isRequired,
baseUrl: PropTypes.string,
onClick: PropTypes.func.isRequired,
}
export default function BadgeExamples({ definitions, baseUrl, onClick }) {
const flattened = definitions.reduce((accum, current) => {
const { examples } = current
return accum.concat(examples)
}, [])
return (
<ExampleTable>
<tbody>
{flattened.map(exampleData => (
<Example
baseUrl={baseUrl}
exampleData={exampleData}
key={`${exampleData.title} ${exampleData.example.pattern}`}
onClick={onClick}
/>
))}
</tbody>
</ExampleTable>
)
}
BadgeExamples.propTypes = {
definitions: PropTypes.arrayOf(serviceDefinitionPropType).isRequired,
baseUrl: PropTypes.string,
onClick: PropTypes.func.isRequired,
}