aswi2023one-team-to-rule-them-all-gitlab/src/components/listView/ItemPreviewMissingImage.tsx @ a6999074

import { Box, Center, Text, VStack } from "native-base"
import { useEffect, useState } from "react"
import { log } from "../../logging/logger"

interface ItemPreviewMissingImageProps {
    inventoryLabel: string
    w?: number
    h?: number
}

const DEFAULT_W = 65
const DEFAULT_H = 65

export const ItemPreviewMissingImage = (props: ItemPreviewMissingImageProps) => {
    const [firstPart, setFirstPart] = useState("")
    const [secondPart, setSecondPart] = useState("")

    useEffect(() => {
        setFirstPart(props.inventoryLabel.slice(0, props.inventoryLabel.indexOf(" ")))
        setSecondPart(props.inventoryLabel.slice(props.inventoryLabel.indexOf(" ") + 1))
        log.debug("ItemPreviewMissingImage", "inventoryLabel", props.inventoryLabel)
        log.debug("ItemPreviewMissingImage", "firstPart", firstPart)
        log.debug("ItemPreviewMissingImage", "secondPart", secondPart)
    }, [props.inventoryLabel])

    return (
        <Center>
            <Box
                bg="primary.100"
                w={props.w ? props.w : DEFAULT_W}
                h={props.h ? props.h : DEFAULT_H}
                borderColor={"primary.700"}
                borderWidth={4}
                alignItems="center"
                justifyContent="center"
            >
                <VStack space={0}>
                    <Text
                        fontSize="sm"
                        color="black"
                        textAlign={"center"}
                        bold
                        noOfLines={1}
                    >
                        { firstPart }
                    </Text>
                    <Text
                        fontSize="xs"
                        color="black"
                        textAlign={"center"}
                    >
                        { secondPart }
                    </Text>
                </VStack>
            </Box>
        </Center>
    )
}