Add Header and Queued components

Author: ngocdevv

App.tsx

@@ -6,6 +6,8 @@ import { useSharedValue } from 'react-native-reanimated';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { BottomTab } from './src/components/bottom-tab';
 import { CircularDraggableSlider, CircularDraggableSliderRefType } from './src/components/circle-time';
+import { Header } from "./src/components/header";
+import { Queued } from "./src/components/queued";
 import { TimeRange } from './src/components/time-range';
 
 const LinesAmount = 200;
@@ -16,12 +18,13 @@ export default function App() {
 
   const circularSliderRef = useRef<CircularDraggableSliderRefType>(null);
   const selectedDuration = useSharedValue(1);
-
   return (
     <SafeAreaProvider>
       <FontsProvider>
         <GestureHandlerRootView style={styles.fill}>
-          <View style={{ flex: 1 }}>
+          <View style={[styles.fill]}>
+            <Header />
+            <Queued />
             <View style={styles.container}>
               <CircularDraggableSlider
                 ref={circularSliderRef}
@@ -75,7 +78,8 @@ const FontsProvider = ({ children }: { children: React.ReactNode }) => {
 
 const styles = StyleSheet.create({
   fill: {
-    flex: 1
+    flex: 1,
+    backgroundColor: '#000',
   },
   button: {
     alignItems: 'center',

assets/images/avatar.jpg

@@ -0,0 +1,54 @@
+import { FontAwesome } from "@expo/vector-icons";
+import { Image, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+
+
+export const Header = () => {
+    const { top } = useSafeAreaInsets()
+    return <View style={{
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginTop: top,
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: "#374151",
+    }}>
+        <Text style={{
+            color: "#fff",
+            fontSize: 16,
+            fontWeight: "600",
+            fontFamily: 'SF-Pro-Rounded-Bold',
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: 18,
+            textAlign: "center"
+        }}>Landing page 1</Text>
+        <View style={{
+            alignItems: "center",
+            flexDirection: "row",
+            columnGap: 6
+        }}>
+            <Image source={require("../../../assets/images/avatar.jpg")} style={{
+                width: 32,
+                height: 32,
+                borderRadius: 20,
+            }} />
+            <FontAwesome name="chevron-down" size={14} color="#424446" />
+
+        </View>
+        <View style={{
+            width: 32,
+            height: 32,
+            borderRadius: 12,
+            backgroundColor: "#42444670",
+            justifyContent: "center",
+            alignItems: "center",
+        }}>
+            <FontAwesome name="bell" size={14} color="#63666aff" />
+        </View>
+
+    </View>;
+};

src/components/header/index.tsx

@@ -0,0 +1,11 @@
+import { View } from "react-native"
+
+
+
+export const Queued = () => {
+    return (
+        <View sty>
+
+        </View>
+    )
+}