:api added explore auto-complete feature

app/tabStyles/indexStyles.tsx

@@ -40,7 +40,105 @@ export default StyleSheet.create({
   filterSection: {
     width: "100%",
     height: 70,
-    backgroundColor: "hsl(221, 39%, 5%)",
     marginTop: 20,
   },
+  searchContainer: {
+    width: "90%",
+    height: 60,
+    marginHorizontal: "auto",
+    backgroundColor: "hsl(221, 39%, 8%)",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderRadius: 20,
+    paddingHorizontal: 20,
+
+    marginTop: 15,
+    borderWidth: 1.5,
+    borderColor: "hsl(221, 39%, 15%)",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  searchLabel: {
+    color: "hsl(221, 39%, 80%)",
+    fontSize: 18,
+    fontWeight: "500",
+  },
+  suggestionsSection: {
+    width: "90%",
+    height: "auto",
+    paddingBottom: 15,
+    borderRadius: 20,
+    backgroundColor: "hsl(221, 39%, 8%)",
+    borderWidth: 1.5,
+    borderColor: "hsl(221, 39%, 15%)",
+    marginHorizontal: "auto",
+    alignSelf: "center",
+    marginTop: 15,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  suggestionTitle: {
+    color: "hsl(0, 0%, 60%)",
+    fontSize: 14,
+    marginLeft: 15,
+    marginTop: 15,
+    fontWeight: "500",
+  },
+  suggestionContainer: {
+    marginTop: 15,
+    width: "100%",
+    height: 30,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    paddingHorizontal: 10,
+  },
+  imageContainer: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 1.5,
+    borderColor: "hsl(0, 0%, 90%)",
+  },
+  suggestionLabel: {
+    color: "white",
+    fontSize: 12,
+    fontWeight: "500",
+    marginLeft: 10,
+  },
+  tagContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "hsl(221, 39%, 8%)",
+    borderWidth: 1.5,
+    borderColor: "hsl(221, 39%, 15%)",
+    height: "auto",
+    width: "auto",
+    paddingVertical: 10,
+    borderRadius: 50,
+    marginTop: 15,
+    marginLeft: 20,
+
+    justifyContent: "space-between",
+  },
+  tagLabel: {
+    color: "hsl(0, 0%, 90%)",
+    fontSize: 14,
+    fontWeight: "500",
+    marginLeft: 15,
+    textAlign: "center",
+  },
 });