Enhance Queued component layout and styling; update TimeRange item height for consistency

Author: ngocdevv

src/components/queued/index.tsx

@@ -1,11 +1,70 @@
-import { View } from "react-native"
+import { Text, View } from "react-native"
 
 
 
 export const Queued = () => {
     return (
-        <View sty>
-
-        </View>
+        <>
+            <View style={{
+                backgroundColor: "#00655C",
+                height: 60,
+                borderRadius: 24,
+                marginHorizontal: 16,
+                marginTop: 16,
+                paddingVertical: 12,
+                paddingHorizontal: 16,
+                flexDirection: "row",
+                justifyContent: "space-between",
+            }}>
+                <View>
+                    <Text style={{
+                        color: "#fff",
+                        fontSize: 14,
+                        fontFamily: 'SF-Pro-Rounded-Bold',
+                    }}>
+                        Landing page 1
+                    </Text>
+                    <Text style={{
+                        color: "#fff",
+                        fontSize: 12,
+                        marginTop: 4
+                    }}>
+                        For Chris
+                    </Text>
+                </View>
+                <View style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    backgroundColor: "#fff",
+                    borderRadius: 40,
+                    paddingVertical: 4,
+                    paddingHorizontal: 12,
+                    columnGap: 4
+                }}>
+                    <View style={{
+                        width: 7,
+                        height: 7,
+                        borderRadius: 7,
+                        backgroundColor: "#FFDA50",
+                    }} />
+                    <Text style={{
+                        color: "#000",
+                        fontSize: 14,
+                        marginLeft: 4,
+                        fontWeight: "500"
+                    }}>Queued</Text>
+                </View>
+            </View>
+            <Text style={{
+                color: "#fff",
+                fontSize: 14,
+                fontFamily: 'SF-Pro-Rounded-Bold',
+                marginHorizontal: 16,
+                marginTop: 12,
+                textAlign: "center"
+            }}>
+                Adjust project time target
+            </Text>
+        </>
     )
 }

src/components/time-range/index.tsx

@@ -15,7 +15,7 @@ type TimeRangeProps = {
 };
 
 const SCALE_FACTOR = 2.5;
-const ITEM_HEIGHT = 30 * SCALE_FACTOR; // Height of each time item in pixels
+const ITEM_HEIGHT = 36 * SCALE_FACTOR; // Height of each time item in pixels
 const TimeRangeHeight = ITEM_HEIGHT; // Visible area shows a single time option
 const ArrowWrapperHeight = 24 * SCALE_FACTOR;
 const ArrowIconSize = 10 * SCALE_FACTOR;