cardBoat

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

cardBoat
import { Box, Flex, HStack, Text, VStack, useBreakpointValue, Image } from "@chakra-ui/react";
interface CardBoatProps {
 id?: string;
 image: string;
 imageDetails1: string;
 imageDetails2: string;
 imageDetails3: string;
 title: string;
 subtitle: string;
 year: string;
 cabins: string;
 quantityCabins: string;
 price: string;
 onClick?: () => void;
}
export default function CardBoat({id, onClick, image, imageDetails1, imageDetails2, imageDetails3, title, subtitle, year, cabins, quantityCabins, price} : CardBoatProps){
 
 const isWideVersion = useBreakpointValue({
 base: false,
 lg: true,
 })
 return(
 <HStack mt="3" h={60} w={'100%'} onClick={onClick} cursor='pointer' id={id} key={id}>
 <HStack w='60%' h={60} bg='red'>
 <Image
 src={image}
 alt=""
 objectFit="fill"
 width="100%"
 height="100%"
 /> 
 </HStack> 
 <HStack bg='white' w='40%' h={60} justifyContent='center' alignItems='center'>
 <VStack bg='white' w={isWideVersion ? '40%' : '30%'} h='100%'>
 <Flex
 w={'100%'}
 h={'33%'}
 align={'center'}
 justify={'center'}
 backgroundImage={imageDetails1}
 backgroundSize="cover"
 flexDir="column"
 ></Flex>
 <Flex
 w={'100%'}
 h={'33%'}
 align={'center'}
 justify={'center'}
 backgroundImage={imageDetails2}
 backgroundSize="cover"
 flexDir="column"
 ></Flex>
 <Flex
 w={'100%'}
 h={'33%'}
 align={'center'}
 justify={'center'}
 backgroundImage={imageDetails3}
 backgroundSize="cover"
 flexDir="column"
 ></Flex>
 </VStack>
 <VStack bg='blue.500' w={isWideVersion ? '100%' : '70%'} h='100%' justifyContent='center' alignItems='center' pt={5}>
 <VStack>
 <Text color={"gray.100"} fontSize={["sm", "md","lg"]}>{title}</Text> 
 <Text color={"gray.100"} fontSize={["sm", "md","lg"]}>{subtitle}</Text> 
 <HStack spacing={3}>
 <VStack borderRight="1px solid white" pr={2}>
 <Text color={"yellow.200"} fontSize={["4xs", "xs","sm"]} fontWeight={'extrabold'}>YEAR</Text> 
 <Text color={"gray.100"} fontSize={["4xs", "xs","sm"]} fontWeight={'bold'}>{year}</Text> 
 </VStack>
 <VStack borderRight="1px solid white" pr={2}>
 <Text color={"yellow.200"} fontSize={["4xs", "xs","sm"]} fontWeight={'extrabold'}>CABINS</Text> 
 <Text color={"gray.100"} fontSize={["4xs", "xs","sm"]} fontWeight={'bold'}>{cabins}</Text> 
 </VStack>
 <VStack>
 <Text color={"yellow.200"} fontSize={["4xs", "xs","sm"]} fontWeight={'extrabold'}>CABINS</Text> 
 <Text color={"gray.100"} fontSize={["4xs", "xs","sm"]} fontWeight={'bold'}>{quantityCabins}</Text> 
 </VStack>
 </HStack>
 <HStack>
 <Text color={"yellow.200"} fontSize={["sm", "md","lg"]} fontWeight={'thin'}>PRICE: </Text> 
 <Text color={"yellow.200"} fontSize={["sm", "md","lg"]} fontWeight={'bold'}>{price}</Text> 
 </HStack>
 </VStack> 
 <Box h={'10%'} w='100%' bg='yellow.300' mt={5}></Box> 
 </VStack> 
 </HStack> 
 </HStack> 
 )
}