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.ScaleOnPressContainer
29              bg="default"
30              rounded="full"
31              onPress={onClosePress}
32              minScale={0.85}>
33              <View padding="tiny" rounded="full" bg="default">
34                <XIcon />
35              </View>
36            </Button.ScaleOnPressContainer>
37          </View>
38        </Row>
39      </View>
40
41      <Divider />
42
43      <View padding="medium">{children}</View>
44    </View>
45  );
46}
47