aswi2023one-team-to-rule-them-all-gitlab/src/components/listView/ItemPreview.tsx @ a62d7c92

import { Box, Center, HStack, Image, Pressable, ScrollView, Text, VStack } from "native-base"
import { useEffect } from "react"
import { DrawerScreenProps } from "@react-navigation/drawer"
import { RootStackParamList } from "../../pages/Navigation"
import { ItemPreviewMissingImage } from "./ItemPreviewMissingImage"
import { ITEM_PREVIEW_IMG_PREFIX_URL } from "../../api/constants"

interface ItemPreviewProps {
    caption: string
    title: string
    name?: string
    image?: string
    itemId: string
    inventoryLabel: string
    navigation: any
}

const ItemPreview = (props: ItemPreviewProps) => {

    return (
        <>
            <Pressable
                onPress={() => props.navigation.navigate("Item", {itemId: props.itemId})}
                key={props.itemId}
            >
                <HStack
                    space={ 2 }
                    flex={ 1 }
                    alignItems={ "flex-start" }
                    key={props.itemId}
                >
                    {props.image ? (
                    <Image
                        source={ {uri: `${ITEM_PREVIEW_IMG_PREFIX_URL}${props.image}`} }
                        size={ "sm" }
                        alt={ props.image }
                    />
                    ) : (
                        <ItemPreviewMissingImage inventoryLabel={props.inventoryLabel} h={65} w={65} />
                    )}
                    <VStack h={70} maxW={"80%"}>
                        <Text fontSize={"sm"} italic>{ props.name }</Text>
                        <Text fontSize={"sm"} bold noOfLines={1}>{ props.caption }</Text>
                        <Text fontSize={"2xs"} lineHeight={"2xs"} noOfLines={2}>{ props.title }</Text>
                    </VStack>
                </HStack>
            </Pressable>
        </>
    )
}

export default ItemPreview