import React, { useState } from "react"; type NotificationType = { title: string; description: (url?: string) => React.ReactNode; icon: () => React.ReactNode; bgColor: string; }; const notificationTypes: { [key: string]: NotificationType } = { MISSING_RENDERER: { title: "Missing Renderer", description: () => ( <> This document doesn't specify how to display itself. We're showing you the raw document data, which is still valid and verified. ), icon: () => ( ), bgColor: "#FFF7E2", }, TIMEOUT: { title: "Problem Connecting to Renderer", description: (templateURL) => ( <> We're showing you the raw document data instead, which is still valid and verified. Connection to the renderer or the template URL ( {templateURL} ) may be invalid. ), icon: () => ( ), bgColor: "#FFEEED", }, }; export const NotificationBanner: React.FunctionComponent = ({ notificationType = "MISSING_RENDERER", templateURL, }) => { const notification = notificationTypes[notificationType]; const [expanded, setExpanded] = useState(true); return (
{notification.icon()} {notification.title}

{notification.description(templateURL)}

); }; export default NotificationBanner;