Search Services around you button

import { FontAwesome5 } from "@expo/vector-icons";

import { TouchableOpacity } from "react-native-gesture-handler";

import { LinearGradient } from "expo-linear-gradient";

import { CustomText } from "../../../components/mini/text";

import { View } from "../../../components/Themed";

import Colors from "../../../constants/Colors";

import { windowWidth } from "../../../constants/Layout";

import sizes from "../../../constants/sizes";

import useColorScheme from "../../../hooks/useColorScheme";

const SearchServicesAroundYouButton: React.FC<{

onPress: () => void;

}> = ({ onPress }) => {

const colorScheme = useColorScheme();

return (

<TouchableOpacity onPress={onPress}>

<LinearGradient

colors={[Colors[colorScheme].accent, Colors[colorScheme].primary]}

style={{

borderRadius: sizes.radius.sm / 2,

width: windowWidth / 1.01,

height: windowWidth / 9.8,

justifyContent: "center",

alignItems: "center",

marginBottom: sizes.margin.bs * 2,

}}

>

<View

style={{

backgroundColor: Colors[colorScheme].background,

borderRadius: sizes.radius.sm / 2,

width: windowWidth / 1.02,

height: windowWidth / 10,

justifyContent: "center",

alignItems: "center",

flexDirection: "row",

}}

>

<FontAwesome5

name="search-location"

size={windowWidth / 17}

color={Colors[colorScheme].accent}

style={{

marginRight: sizes.margin.bs * 3,

}}

/>

<CustomText fontSize={sizes.font.xs / 1.1}>

Search services around you

</CustomText>

</View>

</LinearGradient>

</TouchableOpacity>

);

};

export default SearchServicesAroundYouButton;