/
index.tsx
118 lines (113 loc) · 2.28 KB
/
index.tsx
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { View, makeTheme, styled } from 'dripsy'
export const dripsyTheme = makeTheme({
colors: {
primary: '#41b87a',
secondary: 'black',
background: 'white',
red: 'red',
green: 'green',
blue: 'blue',
},
text: {
primary: {
fontSize: 40,
color: 'green',
},
secondary: {
fontSize: 60,
color: 'blue',
},
},
sizes: {
container: 700,
},
shadows: {
md: {
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.8,
shadowRadius: 14,
elevation: 25,
},
},
linearGradients: {
strong: ['primary', 'secondary'],
light: ['red', 'green'],
},
layout: {
wide: {
width: 199,
},
narrow: {},
},
})
export const Button = styled(View)(
(props: {
disabled?: boolean
active?: boolean
size?: number
blue?: boolean
red?: boolean
}) => ({
alignItems: 'center',
flexShrink: 0,
justifyContent: 'center',
backgroundColor: props.disabled || props.active ? 'gray' : 'white',
shadowColor: props.disabled ? 'gray' : 'black',
pointerEvents: props.disabled ? 'none' : 'auto',
borderColor: '#999',
borderWidth: 1,
borderRadius: 3,
height: 25,
paddingLeft: 10,
paddingRight: 10,
...(props.size == 1 && {
borderRadius: '2',
height: 25,
paddingHorizontal: 10,
}),
...(props.size == 2 && {
borderRadius: '3',
height: 35,
paddingHorizontal: 15,
}),
...(props.blue && {
backgroundColor: 'blue',
borderColor: 'gray',
}),
...(props.red && {
backgroundColor: 'red',
borderColor: 'gray',
}),
})
)
export const Dot = styled(View)(() => ({
position: 'absolute',
cursor: 'pointer',
width: '0',
height: '0',
borderColor: 'transparent',
borderStyle: 'solid',
borderTopWidth: 0,
transform: 'translate(50%, 50%)',
}))
const colors = {
0: '#14171A',
1: '#AAB8C2',
2: '#E6ECF0',
3: '#FFAD1F',
4: '#F45D22',
5: '#E0245E',
}
export const Box = styled(View)((props: any) => ({
alignSelf: 'flex-start',
backgroundColor: colors[props.color] || 'transparent',
flexDirection: props.layout === 'column' ? 'column' : 'row',
padding: props.outer ? 4 : 0,
...(props.fixed && {
width: 6,
height: 6,
}),
}))