-
Notifications
You must be signed in to change notification settings - Fork 1
/
Categories.tsx
45 lines (41 loc) · 1.06 KB
/
Categories.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
import * as React from 'react';
import {FlatList} from 'react-native';
import {Text, View} from 'ui';
type CategoryType = {
label: string;
total: number;
color: string;
};
const data: CategoryType[] = [
{label: 'inbox', total: 2, color: '#EBEFF5'},
{label: 'work', total: 2, color: '#61DEA4'},
{label: 'Shopping', total: 3, color: '#F45E6D'},
{label: 'Family', total: 1, color: '#FFE761'},
{label: 'Personal', total: 4, color: '#B678FF'},
];
const CategoryItem = ({label, total, color}: CategoryType) => {
return (
<View
margin="s"
padding="s"
paddingRight="l"
borderRadius={8}
style={{backgroundColor: color}}>
<Text variant="subheader">{label}</Text>
<Text fontSize={12} opacity={0.5}>
{total} task
</Text>
</View>
);
};
export const Categories = () => {
return (
<FlatList
horizontal={true}
data={data}
renderItem={({item}) => <CategoryItem {...item} />}
keyExtractor={(_, index) => `item-${index}`}
showsHorizontalScrollIndicator={false}
/>
);
};