diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-20 22:12:43 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-20 23:18:28 +0200 |
| commit | 7fd11d99f8a547e4acb89b9f9159b92e208dc90f (patch) | |
| tree | bb179701501f7767a79c5ff6fd9133bb6fdf78cf /src/components/molecules/images/responsive-image.tsx | |
| parent | 0e7c1851973e57777474ef9b7662beb91f95cda5 (diff) | |
chore: update images styles
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 |