add feat

Author: mtrezza

src/components/AggregationPanel/AggregationPanel.js

@@ -26,6 +26,7 @@ const AggregationPanel = ({
   depth = 0,
   cloudCodeFunction = null,
   panelTitle = null,
+  style,
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [nestedData, setNestedData] = useState(null);
@@ -92,25 +93,25 @@ const AggregationPanel = ({
   }, [fetchNestedData]);
 
   const renderSegmentContent = (segment, index) => (
-    <div key={index} className={styles.segmentContainer}>
-      <h2 className={styles.heading}>{segment.title}</h2>
+    <div key={index} className={styles.segmentContainer} style={segment.style}>
+      <h2 className={styles.heading} style={segment.titleStyle}>{segment.title}</h2>
       <div className={styles.segmentItems}>
         {segment.items.map((item, idx) => {
           switch (item.type) {
             case 'text':
-              return <TextElement key={idx} text={item.text} />;
+              return <TextElement key={idx} text={item.text} style={item.style} />;
             case 'keyValue':
-              return <KeyValueElement key={idx} item={item} appName={appName} />;
+              return <KeyValueElement key={idx} item={item} appName={appName} style={item.style} />;
             case 'table':
-              return <TableElement key={idx} columns={item.columns} rows={item.rows} />;
+              return <TableElement key={idx} columns={item.columns} rows={item.rows} style={item.style} />;
             case 'image':
-              return <ImageElement key={idx} url={item.url} />;
+              return <ImageElement key={idx} url={item.url} style={item.style} />;
             case 'video':
-              return <VideoElement key={idx} url={item.url} />;
+              return <VideoElement key={idx} url={item.url} style={item.style} />;
             case 'audio':
-              return <AudioElement key={idx} url={item.url} />;
+              return <AudioElement key={idx} url={item.url} style={item.style} />;
             case 'button':
-              return <ButtonElement key={idx} item={item} showNote={showNote} />;
+              return <ButtonElement key={idx} item={item} showNote={showNote} style={item.style} />;
             case 'panel':
               return (
                 <div key={idx} className={styles.nestedPanelContainer}>
@@ -127,6 +128,7 @@ const AggregationPanel = ({
                     depth={depth + 1}
                     cloudCodeFunction={item.cloudCodeFunction}
                     panelTitle={item.title}
+                    style={item.style}
                   />
                 </div>
               );
@@ -144,6 +146,7 @@ const AggregationPanel = ({
         <div
           className={`${styles.nestedPanelHeader} ${isExpanded ? styles.expanded : ''}`}
           onClick={handleToggle}
+          style={style}
         >
           <span className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}>
             {panelTitle}

src/components/AggregationPanel/AggregationPanelComponents.js

@@ -2,15 +2,15 @@ import React from 'react';
 import styles from './AggregationPanel.scss';
 
 // Text Element Component
-export const TextElement = ({ text }) => (
-  <div className="text-element">
+export const TextElement = ({ text, style}) => (
+  <div className="text-element" style={style}>
     <p>{text}</p>
   </div>
 );
 
 // Key-Value Element Component
-export const KeyValueElement = ({ item, appName }) => (
-  <div className={styles.keyValue}>
+export const KeyValueElement = ({ item, appName, style }) => (
+  <div className={styles.keyValue} style={style}>
     {item.key}:
     {item.url ? (
       <a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank" rel="noreferrer">
@@ -23,8 +23,8 @@ export const KeyValueElement = ({ item, appName }) => (
 );
 
 // Table Element Component
-export const TableElement = ({ columns, rows }) => (
-  <div className="table-element">
+export const TableElement = ({ columns, rows, style }) => (
+  <div className="table-element" style={style}>
     <table>
       <thead>
         <tr>
@@ -47,36 +47,36 @@ export const TableElement = ({ columns, rows }) => (
 );
 
 // Image Element Component
-export const ImageElement = ({ url }) => (
-  <div className="image-element">
+export const ImageElement = ({ url, style }) => (
+  <div className="image-element" style={style}>
     <a href={url} target="_blank" rel="noopener noreferrer">
       <img src={url} alt="Image" className={styles.image} />
     </a>
   </div>
 );
 
 // Video Element Component
-export const VideoElement = ({ url }) => (
+export const VideoElement = ({ url, style }) => (
   <div className="video-element">
-    <video controls className={styles.video}>
+    <video controls className={styles.video} style={style}>
       <source src={url} type="video/mp4" />
       Your browser does not support the video tag.
     </video>
   </div>
 );
 
 // Audio Element Component
-export const AudioElement = ({ url }) => (
+export const AudioElement = ({ url, style }) => (
   <div className="audio-element">
-    <audio controls className={styles.audio}>
+    <audio controls className={styles.audio} style={style}>
       <source src={url} type="audio/mpeg" />
       Your browser does not support the audio element.
     </audio>
   </div>
 );
 
 // Button Element Component
-export const ButtonElement = ({ item, showNote }) => {
+export const ButtonElement = ({ item, showNote, style }) => {
   const handleClick = () => {
     fetch(item.action.url, {
       method: item.action.method,
@@ -95,7 +95,7 @@ export const ButtonElement = ({ item, showNote }) => {
 
   return (
     <div className={styles.buttonContainer}>
-      <button onClick={handleClick} className={styles.button}>
+      <button onClick={handleClick} className={styles.button} style={style}>
         {item.text}
       </button>
     </div>