aswi2023one-team-to-rule-them-all-gitlab/src/components/toast/InfoToast.tsx @ 0733beb1

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 InfoToastProps {
    headerText?: string
    text: string
    onClose: () => void
}

export const InfoToast = (props: InfoToastProps) => {

    const { text, headerText, onClose } = props;

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