updated UI

unaisdev · Sep 30, 2023 · 4cb70cf · 4cb70cf
1 parent 7787318
commit 4cb70cf
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git a/app/screens/home/index.tsx b/app/screens/home/index.tsx
@@ -17,13 +17,13 @@ import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import {useBottomSheetContext} from '@app/containers/BottomSheetHomeContext';
 import BottomSheetUpdatedPlaylist from '@app/features/commons/components/BottomSheetFor';
 
-import {useHome} from './hooks';
 import PlaylistList from '../playlists-for-notify/components/PlaylistList';
 import BottomSheetFooter from '../playlists-for-notify/components/BottomSheetFooter';
 import BottomSheetContent from '../playlists-for-notify/components/BottomSheetContent';
 import {useNavigation} from '@react-navigation/native';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import {RootTabsParamList} from '@app/navigation';
+import {RootStackParamList, RootTabsParamList} from '@app/navigation';
+import {useProfile} from '../profile/hooks/useProfile';
 
 const UpdatedPlaylistImagesList = () => {
   const [displayIndex, setDisplayIndex] = useState(0);
@@ -78,17 +78,60 @@ const UpdatedPlaylistImagesList = () => {
 };
 
 const HomeScreen = () => {
+  const {userPlaylists} = useProfile();
   const tabNavigation =
     useNavigation<NativeStackNavigationProp<RootTabsParamList>>();
+  const screenNavigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   return (
-    <Layout style={{paddingHorizontal: 0, paddingVertical: 0}}>
+    <Layout style={{rowGap: 20}}>
+      <View
+        style={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+          gap: 6,
+        }}>
+        {userPlaylists.slice(0, 6).map((item, index) => {
+          return (
+            <View key={item.id} style={{width: '49%'}}>
+              <TouchableOpacity
+                style={{
+                  height: 50,
+                  backgroundColor: '#004D40',
+                  borderRadius: 6,
+                  overflow: 'hidden',
+                }}
+                onPress={() => {
+                  screenNavigation.navigate('Playlist', {id: item.id});
+                }}>
+                <View
+                  style={{
+                    flex: 1,
+                    columnGap: 12,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'flex-start',
+                  }}>
+                  <Image
+                    source={{uri: item.images[0].url}}
+                    style={{width: 50, height: 50}}
+                  />
+                  <Text style={{fontSize: 12, width: '60%'}} numberOfLines={2}>
+                    {item.name}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+          );
+        })}
+      </View>
       <TouchableOpacity
         style={{
           height: 60,
           backgroundColor: '#004D40',
-          borderRadius: 16,
-          margin: 12,
+          borderRadius: 12,
           overflow: 'hidden',
         }}
         onPress={() => {

diff --git a/app/screens/search/components/Categories/index.tsx b/app/screens/search/components/Categories/index.tsx
@@ -85,7 +85,7 @@ const Categories = () => {
     <Animated.FlatList
       ListHeaderComponent={props => {
         return (
-          <Text style={{marginBottom: 12,}} textType="bold">
+          <Text style={{marginBottom: 20}} textType="bold">
             Explora todo
           </Text>
         );
@@ -109,7 +109,7 @@ const Categories = () => {
 const styles = StyleSheet.create({
   categoriesContainer: {
     paddingHorizontal: 12,
-    paddingTop: 12,
+    paddingTop: 20,
     paddingBottom: 8,
     alignItems: 'center',
   },