fix jsdoc comments

components/roadmap/RoadmapColumn.tsx

@@ -17,7 +17,11 @@ interface IRoadmapColumnProps {
 
 /**
  * @description RoadmapColumn component.
- * @param {RoadmapColumnProps} props - The props for the RoadmapColumn component.
+ * @param {string} props.title - The title of the column.
+ * @param {string} props.description - The description of the column.
+ * @param {string} props.colorClass - The color class for styling.
+ * @param {array} props.items - The array of items.
+ * @param {boolean} props.childrenCollapsed - Whether children items are collapsed.
  */
 export default function RoadmapColumn({
   title,

components/roadmap/RoadmapItem.tsx

@@ -20,7 +20,15 @@ interface IPillProps {
 
 /**
  * @description Pill is a component to display a roadmap item.
- * @param {PillProps} props - The props for the Pill component.
+ * @param {object} props.item - The roadmap item.
+ * @param {boolean} props.item.done - Whether the item is done.
+ * @param {string} props.item.url - The URL associated with the item.
+ * @param {string} props.item.description - The description of the item.
+ * @param {string} props.item.title - The title of the item.
+ * @param {string} props.colorClass - The color class for styling.
+ * @param {boolean} props.isCollapsible - Whether the item is collapsible.
+ * @param {boolean} props.isCollapsed - Whether the item is collapsed.
+ * @param {function} props.onClickCollapse - Function to handle click on collapse.
  */
 function Pill({
   item,
@@ -86,7 +94,14 @@ export interface IRoadmapItemProps {
 
 /**
  * @description RoadmapItem is a component to display a roadmap item.
- * @param {RoadmapItemProps} props - The props for the RoadmapItem component.
+ * @param {object} props.item - The roadmap item.
+ * @param {boolean} props.item.done - Whether the item is done.
+ * @param {string} props.item.url - The URL associated with the item.
+ * @param {string} props.item.description - The description of the item.
+ * @param {string} props.item.title - The title of the item.
+ * @param {string} props.colorClass - The color class for styling.
+ * @param {boolean} props.showConnector - Whether to show the connector.
+ * @param {boolean} props.collapsed - Whether the list is collapsed.
  */
 export default function RoadmapItem({
   item,

components/roadmap/RoadmapList.tsx

@@ -19,7 +19,12 @@ interface IRoadmapListProps {
 
 /**
  * @description RoadmapList is a component to display a list of roadmap items.
- * @param {RoadmapListProps} props - The props for the RoadmapList component.
+ * @param {string} props.colorClass - The color class for styling.
+ * @param {string} props.className='mt-3' - The optional CSS class name.
+ * @param {object[]} props.items=[] - The array of roadmap items.
+ * @param {boolean} props.showConnector=true - Whether to show the connector.
+ * @param {boolean} props.collapsed=false - Whether the list is collapsed.
+ * @param {boolean} props.childrenCollapsed=true - Whether children items are collapsed.
  */
 export default function RoadmapList({
   colorClass,

components/slack/Message.tsx

@@ -17,16 +17,16 @@ interface ISlackMessageProps {
 /**
    * @description Component to render a Slack message.
    * @param {Object} props - The component props.
-   * @param {string} [props.className=''] - Additional CSS classes for styling.
+   * @param {string} props.className - Additional CSS classes for styling.
    * @param {string} props.avatar - URL of the user's avatar.
    * @param {string} props.name - Name of the user.
    * @param {React.ReactNode} props.text - Text of the message.
-   * @param {Object[]} [props.reactions=[]] - Array of reaction objects.
+   * @param {Object[]} props.reactions - Array of reaction objects.
    * @param {string} props.reactions[].emoji - Emoji representing the reaction.
-   * @param {string} [props.reactions[].icon] - URL of the reaction icon.
-   * @param {string} [props.reactions[].name] - Name of the reaction icon.
+   * @param {string} props.reactions[].icon - URL of the reaction icon.
+   * @param {string} props.reactions[].name - Name of the reaction icon.
    * @param {number} props.reactions[].count - Number of reactions.
-   * @param {boolean} [props.reactions[].mine] - Indicates if the reaction is from the current user.
+   * @param {boolean} props.reactions[].mine - Indicates if the reaction is from the current user.
    */
 export default function SlackMessage({
   className = '',

components/slack/index.tsx

@@ -6,7 +6,7 @@ interface SlackProps {
 
 /**
  * @description Slack component for displaying Slack-like UI.
- * @param {SlackProps} props - Slack component props.
+ * @param {string} props.className - Additional CSS classes for styling.
  */
 export default function Slack({
   className = ''
@@ -61,9 +61,9 @@ export default function Slack({
           avatar='/img/homepage/eve-and-chan.webp'
           name='Eve & Chan'
           text={
-            <>
+            <span>
               Hey folks! 👋
-            </>
+            </span>
           }
           reactions={[
             { emoji: '👋', count: 21, mine: true }
@@ -73,9 +73,9 @@ export default function Slack({
           avatar='/img/avatars/fmvilas.webp'
           name='fmvilas'
           text={
-            <>
+            <span>
               Hey Eve & Chan! Welcome to the AsyncAPI workspace!
-            </>
+            </span>
           }
         />
       </div>