1 files changed, 99 insertions, 0 deletions

diff --git a/packages/renderer/src/components/NotificationBanner.tsx b/packages/renderer/src/components/NotificationBanner.tsx
new file mode 100644
index 0000000..d591e14
--- /dev/null
+++ b/packages/renderer/src/components/NotificationBanner.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Typography } from '@mui/material';
+import Alert, { AlertColor } from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import React, { ReactNode } from 'react';
+
+const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
+  paddingTop: 7,
+  paddingBottom: 6,
+  // Match the height of the location bar.
+  minHeight: 53,
+  borderRadius: 0,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  '.MuiAlert-message': {
+    flexGrow: 1,
+    paddingTop: 0,
+    paddingBottom: 4,
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  '.MuiAlert-action': {
+    paddingInlineStart: 0,
+  },
+}));
+
+const NotificationBannerText = styled(Typography)(({ theme }) => ({
+  fontSize: 'inherit',
+  paddingTop: theme.spacing(1),
+  paddingInlineEnd: theme.spacing(2),
+  flexGrow: 9999,
+}));
+
+const NotificationBannerButtons = styled(Box)(({ theme }) => ({
+  fontSize: 'inherit',
+  paddingTop: theme.spacing(0.5),
+  paddingInlineEnd: theme.spacing(0.5),
+  display: 'flex',
+  flexWrap: 'wrap',
+  flexGrow: 1,
+  gap: theme.spacing(1),
+  '.MuiButton-root': {
+    flexGrow: 1,
+  },
+}));
+
+export default function NotificationBanner({
+  severity,
+  icon,
+  onClose,
+  buttons,
+  children,
+}: {
+  severity?: AlertColor;
+  icon?: ReactNode;
+  onClose: () => void;
+  buttons?: ReactNode;
+  children?: ReactNode;
+}): JSX.Element {
+  return (
+    <NotificationBannerRoot
+      severity={severity ?? 'success'}
+      icon={icon ?? false}
+      onClose={onClose}
+    >
+      <NotificationBannerText>{children}</NotificationBannerText>
+      {buttons && (
+        <NotificationBannerButtons>{buttons}</NotificationBannerButtons>
+      )}
+    </NotificationBannerRoot>
+  );
+}
+
+NotificationBanner.defaultProps = {
+  severity: 'success',
+  icon: false,
+  buttons: undefined,
+  children: undefined,
+};