import { Box , VStack , Link } from "@chakra-ui/react" ; import { FC } from "react" ; import NextImage from "next/image" ; interface IProps { src : string ; alt : string ; height : number ; width : number ; } const Image = ( { src , alt , height , width } ) => { return ( < Link href = { src } target = "_blank" rel = "noopener noreferrer" > < VStack bg = "gray.800" borderRadius = "sm" mx = { 0 } spacing = { 0 } as = "span" > < Box pos = "relative" w = "100%" h = "100%" > < NextImage src = { src } alt = { alt } height = { height } width = { width } layout = "responsive" / > < /Box> < Box fontSize = "sm" p = { 2 } as = "span" > { alt } < /Box> < /VStack> < /Link>); } ; export default Image ;