Improve replaceContent

Author: Kubit

src/components/storybook/replaceContent/replaceContent.styled.ts

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 export const ReplaceContentStyled = styled.div<{
   width?: string;
   height?: string;
+  margin?: string;
   backgroundColor?: string;
 }>`
   display: flex;
@@ -12,6 +13,7 @@ export const ReplaceContentStyled = styled.div<{
   gap: 1rem;
   width: ${({ width }) => width || '100%'};
   height: ${({ height }) => height || '200px'};
+  margin: ${({ margin }) => margin || '0px'};
   padding: 20px;
   background-color: ${({ backgroundColor }) => backgroundColor || 'rgb(234 240 254)'};
   color: #236df6;

src/components/storybook/replaceContent/replaceContent.tsx

@@ -9,22 +9,30 @@ interface IReplaceContent extends AriaType {
   children?: React.ReactNode;
   width?: string;
   height?: string;
+  margin?: string;
   id?: string;
   role?: ROLES;
   as?: React.ElementType;
 }
 
-export const ReplaceContent = ({ children, ...props }: IReplaceContent): JSX.Element => {
-  return (
-    <ReplaceContentStyled as={props.as} {...props}>
-      <img alt="" height={48} src={ICONS.ICON_REPLACE} width={48} />
-      {!children ? (
-        <>
-          <span>Replace here your Content</span>
-        </>
-      ) : (
-        children
-      )}
-    </ReplaceContentStyled>
-  );
-};
+export const ReplaceContent = React.forwardRef(
+  (
+    { children, ...props }: IReplaceContent,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ): JSX.Element => {
+    return (
+      <ReplaceContentStyled as={props.as} {...props} ref={ref}>
+        <img alt="" height={48} src={ICONS.ICON_REPLACE} width={48} />
+        {!children ? (
+          <>
+            <span>Replace here your Content</span>
+          </>
+        ) : (
+          children
+        )}
+      </ReplaceContentStyled>
+    );
+  }
+);
+
+ReplaceContent.displayName = 'ReplaceContent';