feat: allow to define space between card and image

aleph-im · Nov 14, 2024 · ac84fe9 · ac84fe9
1 parent 8f18168
commit ac84fe9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/components/layout/CardWithSideImage/cmp.tsx b/src/components/layout/CardWithSideImage/cmp.tsx
@@ -15,6 +15,7 @@ export const CardWithSideImage = ({
   cardBackgroundColor = 'bg-none',
   reverseColumnsWhenStacked = false,
   cardOccupation = 5,
+  spaceBetween = '1.5rem',
 }: CardWithSideImageProps) => {
   const imagePercentageOccupation = 10 - cardOccupation
 
@@ -42,7 +43,7 @@ export const CardWithSideImage = ({
   )
 
   return (
-    <Row xs={1} md={10} gap={'1.5rem'}>
+    <Row xs={1} md={10} gap={spaceBetween}>
       {imagePosition === 'left' ? [imageCol, cardCol] : [cardCol, imageCol]}
     </Row>
   )

diff --git a/src/components/layout/CardWithSideImage/types.ts b/src/components/layout/CardWithSideImage/types.ts
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { RowProps } from '../Grid'
 
 export type AlignProps =
   | 'normal'
@@ -51,6 +52,7 @@ export type CardWithSideImageProps = {
   cardBackgroundColor?: string
   reverseColumnsWhenStacked?: boolean
   cardOccupation?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+  spaceBetween?: RowProps['gap']
 }
 
 export type StyledImageColProps = {