import * as React from 'react';
import { Box, IconButton, Typography } from '@mui/material';
import { FiX } from 'react-icons/fi';
import { HiOutlineCheckCircle } from 'react-icons/hi';
// Minimal notification
export default function SimpleNotification({ title = 'Email Confirmed', subtitle = 'You can now browse around the app freely', onClose = () => { }, icon = <HiOutlineCheckCircle size={24}/>, }) {
    return (<Box sx={{
            display: 'grid',
            gridTemplateColumns: 'auto 1fr auto',
            columnGap: 2,
            bgcolor: 'background.paper',
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: 'gray.200',
            borderRadius: 2,
            p: 1.5,
            boxShadow: 3,
            fontSize: 'sm',
            color: 'gray.800',
        }}>
      <Box sx={{
            color: 'green.500',
        }}>
        {icon}
      </Box>
      <Box>
        <Typography sx={{
            color: 'gray.800',
            fontWeight: 500,
        }}>
          {title}
        </Typography>
        <Typography sx={{
            fontSize: 'sm',
            color: 'gray.500',
        }}>
          {subtitle}
        </Typography>
      </Box>
      <Box sx={{
            m: -0.5,
        }}>
        <IconButton onClick={onClose}>
          <FiX />
        </IconButton>
      </Box>
    </Box>);
}


import * as React from 'react';
import { Box, IconButton, Typography } from '@mui/material';
import { FiX } from 'react-icons/fi';
import { HiOutlineCheckCircle } from 'react-icons/hi';
// Minimal notification
export default function SimpleNotification({
  title = 'Email Confirmed',
  subtitle = 'You can now browse around the app freely',
  onClose = () => {},
  icon = <HiOutlineCheckCircle size={24} />,
}) {
  return (
    <Box
      sx={{
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        columnGap: 2,
        bgcolor: 'background.paper',
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'gray.200',
        borderRadius: 2,
        p: 1.5,
        boxShadow: 3,
        fontSize: 'sm',
        color: 'gray.800',
      }}
    >
      <Box
        sx={{
          color: 'green.500',
        }}
      >
        {icon}
      </Box>
      <Box>
        <Typography
          sx={{
            color: 'gray.800',
            fontWeight: 500,
          }}
        >
          {title}
        </Typography>
        <Typography
          sx={{
            fontSize: 'sm',
            color: 'gray.500',
          }}
        >
          {subtitle}
        </Typography>
      </Box>
      <Box
        sx={{
          m: -0.5,
        }}
      >
        <IconButton onClick={onClose}>
          <FiX />
        </IconButton>
      </Box>
    </Box>
  );
}


import * as React from 'react';
import { Box, Button, IconButton, Typography } from '@mui/material';
import { FiX } from 'react-icons/fi';
import { HiOutlineArchive } from 'react-icons/hi';
// Simple notification with actions
export default function SimpleActionsNotification({ title = 'Project archived', subtitle = 'Your project has been removed from this view, you will no longer be able to find it', onClose = () => { }, icon = <HiOutlineArchive size={24}/>, onComplete = () => { }, onDismiss = () => { }, }) {
    return (<Box sx={{
            maxWidth: '400px',
            display: 'grid',
            gridTemplateColumns: 'auto 1fr auto',
            columnGap: 2,
            bgcolor: 'background.paper',
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: 'gray.200',
            borderRadius: 2,
            p: 1.5,
            boxShadow: 3,
            fontSize: 'sm',
            color: 'gray.800',
        }}>
      <Box sx={{
            color: 'gray.500',
        }}>
        {icon}
      </Box>
      <Box>
        <Typography sx={{
            color: 'gray.800',
            fontWeight: 500,
        }}>
          {title}
        </Typography>
        <Typography sx={{
            fontSize: 'sm',
            color: 'gray.500',
        }}>
          {subtitle}
        </Typography>
        <Box sx={{
            ml: -1,
            mt: 0.5,
        }}>
          <Button size='small' sx={{
            px: 1,
            py: 0.25,
            minWidth: 0,
        }} onClick={onComplete}>
            Undo
          </Button>
          <Button color='secondary' size='small' sx={{
            px: 1,
            py: 0.25,
            minWidth: 0,
        }} onClick={onDismiss}>
            Dismiss
          </Button>
        </Box>
      </Box>
      <Box sx={{
            m: -0.5,
        }}>
        <IconButton onClick={onClose}>
          <FiX />
        </IconButton>
      </Box>
    </Box>);
}


import * as React from 'react';
import { Box, Button, IconButton, Typography } from '@mui/material';
import { FiX } from 'react-icons/fi';
import { HiOutlineArchive } from 'react-icons/hi';
// Simple notification with actions
export default function SimpleActionsNotification({
  title = 'Project archived',
  subtitle = 'Your project has been removed from this view, you will no longer be able to find it',
  onClose = () => {},
  icon = <HiOutlineArchive size={24} />,
  onComplete = () => {},
  onDismiss = () => {},
}) {
  return (
    <Box
      sx={{
        maxWidth: '400px',
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        columnGap: 2,
        bgcolor: 'background.paper',
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'gray.200',
        borderRadius: 2,
        p: 1.5,
        boxShadow: 3,
        fontSize: 'sm',
        color: 'gray.800',
      }}
    >
      <Box
        sx={{
          color: 'gray.500',
        }}
      >
        {icon}
      </Box>
      <Box>
        <Typography
          sx={{
            color: 'gray.800',
            fontWeight: 500,
          }}
        >
          {title}
        </Typography>
        <Typography
          sx={{
            fontSize: 'sm',
            color: 'gray.500',
          }}
        >
          {subtitle}
        </Typography>
        <Box
          sx={{
            ml: -1,
            mt: 0.5,
          }}
        >
          <Button
            size='small'
            sx={{
              px: 1,
              py: 0.25,
              minWidth: 0,
            }}
            onClick={onComplete}
          >
            Undo
          </Button>
          <Button
            color='secondary'
            size='small'
            sx={{
              px: 1,
              py: 0.25,
              minWidth: 0,
            }}
            onClick={onDismiss}
          >
            Dismiss
          </Button>
        </Box>
      </Box>
      <Box
        sx={{
          m: -0.5,
        }}
      >
        <IconButton onClick={onClose}>
          <FiX />
        </IconButton>
      </Box>
    </Box>
  );
}


Notifications

Simple

Simple with actions