diff --git a/src/qqq/components/widgets/CompositeWidget.tsx b/src/qqq/components/widgets/CompositeWidget.tsx
index 0834268..b7347ff 100644
--- a/src/qqq/components/widgets/CompositeWidget.tsx
+++ b/src/qqq/components/widgets/CompositeWidget.tsx
@@ -22,6 +22,7 @@
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import {Box, Skeleton} from "@mui/material";
+import parse from "html-react-parser";
import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
import WidgetBlock from "qqq/components/widgets/WidgetBlock";
import React from "react";
@@ -32,6 +33,8 @@ export interface CompositeData
blocks: BlockData[];
styleOverrides?: any;
layout?: string;
+ overlayHtml?: string;
+ overlayStyleOverrides?: any;
}
@@ -97,20 +100,34 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
boxStyle.borderRadius = "0.5rem";
boxStyle.background = "#FFFFFF";
}
-
if (data?.styleOverrides)
{
boxStyle = {...boxStyle, ...data.styleOverrides};
}
- return (
- {
- data.blocks.map((block: BlockData, index) => (
-
-
-
- ))
- }
- );
+ let overlayStyle: any = {};
+
+ if (data?.overlayStyleOverrides)
+ {
+ overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides};
+ }
+
+ return (
+ <>
+ {
+ data?.overlayHtml &&
+ {parse(data.overlayHtml)}
+ }
+
+ {
+ data.blocks.map((block: BlockData, index) => (
+
+
+
+ ))
+ }
+
+ >
+ );
}
diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css
index ef5d407..c1de29c 100644
--- a/src/qqq/styles/qqq-override-styles.css
+++ b/src/qqq/styles/qqq-override-styles.css
@@ -787,3 +787,20 @@ input[type="search"]::-webkit-search-results-decoration
{
margin: 2rem 1rem;
}
+
+/* default styles for a block widget overlay */
+.blockWidgetOverlay
+{
+ font-weight: 400;
+ position: relative;
+ top: 15px;
+ height: 0;
+ display: flex;
+ font-size: 14px;
+ flex-direction: column;
+ align-items: center;
+}
+.blockWidgetOverlay a
+{
+ color: #0062FF !important;
+}