components toast.tsx

0% Statements 0/6

0% Branches 0/6

0% Functions 0/1

0% Lines 0/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { SuccessCheckmark } from './icons/success-checkmark';
import { Flex, Box, Text, color } from '@stacks/ui';
import React from 'react';
 
interface ToastProps {
  show?: boolean;
  icon?: React.FC;
}
 
export const Toast: React.FC<ToastProps> = ({
  show = false,
  icon: Icon = SuccessCheckmark,
  children,
}) => (
  <Flex
    p={6}
    width="100%"
    position="fixed"
    justifyContent="center"
    align="center"
    bottom={0}
    left={0}
    style={{ pointerEvents: 'none' }}
  >
    <Flex
      width={['100%', 'unset']}
      bg="white"
      boxShadow="mid"
      border="1px solid"
      borderColor="inherit"
      p={4}
      justifyContent="center"
      alignItems="center"
      borderRadius="6px"
      opacity={show ? 1 : 0}
      transform={show ? 'none' : 'translateY(20px)'}
      transition="150ms all"
    >
      <Box mr={1} color={color('feedback-success')}>
        <Icon />
      </Box>
      <Text fontSize="14px" fontWeight="medium">
        {children}
      </Text>
    </Flex>
  </Flex>
);