[IW-31]: Main page + navigation bar

frontend/.eslintrc.cjs

@@ -10,12 +10,14 @@ module.exports = {
       jsx: true,
     },
   },
-  extends: [
-    'expo',
-    'prettier',
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-  ],
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: './tsconfig.json',
+      },
+    },
+  },
+  extends: ['expo', 'prettier', 'eslint:recommended', 'plugin:@typescript-eslint/recommended'],
   plugins: ['prettier', '@typescript-eslint'],
   rules: {
     'prettier/prettier': 'error',

frontend/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

frontend/app.json

@@ -32,7 +32,9 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
-      ]
+      ],
+      "expo-font",
+      "expo-web-browser"
     ],
     "experiments": {
       "typedRoutes": true

frontend/app/(tabs)/_layout.tsx

@@ -1,45 +1,56 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { Platform } from 'react-native';
+import { Tabs } from 'expo-router';
+import { House, Search, List, Bookmark, LucideIcon } from 'lucide-react-native';
+import { BottomNavTabNameEnum, BottomNavTabName } from '@/types/bottom-nav-tab-enum';
+import BottomNavTab, { BottomNavTabProps } from '@/components/tabs/BottomNavTab';
 
-import { HapticTab } from '@/components/HapticTab';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import TabBarBackground from '@/components/ui/TabBarBackground';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
+const TABS: { name: BottomNavTabName; icon: LucideIcon }[] = [
+  { name: BottomNavTabNameEnum.HOME, icon: House },
+  { name: BottomNavTabNameEnum.SEARCH, icon: Search },
+  { name: BottomNavTabNameEnum.QUEUE, icon: List },
+  { name: BottomNavTabNameEnum.DOWNLOADS, icon: Bookmark },
+];
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  const [selectedTab, setSelectedTab] = useState<BottomNavTabName>(BottomNavTabNameEnum.HOME);
+
+  const renderTabButton = useCallback(
+    (name: BottomNavTabName, icon: LucideIcon) =>
+      // eslint-disable-next-line
+      (props: Omit<BottomNavTabProps, 'isSelected' | 'onTabPress' | 'icon'>) => (
+        <BottomNavTab
+          {...props}
+          icon={icon}
+          isSelected={selectedTab === name}
+          onTabPress={() => setSelectedTab(name)}
+        />
+      ),
+    [selectedTab],
+  );
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
         headerShown: false,
-        tabBarButton: HapticTab,
-        tabBarBackground: TabBarBackground,
         tabBarStyle: Platform.select({
-          ios: {
-            // Use a transparent background on iOS to show the blur effect
-            position: 'absolute',
+          ios: { position: 'absolute' },
+          default: {
+            minHeight: 60,
+
+            borderTopWidth: 0,
           },
-          default: {},
         }),
       }}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
-        }}
-      />
+      {TABS.map(({ name, icon }) => (
+        <Tabs.Screen
+          key={name}
+          name={name}
+          options={{
+            tabBarButton: renderTabButton(name, icon),
+          }}
+        />
+      ))}
     </Tabs>
   );
 }

frontend/app/(tabs)/downloads.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import global from '@/styles/global';
+import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
+
+const HomeScreen = () => {
+  return (
+    <SafeAreaView style={global['safe-area-container']}>
+      <View style={styles.container}>
+        <Text style={styles.text}>Downloads</Text>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#FFFFFF',
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+});
+
+export default HomeScreen;

frontend/app/(tabs)/index.tsx

@@ -1,74 +1,60 @@
-import { Image, StyleSheet, Platform } from 'react-native';
+import Colors from '@/constants/colors';
+import Typography from '@/constants/typography';
+import React from 'react';
+import global from '@/styles/global';
+import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
+import TileGrid from '@/components/home/tile-grid';
+import { mockPlaylists, mockSongs } from '@/components/home/mock-data';
+import SongTile from '@/components/tiles/song-tile';
+import PlaylistTile from '@/components/tiles/playlist-tile';
 
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-export default function HomeScreen() {
+const HomeScreen = () => {
   return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/partial-react-logo.png')}
-          style={styles.reactLogo}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{' '}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({
-              ios: 'cmd + d',
-              android: 'cmd + m',
-              web: 'F12',
-            })}
-          </ThemedText>{' '}
-          to open developer tools.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-        <ThemedText>
-          Tap the Explore tab to learn more about what's included in this starter app.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          When you're ready, run{' '}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
+    <SafeAreaView style={global['safe-area-container']}>
+      <View style={styles.container}>
+        <View style={styles.logoContainer}>
+          <Text style={styles.logoText}>&lt;LOGO SOON&gt;</Text>
+        </View>
+        <TileGrid tiles={mockSongs} tileComponent={SongTile} columns={2} />
+        <View style={styles.recentPlaylistsContianer}>
+          <Text style={styles.recentPlaylistsText}>Recently played playlists:</Text>
+        </View>
+        <TileGrid tiles={mockPlaylists} tileComponent={PlaylistTile} columns={1} />
+      </View>
+    </SafeAreaView>
   );
-}
+};
 
 const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
+  container: {
+    flexDirection: 'column',
+    gap: 13,
+  },
+  logoContainer: {
     alignItems: 'center',
-    gap: 8,
+    justifyContent: 'center',
+    backgroundColor: Colors.quartz,
+    minHeight: 73,
+    borderRadius: 8,
   },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8,
+  logoText: {
+    alignSelf: 'center',
+    color: Colors.black,
+    ...Typography['font-bold'],
+    ...Typography['text-xl'],
   },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
+  recentPlaylistsContianer: {
+    minHeight: 45,
+    borderRadius: 8,
+    backgroundColor: Colors.quartz,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  recentPlaylistsText: {
+    color: Colors.black,
+    ...Typography['font-bold'],
+    ...Typography['text-md'],
   },
 });
+
+export default HomeScreen;