import NextImage from "next/image" ; import styled from "styled-components" ; const ImageWrapper = styled . span `
	& img {
		max-width: var(--max-width);
		width: 100%;
		border-radius: var(--border-radius);
	}
` ; export const CustomImage = ( { alt , src , height , width , } ) => { const type = src . slice ( - 3 ) ; if ( type === "mp4" ) { return ( < video autoPlay loop muted controls style = { { maxWidth : "var(--max-width)" , width : "100%" , borderRadius : "var(--border-radius)" , } } > < source src = { src } /> { alt } < /video>); } if ( src [ 0 ] === "/" ) { return ( < ImageWrapper > < NextImage { ... { alt , src , height , width } } quality = "100" / > < /ImageWrapper>); } return ( < ImageWrapper > { } { } < img src = { src } alt = { alt } loading = "lazy" / > < /ImageWrapper>); } ;