import React, { useState } from "react";
import {
StatusBar,
StyleSheet,
Image,
View,
ScrollView,
Text,
Pressable,
ImageBackground,
} from "react-native";
import {
Input,
Icon,
Datepicker as RNKDatepicker,
} from "@ui-kitten/components";
import ListingCard from "../components/ListingCard";
import { Padding, Color, Border, FontSize, FontFamily } from "../GlobalStyles";
const Homepage = () => {
const [checkinDatepicker, setCheckinDatepicker] = useState(undefined);
const [checkoutDatepicker, setCheckoutDatepicker] = useState(undefined);
return (
<View style={styles.homepage}>
<StatusBar barStyle="default" />
<View style={styles.appHeaderOld}>
<View style={[styles.headerContent, styles.headerLayout]}>
<Image
style={styles.logoIcon}
resizeMode="cover"
source={require("../assets/logo.png")}
/>
<View style={styles.bottomTabsFlexBox}>
<Image
style={[styles.alertsIcon, styles.iconLayout1]}
resizeMode="cover"
source={require("../assets/alerts.png")}
/>
<Image
style={styles.avatarIcon}
resizeMode="cover"
source={require("../assets/avatar.png")}
/>
</View>
</View>
</View>
<ScrollView
style={styles.scrollView}
showsVerticalScrollIndicator={true}
showsHorizontalScrollIndicator={true}
contentContainerStyle={styles.scrollViewScrollViewContent}
>
<ImageBackground
style={styles.searchSectionIcon}
resizeMode="cover"
source={require("../assets/searchsection.png")}
>
<View style={styles.mainTextContainer}>
<Text style={styles.mainTitle}>
<Text style={styles.findA}>{`Find a `}</Text>
<Text style={styles.host}>host</Text>
<Text style={styles.findA}> for every journey</Text>
</Text>
<Text style={styles.message}>
Discover the best local rental properties that fits your every
travel needs
</Text>
</View>
<View style={[styles.searchForm, styles.searchSpaceBlock]}>
<Input
style={[styles.accomodationInput, styles.dateContainerSpaceBlock]}
placeholder="Accommodation"
accessoryLeft={<Icon name="home-outline" pack="material" />}
placeholderTextColor="#171e1d"
textStyle={styles.accomodationInputTextInputText}
/>
<View style={[styles.dateContainer, styles.searchButtonFlexBox]}>
<RNKDatepicker
placeholder={() => (
<Text style={styles.checkinDatepickerPlaceHolder}>
Check-in
</Text>
)}
accessoryRight={
<Icon name="calendar-outline" pack="material" />
}
date={checkinDatepicker}
onSelect={setCheckinDatepicker}
status="basic"
controlStyle={styles.checkinDatepickerValue}
/>
<RNKDatepicker
placeholder={() => (
<Text style={styles.checkoutDatepickerPlaceHolder}>
Check-out
</Text>
)}
accessoryRight={
<Icon name="calendar-outline" pack="material" />
}
date={checkoutDatepicker}
onSelect={setCheckoutDatepicker}
controlStyle={styles.checkoutDatepickerValue}
/>
</View>
<Input
style={[styles.dateContainer, styles.searchButtonFlexBox]}
placeholder="Guest"
accessoryLeft={<Icon name="account-outline" pack="material" />}
placeholderTextColor="#171e1d"
textStyle={styles.guestInputTextInputText}
/>
<Pressable
style={[styles.searchButton, styles.searchButtonFlexBox]}
>
<Image
style={styles.iconsearch}
resizeMode="cover"
source={require("../assets/iconsearch.png")}
/>
<Text style={[styles.button, styles.buttonTypo]}>Search</Text>
</Pressable>
</View>
</ImageBackground>
<View style={[styles.searchResultsHeader, styles.layoutBoxFlexBox]}>
<View style={styles.bottomTabsFlexBox}>
<Text style={styles.staysNearby}>Stays nearby:</Text>
<Text style={[styles.torontoOntario, styles.button1Typo]}>
Toronto Ontario
</Text>
</View>
<View style={[styles.layoutBox, styles.layoutBoxFlexBox]}>
<Image
style={[styles.gridIcon, styles.iconLayout1]}
resizeMode="cover"
source={require("../assets/grid-icon.png")}
/>
<Image
style={[styles.scrollIcon, styles.iconLayout1]}
resizeMode="cover"
source={require("../assets/scroll-icon.png")}
/>
</View>
</View>
<View style={[styles.searchReulstsGrid, styles.searchFlexBox]}>
<View style={styles.headerLayout}>
<ListingCard
image={require("../assets/image.png")}
listingTitle="Brightwoods Cabin"
listingSubtitle="Bridlepath, Ontario, Canada"
rating="4.9"
price="$658"
icon={require("../assets/icon.png")}
/>
<ListingCard
image={require("../assets/image1.png")}
listingTitle="Unionville Lodge"
listingSubtitle="Markham, Ontario Canada"
rating="4.6"
price="$485"
icon={require("../assets/icon.png")}
/>
<ListingCard
image={require("../assets/image2.png")}
listingTitle="Urban Loft"
listingSubtitle="c"
rating="4.5"
price="$410"
icon={require("../assets/icon1.png")}
/>
<ListingCard
image={require("../assets/image3.png")}
listingTitle="Forestville Cottages"
listingSubtitle="Simcoe, Ontario Canada"
rating="5.0"
price="$325"
icon={require("../assets/icon1.png")}
/>
<ListingCard
image={require("../assets/image4.png")}
listingTitle="Missisuaga Aistream"
listingSubtitle="Missisauga, Ontario, Canada"
rating="4.8"
price="$502"
icon={require("../assets/icon1.png")}
/>
</View>
<Pressable
style={[styles.searchFlightsButton, styles.searchSpaceBlock]}
>
<Text style={[styles.button1, styles.button1Typo]}>Show more</Text>
</Pressable>
</View>
</ScrollView>
<View style={styles.bottomContainer}>
<View style={styles.shadowBox} />
</View>
</View>
);
};
const styles = StyleSheet.create({
accomodationInputTextInputText: {
fontWeight: "600",
fontFamily: "Archivo",
color: "#171e1d",
},
checkinDatepickerPlaceHolder: {
fontWeight: "600",
fontFamily: "Archivo",
color: "#171e1d",
fontSize: 14,
},
checkinDatepickerValue: {},
checkoutDatepickerPlaceHolder: {
fontWeight: "600",
fontFamily: "Archivo",
color: "#171e1d",
fontSize: 14,
},
checkoutDatepickerValue: {},
guestInputTextInputText: {
fontWeight: "600",
fontFamily: "Archivo",
color: "#171e1d",
},
scrollViewScrollViewContent: {
flexDirection: "column",
paddingBottom: 20,
alignItems: "center",
justifyContent: "flex-start",
},
headerLayout: {
maxWidth: 1280,
width: "100%",
},
iconLayout1: {
width: 20,
height: 20,
},
searchSpaceBlock: {
marginTop: 22,
justifyContent: "center",
borderStyle: "solid",
},
dateContainerSpaceBlock: {
paddingVertical: Padding.p_5xs,
paddingHorizontal: Padding.p_2xs,
backgroundColor: Color.lightBg,
},
searchButtonFlexBox: {
marginTop: 6,
borderRadius: Border.br_7xs,
flexDirection: "row",
alignSelf: "stretch",
alignItems: "center",
},
buttonTypo: {
textAlign: "center",
lineHeight: 26,
letterSpacing: 0,
fontSize: FontSize.size_base,
},
layoutBoxFlexBox: {
paddingVertical: Padding.p_8xs,
flexDirection: "row",
alignItems: "center",
},
button1Typo: {
fontWeight: "600",
fontFamily: FontFamily.archivo,
},
searchFlexBox: {
justifyContent: "center",
paddingHorizontal: Padding.p_xl,
},
searchFormShadowBox: {
shadowOpacity: 1,
shadowOffset: {
width: 0,
height: 6,
},
alignSelf: "stretch",
},
iconLayout: {
height: 24,
width: 24,
},
searchTypo: {
color: Color.colorLightslategray,
fontFamily: FontFamily.roboto,
fontSize: FontSize.size_smi,
textAlign: "center",
},
logoIcon: {
width: 100,
height: 26,
},
alertsIcon: {
overflow: "hidden",
height: 20,
},
avatarIcon: {
width: 26,
marginLeft: 20,
height: 26,
},
bottomTabsFlexBox: {
flexDirection: "row",
alignItems: "center",
},
headerContent: {
justifyContent: "space-between",
flexDirection: "row",
alignItems: "center",
},
appHeaderOld: {
borderBottomWidth: 1,
paddingVertical: Padding.p_sm,
paddingHorizontal: Padding.p_xl,
borderColor: Color.lightGreyBorder,
borderStyle: "solid",
backgroundColor: Color.white,
alignSelf: "stretch",
alignItems: "center",
},
findA: {
color: Color.lightLabelPrimary,
},
host: {
color: Color.accent,
},
mainTitle: {
fontSize: 20,
lineHeight: 22,
fontWeight: "700",
textAlign: "left",
fontFamily: FontFamily.archivo,
alignSelf: "stretch",
},
message: {
fontSize: FontSize.size_mini,
lineHeight: 23,
fontWeight: "300",
marginTop: 8,
color: Color.lightLabelPrimary,
textAlign: "left",
fontFamily: FontFamily.archivo,
alignSelf: "stretch",
},
mainTextContainer: {
alignSelf: "stretch",
},
accomodationInput: {
borderRadius: Border.br_7xs,
flexDirection: "row",
alignItems: "center",
alignSelf: "stretch",
},
dateContainer: {
paddingVertical: Padding.p_5xs,
paddingHorizontal: Padding.p_2xs,
backgroundColor: Color.lightBg,
},
iconsearch: {
width: 19,
height: 19,
overflow: "hidden",
},
button: {
fontWeight: "500",
color: Color.white,
marginLeft: 9,
fontFamily: FontFamily.archivo,
},
searchButton: {
backgroundColor: Color.accent,
height: 35,
paddingVertical: 13,
justifyContent: "center",
paddingHorizontal: Padding.p_xl,
overflow: "hidden",
},
searchForm: {
borderRadius: Border.br_3xs,
shadowColor: "rgba(0, 0, 0, 0.02)",
shadowRadius: 12,
elevation: 12,
paddingHorizontal: 12,
paddingVertical: Padding.p_3xs,
borderWidth: 0.7,
borderColor: Color.lightGreyBorder,
backgroundColor: Color.white,
shadowOpacity: 1,
shadowOffset: {
width: 0,
height: 6,
},
alignSelf: "stretch",
},
searchSectionIcon: {
padding: Padding.p_sm,
alignSelf: "stretch",
alignItems: "center",
},
staysNearby: {
fontSize: FontSize.size_sm,
letterSpacing: 0.3,
lineHeight: 17,
color: Color.lightLabelPrimary,
textAlign: "left",
fontFamily: FontFamily.archivo,
},
torontoOntario: {
fontSize: FontSize.size_xs,
letterSpacing: 0.2,
lineHeight: 14,
marginLeft: 4,
color: Color.lightLabelPrimary,
textAlign: "left",
},
gridIcon: {
borderRadius: Border.br_7xs,
height: 20,
},
scrollIcon: {
marginLeft: 5,
height: 20,
},
layoutBox: {
borderRadius: 9,
paddingHorizontal: Padding.p_7xs,
borderWidth: 0.7,
borderColor: Color.lightGreyBorder,
backgroundColor: Color.white,
borderStyle: "solid",
paddingVertical: Padding.p_8xs,
},
searchResultsHeader: {
maxWidth: 1280,
width: "100%",
justifyContent: "space-between",
paddingHorizontal: Padding.p_xl,
},
button1: {
textAlign: "center",
lineHeight: 26,
letterSpacing: 0,
fontSize: FontSize.size_base,
color: Color.accent,
},
searchFlightsButton: {
borderColor: Color.accent,
borderWidth: 1,
width: 148,
paddingVertical: Padding.p_2xs,
borderRadius: Border.br_7xs,
overflow: "hidden",
flexDirection: "row",
alignItems: "center",
paddingHorizontal: Padding.p_xl,
},
searchReulstsGrid: {
width: 346,
paddingVertical: Padding.p_3xs,
alignItems: "center",
},
scrollView: {
backgroundColor: "#f8f9fb",
overflow: "hidden",
alignSelf: "stretch",
flex: 1,
},
shadowBox: {
position: "absolute",
top: -20,
left: 23,
backgroundColor: "rgba(0, 0, 0, 0.3)",
width: 305,
zIndex: 0,
overflow: "hidden",
height: 20,
},
bottomContainer: {
alignSelf: "stretch",
alignItems: "center",
},
homepage: {
backgroundColor: Color.colorGray_100,
alignItems: "center",
width: "100%",
flex: 1,
},
});
export default Homepage;