git.iko.soy/bridge
on 3e1a340 help sign in
bridge/src/indigo-react/components/Button.js
48 lines 1.2 kB history raw
1import React from 'react';
2import cn from 'classnames';
3import Grid from './Grid';
5export default function Button({
6 solid = false,
7 disabled = false,
8 detail,
9 className,
10 icon,
11 children,
12 ...rest
13}) {
14 const textColor = {
15 white: solid,
16 black: !solid && !disabled,
17 gray4: !solid && disabled,
18 };
19 return (
20 <Grid
21 as="a"
22 gap={4}
23 className={cn(
24 'pointer p4 truncate flex-row justify-between',
25 {
26 'bg-black bg-gray6-hover': solid && !disabled,
27 'bg-gray3': solid && disabled,
28 'bg-transparent bg-gray1-hover': !solid && !disabled,
29 'bg-transparent': !solid && disabled,
30 },
31 className
32 )}
33 style={{
34 ...(disabled && { pointerEvents: 'none', cursor: 'not-allowed' }),
35 }}
36 {...rest}>
37 <Grid.Item className="flex-row justify-between" full>
38 <span className={cn(textColor)}>{children}</span>
39 <div className={cn('pl4', textColor)}>{icon}</div>
40 </Grid.Item>
41 {detail && (
42 <Grid.Item full>
43 <span className="gray4 f6">{detail}</span>
44 </Grid.Item>
45 )}
46 </Grid>
47 );