47 lines
2.3 KiB
TypeScript
47 lines
2.3 KiB
TypeScript
import {Appbar, Portal, Button, Dialog, Text, useTheme } from "react-native-paper";
|
|
import { View } from "react-native";
|
|
import styles from "@/assets/styles";
|
|
import React, {useState} from "react";
|
|
import Location from "@/components/Location";
|
|
|
|
|
|
interface BNProps {
|
|
isProfileActive: boolean;
|
|
}
|
|
const BottomNav: React.FC<BNProps> = ({ isProfileActive }) => {
|
|
const theme = useTheme();
|
|
const [menuVisible, setMenuVisible] = useState(false);
|
|
|
|
return (
|
|
<View style={ isProfileActive && { display: 'none' }}>
|
|
<View style={{ backgroundColor: theme.colors.background }}>
|
|
<Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
|
|
<View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
|
|
<Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text>
|
|
<Button
|
|
mode="text"
|
|
onPress={() => setMenuVisible(true) }
|
|
style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
|
|
labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
|
|
Change
|
|
</Button>
|
|
</View>
|
|
</Appbar.Header>
|
|
<Portal>
|
|
<Dialog visible={menuVisible} onDismiss={() => setMenuVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer, maxHeight: 400 }}>
|
|
<Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title>
|
|
<Location />
|
|
<Dialog.Actions style={{ justifyContent: "center" }}>
|
|
<Button onPress={() => setMenuVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
|
|
Close
|
|
</Button>
|
|
</Dialog.Actions>
|
|
</Dialog>
|
|
</Portal>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default BottomNav;
|