1import { View, Text, WarningIcon, Row, Spacer, Heading } from 'expo-dev-client-components';
2import * as React from 'react';
3
4function ErrorToast({ children }) {
5  return (
6    <View mx="large">
7      <View bg="error" padding="medium" rounded="medium" border="error">
8        <View>
9          <Text color="error" numberOfLines={4}>
10            {children}
11          </Text>
12        </View>
13      </View>
14    </View>
15  );
16}
17
18function WarningToast({ children }) {
19  return (
20    <View mx="large">
21      <View bg="warning" padding="medium" rounded="medium" border="warning">
22        <Row align="center">
23          <WarningIcon />
24
25          <Spacer.Horizontal size="tiny" />
26
27          <Heading color="warning" size="small" style={{ top: 1 }}>
28            Warning
29          </Heading>
30        </Row>
31
32        <Spacer.Vertical size="small" />
33
34        <View>
35          <Text size="small" color="warning">
36            {children}
37          </Text>
38        </View>
39      </View>
40    </View>
41  );
42}
43
44function InfoToast({ children }) {
45  return (
46    <View mx="large">
47      <View bg="default" padding="medium" rounded="medium" border="default">
48        <View>
49          <Text color="default">{children}</Text>
50        </View>
51      </View>
52    </View>
53  );
54}
55
56export const Toasts = {
57  Error: ErrorToast,
58  Warning: WarningToast,
59  Info: InfoToast,
60};
61