1import { Button, Divider, Heading, Row, Spacer, View, XIcon } from 'expo-dev-client-components';
2import * as React from 'react';
3
4import { useModalStack } from '../providers/ModalStackProvider';
5
6type BaseModalProps = {
7  title?: string;
8  children: React.ReactNode;
9};
10
11export function BaseModal({ children, title }: BaseModalProps) {
12  const modalStack = useModalStack();
13
14  const onClosePress = () => {
15    modalStack.pop();
16  };
17
18  return (
19    <View bg="default" rounded="large" shadow="medium" mx="small">
20      <View padding="medium">
21        <Row align="center" bg="default">
22          <View>
23            <Heading>{title}</Heading>
24          </View>
25          <Spacer.Horizontal />
26
27          <View style={{ transform: [{ translateX: 6 }, { translateY: -3 }] }}>
28            <Button.FadeOnPressContainer bg="default" rounded="full" onPress={onClosePress}>
29              <View padding="tiny" rounded="full" bg="default">
30                <XIcon />
31              </View>
32            </Button.FadeOnPressContainer>
33          </View>
34        </Row>
35      </View>
36
37      <Divider />
38
39      <View padding="medium">{children}</View>
40    </View>
41  );
42}
43