diff --git a/app/components/widget-builder.tsx b/app/components/widget-builder.tsx index 61567f2..eadd7c1 100644 --- a/app/components/widget-builder.tsx +++ b/app/components/widget-builder.tsx @@ -17,7 +17,7 @@ interface WidgetBuilderProps { type RGB = `rgb(${number}, ${number}, ${number})`; type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`; type HEX = `#${string}`; -type PreviewBackground = "image" | RGB | RGBA | HEX; +type PreviewBackgroundColor = RGB | RGBA | HEX; export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps) { const [widgetType, setWidgetType] = useState(widgetTypes[0]); @@ -25,7 +25,8 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps) const [opacity, setOpacity] = useState(100); const [widgetUrl, setWidgetUrl] = useState(null); const [widgetPreview, setWidgetPreview] = useState(null); - const [widgetPreviewBackground, setWidgetPreviewBackground] = useState("#f3f4f6"); + const [widgetPreviewBackgroundImage, setWidgetPreviewBackgroundImage] = useState(true); + const [widgetPreviewBackgroundColor, setWidgetPreviewBackgroundColor] = useState("#f3f4f6"); const [variables, setVariables] = useState(DEFAULT_VARIABLES); const [labels, setLabels] = useState(DEFAULT_LABELS); const [extraArgs, setExtraArgs] = useState<{ [key: string]: string }>({}); @@ -345,25 +346,45 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)

Preview

{widgetPreview}
-
setWidgetPreviewBackground(e.target.value as PreviewBackground)} - className="rounded-md border border-gray-300" + type="checkbox" + id="preview-bg-image-toggle" + checked={widgetPreviewBackgroundImage} + value={widgetPreviewBackgroundImage ? 1 : 0} + onChange={(e) => setWidgetPreviewBackgroundImage(e.target.checked)} + className="rounded-md border border-gray-300 w-8" /> + + {!widgetPreviewBackgroundImage && ( + <> + + setWidgetPreviewBackgroundColor(e.target.value as PreviewBackgroundColor)} + className="rounded-md border border-gray-300" + /> + + )}
diff --git a/public/deadlock-background.png b/public/deadlock-background.png new file mode 100644 index 0000000..64c0026 Binary files /dev/null and b/public/deadlock-background.png differ diff --git a/public/deadlock-background.webp b/public/deadlock-background.webp new file mode 100644 index 0000000..90ea964 Binary files /dev/null and b/public/deadlock-background.webp differ