Image popup

Image modal

<Script :as="modal">
  if (state.showModal === undefined) {
    setState('showModal', true)
  }
  
  const close = () => {
    setState('showModal', false)
  }
</Script>

<Modal :if={state.showModal} onClose={modal.close}>
  <Flexbox 
    p={20}
    flexDirection="column"
    borderRadius="lg" 
    alignItems="center"
    justifyContent="center"
    height="100%"
    position="relative"
    gap="md"
  >
    <Box width="100%">
      <Image 
        src={data.image.src} 
        width="100%"
        borderRadius="md"
        mb={4}
      />
      
      <Text 
        :if={data.title}
        fontSize="2xl" 
        fontWeight="bold" 
        textAlign="center"
        mb={3}
      >
        {data.title}
      </Text>
      <Text 
        :if={data.description}
        fontSize="lg" 
        textAlign="center"
        color="gray-600"
      >
        {data.description}
      </Text>
    </Box>
    <Button variant="dim-filled-outlined" color="danger" action={modal.close} icon="fontisto:close">Close</Button>
  </Box>
</Modal>