Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: ⛓ add lists
  • Loading branch information
yjose committed Mar 23, 2021
1 parent 16d4e1a commit 96f2452
Show file tree
Hide file tree
Showing 10 changed files with 256 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/index.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import {Login} from 'screens';
import {Home} from 'screens';

export const App = () => {
return <Login />;
return <Home />;
};
57 changes: 57 additions & 0 deletions src/screens/Home/Categories.tsx
@@ -0,0 +1,57 @@
import * as React from 'react';
import {StyleSheet, View, Text, FlatList} from 'react-native';

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 style={[styles.item, {backgroundColor: color}]}>
<Text style={styles.label}>{label}</Text>
<Text style={styles.total}>{total} task</Text>
</View>
);
};

export const Categories = () => {
return (
<FlatList
horizontal={true}
data={data}
renderItem={({item}) => <CategoryItem {...item} />}
keyExtractor={(_, index) => `item-${index}`}
showsHorizontalScrollIndicator={false}
/>
);
};

const styles = StyleSheet.create({
item: {
padding: 12,
paddingRight: 24,
borderRadius: 8,
margin: 4,
minWidth: 120,
},
label: {
color: '#252A31',
fontSize: 16,
fontWeight: 'bold',
},
total: {
color: '#252A31',
fontSize: 12,
opacity: 0.5,
},
});
24 changes: 24 additions & 0 deletions src/screens/Home/Header.tsx
@@ -0,0 +1,24 @@
import * as React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Categories} from './Categories';

export const Header = () => {
return (
<View>
<Text style={styles.title}> Today </Text>
<Categories />
</View>
);
};

const styles = StyleSheet.create({
title: {
fontFamily: 'Inter',
fontSize: 32,
fontWeight: 'bold',
color: '#252A31',
marginHorizontal: 20,
textAlign: 'left',
paddingVertical: 30,
},
});
88 changes: 88 additions & 0 deletions src/screens/Home/Tasks.tsx
@@ -0,0 +1,88 @@
import * as React from 'react';
import {StyleSheet, View, Text, FlatList, Pressable} from 'react-native';
import {Check, UnCheck} from 'ui';
import {Header} from './Header';

type TaskType = {
label: string;
done: boolean;
color: string;
};

const data: TaskType[] = [
{label: 'Start making a presentation', done: false, color: '#EBEFF5'},
{label: 'Pay for rent', done: false, color: '#61DEA4'},
{label: 'Buy a milk', done: false, color: '#F45E6D'},
{label: 'Buy a chocolate for Charlotte', done: false, color: '#B678FF'},
{label: 'Pay for rent', done: false, color: '#61DEA4'},
{label: 'Buy a milk', done: false, color: '#F45E6D'},
{label: 'Buy a chocolate for Charlotte', done: false, color: '#B678FF'},
];

const TaskItem = ({label, done: d, color}: TaskType) => {
const [done, setDone] = React.useState(d);
return (
<Pressable onPress={() => setDone(!done)}>
<View style={styles.item}>
{done ? <Check style={styles.done} /> : <UnCheck style={styles.done} />}
<View style={[styles.itemContent, {opacity: done ? 0.3 : 1}]}>
<Text style={styles.label}>{label}</Text>
<View style={[styles.circle, {backgroundColor: color}]} />
</View>
</View>
</Pressable>
);
};

export const Tasks = () => {
return (
<FlatList
ListHeaderComponent={() => <Header />}
data={data}
renderItem={({item}) => <TaskItem {...item} />}
keyExtractor={(_, index) => `item-${index}`}
showsHorizontalScrollIndicator={false}
/>
);
};

