diff options
author | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2021-10-15 15:25:41 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-15 15:25:41 +0530 |
commit | 0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d (patch) | |
tree | 5a994fb8e0620aa5d2542ddd9c8561ef9861a9b5 /src/components/ui/badge/index.tsx | |
parent | chore: refresh lock file to fix vulnerabilities (#2075) (diff) | |
download | ferdium-app-0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d.tar.gz ferdium-app-0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d.tar.zst ferdium-app-0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d.zip |
chore: move 'packages/ui' into 'src' (no longer an injected package) (#2077)
Diffstat (limited to 'src/components/ui/badge/index.tsx')
-rw-r--r-- | src/components/ui/badge/index.tsx | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx new file mode 100644 index 000000000..6495036ff --- /dev/null +++ b/src/components/ui/badge/index.tsx | |||
@@ -0,0 +1,71 @@ | |||
1 | import classnames from 'classnames'; | ||
2 | import { Component, ReactNode } from 'react'; | ||
3 | import injectStyle from 'react-jss'; | ||
4 | |||
5 | import { Theme } from '@meetfranz/theme'; | ||
6 | import { IWithStyle } from '../typings/generic'; | ||
7 | |||
8 | interface IProps extends IWithStyle { | ||
9 | type: string; | ||
10 | className?: string; | ||
11 | children: ReactNode; | ||
12 | } | ||
13 | |||
14 | const badgeStyles = (theme: Theme) => { | ||
15 | const styles = {}; | ||
16 | Object.keys(theme.styleTypes).map(style => { | ||
17 | Object.assign(styles, { | ||
18 | [style]: { | ||
19 | background: theme.styleTypes[style].accent, | ||
20 | color: theme.styleTypes[style].contrast, | ||
21 | border: theme.styleTypes[style].border, | ||
22 | }, | ||
23 | }); | ||
24 | }); | ||
25 | |||
26 | return styles; | ||
27 | }; | ||
28 | |||
29 | const styles = (theme: Theme) => ({ | ||
30 | badge: { | ||
31 | display: 'inline-block', | ||
32 | padding: [3, 8, 4], | ||
33 | fontSize: theme.badgeFontSize, | ||
34 | borderRadius: theme.badgeBorderRadius, | ||
35 | margin: [0, 4], | ||
36 | |||
37 | '&:first-child': { | ||
38 | marginLeft: 0, | ||
39 | }, | ||
40 | |||
41 | '&:last-child': { | ||
42 | marginRight: 0, | ||
43 | }, | ||
44 | }, | ||
45 | ...badgeStyles(theme), | ||
46 | }); | ||
47 | |||
48 | class BadgeComponent extends Component<IProps> { | ||
49 | public static defaultProps = { | ||
50 | type: 'primary', | ||
51 | }; | ||
52 | |||
53 | render() { | ||
54 | const { classes, children, type, className } = this.props; | ||
55 | |||
56 | return ( | ||
57 | <div | ||
58 | className={classnames({ | ||
59 | [classes.badge]: true, | ||
60 | [classes[type]]: true, | ||
61 | [`${className}`]: className, | ||
62 | })} | ||
63 | data-type="franz-badge" | ||
64 | > | ||
65 | {children} | ||
66 | </div> | ||
67 | ); | ||
68 | } | ||
69 | } | ||
70 | |||
71 | export const Badge = injectStyle(styles)(BadgeComponent); | ||