pogdark-app/components/Dialogs.tsx

import React from "react";
import { Portal, Button, Dialog, useTheme } from "react-native-paper";
import About from "@/components/About";
import Privacy from "@/components/Privacy";
import Broken from "@/components/Broken";
import Location from "@/components/Location";

interface DialogsProps {
    aboutVisible: boolean;
    privacyVisible: boolean;
    bugVisible: boolean;
    locationVisible: boolean;
    toggleAbout: () => void;
    togglePrivacy: () => void;
    toggleBug: () => void;
    toggleLocation: () => void;
}

const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisible, locationVisible, toggleAbout, togglePrivacy, toggleBug, toggleLocation }) => {
    const theme = useTheme();
    return (
        <Portal>
            <Dialog visible={aboutVisible} onDismiss={() => toggleAbout()}
                    style={{backgroundColor: theme.colors.primaryContainer}}>
                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>About Us</Dialog.Title>
                <About/>
                <Dialog.Actions style={{justifyContent: "center"}}>
                    <Button onPress={() => toggleAbout()} mode="contained"
                            style={{backgroundColor: theme.colors.inversePrimary}}
                            labelStyle={{color: theme.colors.primary}}>
                        Close
                    </Button>
                </Dialog.Actions>
            </Dialog>
            <Dialog visible={privacyVisible} onDismiss={() => togglePrivacy()}
                    style={{backgroundColor: theme.colors.primaryContainer}}>
                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Privacy Policy</Dialog.Title>
                <Privacy/>
                <Dialog.Actions style={{justifyContent: "center"}}>
                    <Button onPress={() => togglePrivacy()} mode="contained"
                            style={{backgroundColor: theme.colors.inversePrimary}}
                            labelStyle={{color: theme.colors.primary}}>
                        Close
                    </Button>
                </Dialog.Actions>
            </Dialog>
            <Dialog visible={bugVisible} onDismiss={() => toggleBug()}
                    style={{backgroundColor: theme.colors.primaryContainer}}>
                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Report A Bug</Dialog.Title>
                <Broken/>
                <Dialog.Actions style={{justifyContent: "center"}}>
                    <Button onPress={() => toggleBug()} mode="contained"
                            style={{backgroundColor: theme.colors.inversePrimary}}
                            labelStyle={{color: theme.colors.primary}}>
                        Close
                    </Button>
                </Dialog.Actions>
            </Dialog>
            <Dialog visible={locationVisible} onDismiss={() => toggleLocation()}
                    style={{backgroundColor: theme.colors.primaryContainer}}>
                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Location</Dialog.Title>
                <Location />
                <Dialog.Actions style={{justifyContent: "center"}}>
                    <Button onPress={() => toggleLocation()} mode="contained"
                            style={{backgroundColor: theme.colors.inversePrimary}}
                            labelStyle={{color: theme.colors.primary}}>
                        Close
                    </Button>
                </Dialog.Actions>
            </Dialog>
        </Portal>
    )
}

export default Dialogs;