aswi2023one-team-to-rule-them-all-gitlab/src/components/toast/ErrorToast.tsx @ f220395e

import React from 'react';
import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon, useToast, Alert, IconButton, CloseIcon, Spacer } from "native-base";


interface ErrorToastProps {
    headerText?: string
    text: string
    onClose: () => void
}

export const ErrorToast = (props: ErrorToastProps) => {

    const { text, headerText, onClose } = props;

    return (
        <Alert
            alignSelf="center"
            flexDirection="row"
            variant="outline"
            status="warning"
            backgroundColor={"error.50"}
        >
            <VStack>
                <HStack space={2} flexShrink={1} alignItems="center">
                    <Alert.Icon size="xs" />
                    {headerText ?
                        <Text fontSize="sm" fontWeight="medium" color="error.700">
                            {headerText}
                        </Text> :
                        <Text fontSize="xs" color="error.500">
                            {text}
                        </Text>}
                    <Spacer />
                    <IconButton
                        variant="unstyled"
                        icon={<CloseIcon size="3" color="error.500" />}
                        onPress={() => {
                            onClose();
                        }}
                    />
                </HStack>
                {headerText &&
                    <Text fontSize="xs" color="error.500">
                        {text}
                    </Text>}
            </VStack>
        </Alert>
    )
}