@material-ui/lab#Color TypeScript Examples

The following examples show how to use @material-ui/lab#Color. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: CollapsibleAlert.tsx From abacus with GNU General Public License v2.0

6 votes

export default function CollapsibleAlert({
  id,
  severity,
  summary,
  className,
  children,
}: {
  id: string
  severity: Color
  summary?: React.ReactNode
  className?: string
  children?: React.ReactNode
}): JSX.Element {
  const classes = useStyles()
  const severityClassMap = new Map([
    ['success', 'MuiAlert-standardSuccess'],
    ['info', 'MuiAlert-standardInfo'],
    ['warning', 'MuiAlert-standardWarning'],
    ['error', 'MuiAlert-standardError'],
  ])

  return (
    <Alert severity={severity} className={className}>
      <Accordion className={clsx(severityClassMap.get(severity), classes.accordionRoot)}>
        <AccordionSummary
          classes={{ root: classes.accordionSummary }}
          expandIcon={<ExpandMoreIcon />}
          aria-controls={`${id}-content`}
          id={id}
        >
          {summary}
        </AccordionSummary>
        <AccordionDetails>
          <div>{children}</div>
        </AccordionDetails>
      </Accordion>
    </Alert>
  )
}

Example #2

Source File: HashLengthExtension.tsx From DamnVulnerableCryptoApp with MIT License

5 votes

HashLengthExtension = (props: IChallengeProps) => {

  const layoutContext = useContext(LayoutContext);
  const [message, setMessage] = useState("");
  const [severity, setSeverity] = useState<Color>("success");
  const [data, setData] = useState("");

  useEffect(() => {
    layoutContext.setLoading(true);

    const authData = HashLengthExtensionService.getData();
    authData.then(d => {
      setData(d.data);

      HashLengthExtensionService.check(d).then(f => {
        props.setFlag(f.flag);
        layoutContext.setLoading(false);

        if (f.tampered) {
          setMessage("DamnVulnerableCryptoApp sadly informs you that the data was manipulated");
          setSeverity("error");
        }
        else {
          setMessage("DamnVulnerableCryptoApp certifies that the data was not tampered");
          setSeverity("success");
        }

      }).catch(err => {
        layoutContext.setSnackErrorMessage("Some error message");
        layoutContext.setLoading(false);
      });
    }).catch(err => {
      layoutContext.setSnackErrorMessage("Some error message");
      layoutContext.setLoading(false);
    });


  }, []);


  const classes = useStyles();

  return (
    <Box >
      <Box className={classes.header} textAlign="center">
        <AccountBalanceIcon className={classes.iconSize} />
        <Typography variant="h2">Integrity Checker</Typography>
      </Box>

      <Alert severity={severity} className={classes.alert}>
        {message}
      </Alert>


      <Box className={classes.dataContainer}>
        <Typography>Your Data:</Typography>
        <Typography className={classes.data}>{data}</Typography>
      </Box>
    </Box>
  );
}

Example #3

Source File: notificationStateSlice.ts From prism-frontend with MIT License

5 votes

readonly type: Color;