From 3e1517e9054d9c9709deda7778ea868db6f5bb69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Tue, 16 Jan 2024 13:00:01 +0100
Subject: [PATCH] udpates dev-guide for adding components

---
 docs/dev-guide/Adding_Components.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/dev-guide/Adding_Components.md b/docs/dev-guide/Adding_Components.md
index 28a939b..3aded07 100644
--- a/docs/dev-guide/Adding_Components.md
+++ b/docs/dev-guide/Adding_Components.md
@@ -118,7 +118,7 @@ import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
 import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
 
-interface ImageComponentProps {
+type ImageComponentProps = {
   name: string;
   parentPath?: string;
   readOnly: boolean;
@@ -165,14 +165,15 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
           onClick={() => setOpen(!open)}
           style={{ cursor: 'pointer' }} // Change cursor style on hover
         >
-          {displayName} {open ? <ChevronDown /> : <ChevronRight />}
+          {displayName}
+          <DocStringComponent docString={docString} />
+          {open ? <ChevronDown /> : <ChevronRight />}
         </Card.Header>
         <Collapse in={open}>
           <Card.Body>
             {process.env.NODE_ENV === 'development' && (
               <p>Render count: {renderCount.current}</p>
             )}
-            <DocStringComponent docString={docString} />
             {/* Your component TSX here */}
           </Card.Body>
         </Collapse>