feat(Screens): Home and Repos

src/screens/Home.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { TextInput, TouchableOpacity, View } from 'react-native';
+import Octicons from 'react-native-vector-icons/Octicons';
+import api from '../api';
+import UserList from '../components/List/UserList';
+import { commonStyle } from '../styles';
+import { User } from '../types/response';
+
+export default () => {
+    const [name, setName] = useState('');
+    const [data, setData] = useState<User[]>([]);
+    const fetchData = async () =>
+        await api.user.getAll(name).then(res => setData(res));
+
+    return (
+        <>
+            <View style={{ flexDirection: 'row', gap: 8, paddingHorizontal: 8 }}>
+                <TextInput placeholder="Type here to translate!"
+                    inputMode="text"
+                    style={commonStyle.textInput}
+                    onChange={(e) => { setName(e.nativeEvent.text); }}
+                />
+                <TouchableOpacity
+                    disabled={name.length === 0}
+                    onPress={fetchData}
+                    style={{
+                        backgroundColor: name.length === 0 ? '#46515B' : '#117F7F',
+                        borderRadius: 8,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        padding: 8
+                    }} >
+                    <Octicons name="search" color="#fff" size={20} />
+                </TouchableOpacity>
+            </View>
+            <UserList users={data} />
+        </>
+    );
+};

src/screens/Repositories.tsx

@@ -0,0 +1,41 @@
+import { useRoute } from '@react-navigation/native';
+import { useEffect, useState } from 'react';
+import { Image, View, VirtualizedList } from 'react-native';
+import api from '../api';
+import RepositoryCard from '../components/Card/RepositoryCard';
+import { commonStyle } from '../styles';
+import { Repository, User } from '../types/response';
+
+
+export default () => {
+    const route = useRoute();
+    const { user } = route.params as { user: User };
+    const [repositories, setRepositories] = useState<Repository[]>([]);
+
+    const getRepo = async () => await api.repo.getRepo(user.login).then((res) => setRepositories(res));
+
+    useEffect(() => {
+        getRepo();
+        return () => { };
+    }, [user.login]);
+
+    return (
+        <>
+            <View style={{
+                marginTop: 22,
+                justifyContent: 'center',
+                alignItems: 'center'
+            }}>
+                <Image source={{ uri: user.avatarUrl }} style={commonStyle.userImage} />
+            </View>
+            <VirtualizedList<Repository>
+                style={{ flex: 1, marginTop: 8 }}
+                data={repositories}
+                renderItem={({ item }) => <RepositoryCard repository={item} />}
+                keyExtractor={(item) => item.id}
+                getItemCount={(data) => data.length}
+                getItem={(data, index) => data[index]}
+            />
+        </>
+    );
+};