TopBar: Create topBar

App.tsx

@@ -3,6 +3,7 @@ import { View, StyleSheet } from 'react-native';
 import { ThemeProvider, useTheme } from './ThemeContext';
 import AppContent from './src/AppContent';
 import SideBar from './src/components/SideBar';
+import TopBar from './src/components/TopBar';
 
 const App: React.FC = () => {
   return (
@@ -18,7 +19,10 @@ const ThemedApp: React.FC = () => {
   return (
     <View style={[styles.container, { backgroundColor: theme.primary }]}>
       <SideBar />
-      <AppContent />
+      <View style={{ flex: 1 }}>
+        <TopBar />
+        <AppContent />
+      </View>
     </View>
   );
 };
@@ -28,6 +32,10 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
   },
+  appcontent: {
+    flex: 1,
+    flexDirection: 'column',
+  }
 });
 
 export default App;

package.json

@@ -16,6 +16,7 @@
     "react-native": "0.76.5",
     "react-native-asset": "^2.1.1",
     "react-native-url-polyfill": "^2.0.0",
+    "react-native-vector-icons": "^10.2.0",
     "react-native-windows": "0.76.0",
     "ytmusic_api_unofficial": "^2.0.8"
   },
@@ -31,6 +32,7 @@
     "@react-native/metro-config": "0.76.5",
     "@react-native/typescript-config": "0.76.5",
     "@types/react": "^18.2.6",
+    "@types/react-native-vector-icons": "^6.4.18",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",

src/components/SearchBar.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { useTheme } from '../../ThemeContext';
+import { searchBar } from '../style/Styles';
+
+const SearchBar: React.FC = () => {
+  const { theme } = useTheme();
+  const [query, setQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const searchMusic = async () => {
+    if (!query) return;
+
+    setIsLoading(true);
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 2000));
+    } catch {
+      setIsLoading(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <View style={[searchBar.searchBar, { backgroundColor: theme.secondary }]}>
+      <TextInput
+        style={[searchBar.searchInput, { backgroundColor: theme.third }]}
+        placeholder="Search"
+        value={query}
+        onChangeText={setQuery}
+        onSubmitEditing={searchMusic}
+        editable={!isLoading}
+      />
+      <TouchableOpacity style={[searchBar.searchIcon, { backgroundColor: theme.third }]} onPress={searchMusic} disabled={isLoading}>
+        {isLoading ? (
+          <Icon name="hourglass" size={20} color={theme.text} />
+        ) : (
+          <Icon name="search" size={20} color={theme.text} />
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default SearchBar;

src/components/TopBar.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import SearchBar from './SearchBar';
+import { TouchableOpacity } from 'react-native';
+import { searchBar } from '../style/Styles';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { useTheme } from '../../ThemeContext';
+
+const TopBar: React.FC = () => {
+  const { theme } = useTheme();
+  return (
+    <View style={styles.topBar}>
+      <SearchBar />
+      <TouchableOpacity style={[searchBar.searchIcon, { backgroundColor: theme.third }]}>
+          <Icon name="cog" size={20} color={theme.text} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+export default TopBar;

src/style/Styles.tsx

@@ -36,4 +36,33 @@ const page = StyleSheet.create({
     },
 });
 
-export { sidebar, page };
+const searchBar = StyleSheet.create({
+    searchBar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 30,
+      padding: 5,
+      flex: 1,
+      justifyContent: 'center',
+    },
+    searchInput: {
+      flex: 1,
+      height: 50,
+      borderRadius: 25,
+      paddingLeft: 10,
+      paddingRight: 10,
+      paddingTop: 12,
+      fontSize: 16,
+    },
+    searchIcon: {
+      width: 50,
+      height: 50,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 25,
+      marginLeft: 10,
+      cursor: 'pointer',
+    },
+  });
+
+export { sidebar, page, searchBar };

windows/EmberTune/EmberTune.vcxproj

@@ -163,6 +163,10 @@
     <ResourceCompile Include="EmberTune.rc" />
   </ItemGroup>
   <ItemGroup>
+    <Font Include="Assets\FontAwesome.ttf" />
+    <Font Include="Assets\FontAwesome6_Brands.ttf" />
+    <Font Include="Assets\FontAwesome6_Regular.ttf" />
+    <Font Include="Assets\FontAwesome6_Solid.ttf" />
     <Font Include="Assets\Fredoka-Bold.ttf" />
     <Font Include="Assets\Fredoka-Light.ttf" />
     <Font Include="Assets\Fredoka-Medium.ttf" />

windows/EmberTune/EmberTune.vcxproj.filters

@@ -79,5 +79,17 @@
     <Font Include="Assets\Fredoka-SemiBold.ttf">
       <Filter>Assets</Filter>
     </Font>
+    <Font Include="Assets\FontAwesome6_Brands.ttf">
+      <Filter>Assets</Filter>
+    </Font>
+    <Font Include="Assets\FontAwesome6_Regular.ttf">
+      <Filter>Assets</Filter>
+    </Font>
+    <Font Include="Assets\FontAwesome6_Solid.ttf">
+      <Filter>Assets</Filter>
+    </Font>
+    <Font Include="Assets\FontAwesome.ttf">
+      <Filter>Assets</Filter>
+    </Font>
   </ItemGroup>
 </Project>