const styles = StyleSheet.create({
item: {
flexDirection: 'row',
alignItems: 'center',
},
itemContent: {
flex: 1,
paddingVertical: 24,
flexDirection: 'row',
alignItems: 'center',
borderBottomColor: 'rgba(0,0,0,0.1)',
borderBottomWidth: 1,
},
label: {
color: '#252A31',
fontSize: 18,
fontWeight: '700',
fontFamily: 'Inter',
flex: 1,
},
icon: {
justifyContent: 'center',
paddingHorizontal: 16,
},
circle: {
width: 12,
height: 12,
borderRadius: 12,
marginHorizontal: 16,
},
title: {
color: '#252A31',
fontSize: 34,
fontWeight: 'bold',
paddingVertical: 20,
},
done: {
marginHorizontal: 16,
},
});
11 changes: 11 additions & 0 deletions src/screens/Home/index.tsx
@@ -0,0 +1,11 @@
import * as React from 'react';
import {SafeAreaView} from 'react-native';
import {Tasks} from './Tasks';

export const Home = () => {
return (
<SafeAreaView style={{flex: 1}}>
<Tasks />
</SafeAreaView>
);
};
1 change: 1 addition & 0 deletions src/screens/index.tsx
@@ -1 +1,2 @@
export * from './Login';
export * from './Home';
39 changes: 39 additions & 0 deletions src/ui/icons/Logo.tsx
@@ -0,0 +1,39 @@
import * as React from 'react';
import Svg, {SvgProps, Rect, Mask, G, Path} from 'react-native-svg';

export function Logo(props: SvgProps) {
return (
<Svg width={128} height={128} fill="none" {...props}>
<Rect
opacity={0.6}
x={8}
y={16}
width={112}
height={112}
rx={32}
fill="#fff"
/>
<Mask id="prefix__a" x={0} y={0} width={128} height={128}>
<Rect width={128} height={128} rx={32} fill="#fff" />
</Mask>
<G mask="url(#prefix__a)">
<Path fill="#fff" d="M0 0h128v128H0z" />
<Rect width={128} height={128} rx={32} fill="#fff" />
<Path
fill="#F45E6D"
d="M152.184 9.5l7.071 7.071-123.49 123.49-7.07-7.071z"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M56.332 85.045a2 2 0 002.827 0l76.685-76.647a4.78 4.78 0 016.757 0 4.772 4.772 0 010 6.751L61.107 96.602a4.78 4.78 0 01-7.08-.358L35.399 77.632a4.771 4.771 0 010-6.751 4.78 4.78 0 016.757 0l14.176 14.164z"
fill="#006CFF"
/>
<Path
fill="#61DEA4"
d="M133.184 46.5l7.071 7.071L23.776 170.05l-7.07-7.071z"
/>
</G>
</Svg>
);
}
15 changes: 15 additions & 0 deletions src/ui/icons/Plus.tsx
@@ -0,0 +1,15 @@
import * as React from 'react';
import Svg, {SvgProps, Path} from 'react-native-svg';

export function Plus(props: SvgProps) {
return (
<Svg width={24} height={24} fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M13 9a2 2 0 002 2h5a1 1 0 110 2h-5a2 2 0 00-2 2v5a1 1 0 11-2 0v-5a2 2 0 00-2-2H4a1 1 0 110-2h5a2 2 0 002-2V4a1 1 0 112 0v5z"
fill="#006CFF"
/>
</Svg>
);
}
16 changes: 16 additions & 0 deletions src/ui/icons/UnCheck.tsx
@@ -0,0 +1,16 @@
import * as React from 'react';
import Svg, {SvgProps, Path} from 'react-native-svg';

export function UnCheck(props: SvgProps) {
return (
<Svg width={28} height={28} fill="none" {...props}>
<Path
opacity={0.2}
fillRule="evenodd"
clipRule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2 0c0 6.627-5.373 12-12 12S2 20.627 2 14 7.373 2 14 2s12 5.373 12 12z"
fill="#252A31"
/>
</Svg>
);
}
3 changes: 3 additions & 0 deletions src/ui/icons/index.tsx
@@ -1 +1,4 @@
export * from './Check';
export * from './Logo';
export * from './UnCheck';
export * from './Plus';

0 comments on commit 96f2452

Please sign in to comment.