diff options
Diffstat (limited to 'src/components/molecules/images/responsive-image.tsx')
| -rw-r--r-- | src/components/molecules/images/responsive-image.tsx | 14 |
1 files changed, 13 insertions, 1 deletions
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx index d07dd6c..4541df8 100644 --- a/src/components/molecules/images/responsive-image.tsx +++ b/src/components/molecules/images/responsive-image.tsx @@ -31,6 +31,10 @@ export type ResponsiveImageProps = Omit< * The image width. */ width: number | string; + /** + * Wrap the image with borders. + */ + withBorders?: boolean; }; /** @@ -45,10 +49,18 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({ layout, objectFit, target, + withBorders, ...props }) => { + const bordersModifier = withBorders + ? 'wrapper--has-borders' + : 'wrapper--no-borders'; + const linkModifier = target ? 'wrapper--has-link' : 'wrapper--no-link'; + return ( - <figure className={`${styles.wrapper} ${className}`}> + <figure + className={`${styles.wrapper} ${styles[bordersModifier]} ${styles[linkModifier]} ${className}`} + > {target ? ( <Link href={target} className={styles.link}> <Image |