@material-ui/core#Typography JavaScript Examples

SignUpCard = (props) => {
  const classes = useStyles(props);
  const {googleLogin} = useContext(AuthContext);
  return (
    <React.Fragment>
      <Typography color="primary" className={classes.signUpHeader} variant="h5">
        Sign Up
      </Typography>
      <p>using</p>
      <div className={classes.oAuthDiv}>
        {/* <Button>
          <FacebookIcon className={classes.fb}/>
        </Button> */}
        <Button onClick={()=>googleLogin()}>
          <img src={google} alt="Google" width="30" height="30" />
        </Button>
      </div>
      <Typography color="primary" className={classes.p} variant="h6">
        <Divider />
        OR
      </Typography>
      <Button className={classes.button} component={Link} to="/user/signup">

        Register

      </Button>
    </React.Fragment>
  );
}

SentMessage = ({ message }) => {
  const {
    messageRowRight,
    messageContent,
    messageTimeStampLeft,
    sentMessage,
  } = useStyles();

  return (
    <>
      {message.body ? (
        <Grid className={messageRowRight} container>
          <Grid item className={messageTimeStampLeft}>
            <Typography>{message.composed_at.slice(0, 10)}</Typography>
          </Grid>
          <Grid item className={sentMessage}>
            <Typography className={messageContent}>{message.body}</Typography>
          </Grid>
        </Grid>
      ) : (
        <div></div>
      )}
    </>
  );
}

AppSettingsContainer = () => {
  const { isLoadingSettings } = useSettings();

  return (
    <>
      <AutoUpdater />

      {isLoadingSettings ? (
        <Box display="flex" alignItems="center" justifyContent="center" height="100%" width="100%" flexDirection="column">
          <Box paddingBottom="1rem">
            <CircularProgress size="3rem" />
          </Box>
          <div>
            <Typography variant="h5">Loading settings...</Typography>
          </div>
        </Box>
      ) : (
        <AppContainer />
      )}
    </>
  );
}

GrowerOrganization = (props) => {
  const appContext = useContext(AppContext);
  const { organizationName, assignedOrganizationId, compact } = props;

  const renderGrowerOrganization = () => (
    <Typography style={{ color: '#C0C0C0', fontStyle: 'italic' }}>
      {organizationName}
    </Typography>
  );
  const renderGrowerAssignedOrganization = (id) => {
    const assignedOrganization = getOrganizationById(appContext.orgList, id);
    return (
      <Typography>
        {assignedOrganization?.name} ({id})
      </Typography>
    );
  };
  const orgNamesMatch =
    assignedOrganizationId &&
    organizationName &&
    (
      getOrganizationById(appContext.orgList, assignedOrganizationId)?.name ||
      ''
    ).toLowerCase() === organizationName.toLowerCase();

  return (
    <>
      {assignedOrganizationId &&
        renderGrowerAssignedOrganization(assignedOrganizationId)}
      {organizationName &&
        (!compact || !assignedOrganizationId) &&
        !orgNamesMatch &&
        renderGrowerOrganization()}
    </>
  );
}

UIText = ({
  padding,
  children,
}) => {

  const classes = useStyles({ padding });

  return (
    <Typography
      className={classes.text}
      component="div"
      align="left" variant="body1">
      {children}
    </Typography>
  );
}

export function MetaBox(props) {
  const classes = useStyles();

  const meta = props.meta;
  return (
    <Paper className={classes.paper} variant="outlined">
      <Grid container direction="row">
        <Grid item xs={12} md={8}>
          <Grid container direction="row">
            { meta.operation &&
              <Box className={classes.flexBox}>
                <Typography className={classes.metaBoxTypo}>{meta.operation.method}</Typography>
                <Typography className={classes.metaBoxTypo}>/{meta.operation.entityName}</Typography>
              </Box>
            }
            <Typography>{meta.title}</Typography>
          </Grid>
        </Grid>
        <Grid item xs={12} md={4}>
          <Grid container direction="row-reverse">
            { meta.operation &&
              <Button variant="contained" color="primary" size='small'>상세</Button>
            }
            { !meta.operation &&
              <Button variant="contained" color="primary" size='small' component={Link} to={{ pathname: `/metas/${meta.id}/back`, state: {meta: meta}}}>operation 설정</Button>
            }
          </Grid>
        </Grid>
      </Grid>
    </Paper>
  )
}

function NewNeedTile({ onClick }) {
  const classes = useStyles()

  return (
    <Paper className={classes.root} onClick={onClick}>
      <ContentAddCircle className={classes.newIcon} />
      <Typography variant="h6" color="secondary">
        <Trans>Request new item</Trans>
      </Typography>
    </Paper>
  )
}

function ErrorPage() {
	return (
		<div className="error-section">
			<Container>
				<Typography variant="h2" className="error-msg">Oops! Looks like there is nothing on this URL!</Typography>
			</Container>
		</div>
	)
}

function PublicComments({ requestId }) {
  const user = useUser();

  return (
    <>
      <Typography variant="h6">Public Comments</Typography>
      <Suspense
        fallback={
          <>
            <Skeleton />
            <Skeleton />
            <Skeleton />
          </>
        }>
        <CommentList requestId={requestId} />
      </Suspense>
      {user && <CommentEntry requestId={requestId} />}
    </>
  );
}

export function DeploymentJsonViewer({ jsonObj, title }) {
  const classes = useStyles();

  const rawJson = JSON.stringify(jsonObj, null, 2);

  return (
    <div className={classes.root}>
      <Box display="flex">
        <Typography variant="h6" className={classes.title}>
          {title}
        </Typography>
      </Box>

      <ViewPanel bottomElementId="footer" overflow="auto">
        <pre className={classes.rawJson}>
          <code
            dangerouslySetInnerHTML={{
              __html: syntaxHighlight(rawJson)
            }}
          ></code>
        </pre>
      </ViewPanel>
    </div>
  );
}

function LogoutPage() {
  const classes = useStyles();
  const auth = useAuth();
  const history = useHistory();

  useEffect(() => {
    auth.signOut().then(() => {
      history.replace('/');
    });
  }, [auth, history]);

  return (
    <Container maxWidth="md">
      <Helmet>
        <title>Logging Out</title>
      </Helmet>
      <Paper className={classes.paper}>
        <Typography
          variant="h5"
          align="center"
          color="textPrimary"
          gutterBottom>
          Logging out...
        </Typography>
        <LinearProgress />
      </Paper>
    </Container>
  );
}

export function Register() {
  const classes = useStyles();
  const queryParams = useQueryParams();
  const isAddAccount = !!queryParams.get("add");
  const history = useHistory();

  return (
    <Layout>
      <div className={classes.root}>
        <TitleLogo />

        <Container maxWidth="xs" className={classes.container}>
          {isAddAccount && (
            <Box display="flex" alignItems="center" justifyContent="space-between" marginBottom="1rem">
              <LinkTo onClick={() => history.goBack()}>Back</LinkTo>
              <Typography variant="h6">
                Add account
              </Typography>
            </Box>
          )}

          <Button className={classes.spacing} variant="outlined" component={Link} to={UrlService.newWallet(isAddAccount)} color="primary">
            Create new account
          </Button>
          <Button className={classes.spacing} variant="outlined" component={Link} to={UrlService.walletImport(isAddAccount)} color="primary">
            Import existing account
          </Button>

          <Box marginTop="1rem" textAlign="center">
            <Typography variant="caption" color="textSecondary">
              All sensitive information is stored only on your device.
            </Typography>
          </Box>
        </Container>
      </div>
    </Layout>
  );
}

AvgTemperature = props => {
  const { observations, tempUnit } = props;

  const classes = useStyles();

  const averageTemperature = observations.length
    ? Math.round(
        observations.reduce((sum, record) => {
          return sum + record.physical.feverSeverity * 10;
        }, 0) / observations.length
      ) / 10
    : '--';

  return (
    <Paper className={classes.root}>
      <Typography variant="overline">Average Temperature:</Typography>
      {tempUnit === 'fahrenheit' ? (
        <Typography variant="body2">{averageTemperature}&#8457;</Typography>
      ) : (
        <Typography variant="body2">{averageTemperature}&#8451;</Typography>
      )}
    </Paper>
  );
}

WalletValue = ({ wallet }) => {
  const classes = useStyles();
  return (
    <Alert icon={<AccountBalanceWalletIcon />} variant="outlined" classes={{ root: classes.alertRoot, icon: classes.alertIcon, message: classes.alertMessage }}>
      <Typography variant="body1">
        <strong>{wallet.name}</strong>
      </Typography>
      <Typography variant="caption">
        <Address address={wallet.address} />
      </Typography>
    </Alert>
  );
}

// TODO add once we get it :)
function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

export function Snackbar({ title, subTitle, iconVariant, showLoading = false }) {
  const classes = useStyles();
  const icon = getIcon(iconVariant);

  return (
    <div>
      <Box
        display="flex"
        alignItems="center"
        className={clsx({
          [classes.marginBottom]: !!subTitle
        })}
      >
        {!!icon && (
          <Box display="flex" alignItems="center" paddingRight=".5rem">
            {icon}
          </Box>
        )}

        {showLoading && (
          <Box display="flex" alignItems="center" paddingRight=".5rem">
            <CircularProgress size="1rem" className={classes.loading} />
          </Box>
        )}
        <Typography variant="h5" className={classes.snackBarTitle}>
          {title}
        </Typography>
      </Box>

      {subTitle && (
        <Typography variant="body1" className={classes.snackBarSubTitle}>
          {subTitle}
        </Typography>
      )}
    </div>
  );
}

export default function CoinButton(props) {
  const { coinName, coinAbbr, onClick, ...other } = props;
  const classes = useStyles();

  return (
    <ButtonBase focusRipple className={classes.button} onClick={onClick}>
      <Grid container direction="column">
        <Typography variant="h6">{coinAbbr}</Typography>
        <Typography variant="body2" className={classes.coinName}>
          {coinName}
        </Typography>
      </Grid>
    </ButtonBase>
  );
}

export default function NavBar() {
  const classes = useStyles();

  // const preventDefault = (event) => event.preventDefault();
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Connect 4
          </Typography>

          <div>
            <Link
              href="https://github.com/BhavyaCodes/connect-4-online-multiplayer"
              target="_blank"
              rel="noopener noreferrer"
              color="inherit"
            >
              <IconButton
                aria-label="Github repository link"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                color="inherit"
              >
                <GitHubIcon />
              </IconButton>
            </Link>
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Quiz = ({ data }) => {
  const { question, footer, link } = data;
  return (
    <Grid>
      <Typography color="secondary" variant="subtitle1">
        True or False?
      </Typography>
      <Typography paragraph variant="body1">
        {question}
      </Typography>
      <footer>
        <Typography variant="caption">{footer}</Typography>
        {link && (
          <Button size="small" href={link}>
            Learn More
          </Button>
        )}
      </footer>
    </Grid>
  );
}

Home = () => {
	const { root, header, scrollbarContainer, topContainer } = useStyles();

	return (
		<div className={root}>
			<div className={topContainer}>
				<Typography variant="h4" className={header}>
					Media Manager
				</Typography>
			</div>
			<div className={scrollbarContainer}>
				<Scrollbars
					renderTrackHorizontal={({ style, ...props }) => (
						<div
							{...props}
							style={{
								...style,
								width: "100%",
								height: "9px",
								position: "absolute",
								bottom: "0",
								borderRadius: "15px",
								marginBottom: "3px",
							}}
						/>
					)}
				>
					<Kanban />
				</Scrollbars>
			</div>
		</div>
	);
}

function TipsLayout(props) {
    const classes = useStyles();

    return (
        <Grid item xs={false} sm={4} md={3} className={classes.image}>
            <Grid item className={classes.startText}>
                <Avatar className={classes.avatar}>
                    <DescriptionIcon />
                </Avatar>
                <Typography
                    component="h1"
                    variant="h5"
                    className={classes.spacing}
                >
                    Start Making Your Resume
                </Typography>
            </Grid>
            <Grid item className={classes.tips}>
                {props.tips}
            </Grid>
        </Grid>
    );
}

export default function EventsCalendar() {
  const classes = useStyles();
  const { loading, error, data, refetch } = useQuery(GET_EVENT_LIST);
  // refetches EVENT_LIST without refreshing page
  useEffect(() => {
    refetch();
  }, [refetch]);
  if (loading) return <CircularProgress className={classes.loadingSpinner} />;
  if (error) return `Error! ${error.message}`;

  return (
    <main className={classes.root}>
      <Box className={classes.headingBox} borderBottom={2}>
        <Typography className={classes.heading} variant="h1" gutterBottom>
          Upcoming Events
        </Typography>
      </Box>
      <Grid className={classes.grid}>
        {data &&
          data?.events?.map((event, id) => (
            <EventCard key={id} event={event} />
          ))}
      </Grid>
    </main>
  );
}

export default function WritersFavoriteGrants() {
  const faveArr = useSelector((state) => state.favorites.favorites);
  const user = useSelector((state) => state.profileInfo.profileDetails);
  const classes = useStyles();

  if (faveArr.length === 0) {
    return <Redirect to="/Grants" />;
  }
  return (
    <div>
      <Typography variant="h3" className={classes.h3}>
        <Grid container justify="center">
          <Grid item>
            {user.org_name !== "" ? user.org_name : user.first_name}'s Favorite
            Grants
          </Grid>
        </Grid>
      </Typography>
      {faveArr.map((grant) => {
        return (
          <div key={grant.id} className={classes.container}>
            <GrantCard data={grant} />
          </div>
        );
      })}
    </div>
  );
}

export default function MyEventDetails() {
  const classes = useStyles();
  // Retrieves ID of current event from parameters
  const { eventId } = useParams();
  // Retrieves logged in user info from Auth0
  const { user } = useAuth0();
  // Retrieves event details of specified event by ID which user is registered to
  const { loading, error, data, refetch } = useQuery(GET_EVENT_DETAILS, {
    variables: { id: eventId, email: user.email },
  });
  useEffect(() => {
    refetch();
  }, [refetch]);
  if (loading) return <CircularProgress className={classes.loadingSpinner} />;
  if (error) return `Error! ${error.message}`;

  const activeEvent = data.events;

  return (
    <main className={classes.root}>
      <Box className={classes.headingBox} borderBottom={2}>
        <Link href="/myevents" className={classes.linkBack}>
          <ArrowBackIosIcon color="primary" fontSize="large" />
          Back to my events
        </Link>
        <Typography variant="h1" gutterBottom>
          Event Details
        </Typography>
      </Box>
      {activeEvent &&
        activeEvent.map((event, id) => <EventDetails key={id} event={event} />)}
    </main>
  );
}

LoginCard = (props) => {
  const location = useLocation();
  let { from } = location.state || { from: { pathname: "/" } };
  //styles
  const classes = useStyles(props);
  //formik hook
  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema: loginSchema,
    onSubmit: (values) => {
      props.loggingUser(values, from);
    },
  });

  return (
    <React.Fragment>
      <Typography color="primary" className={classes.loginHeader} variant="h5">
        Sign In
      </Typography>
      <form
        autoComplete="off"
        className={classes.form}
        onSubmit={formik.handleSubmit}
      >
        {props.error ? <div>{props.error.msg}</div> : null}
        <input
          id="login-email"
          label="Email"
          value={formik.values.email}
          onChange={formik.handleChange}
          error={
            formik.touched.email && Boolean(formik.errors.email).toString()
          }
          variant="outlined"
          name="email"
          placeholder="Username or Email"
          type="text"
          className={classes.input}
        />
        {formik.errors.email ? <div>{formik.errors.email}</div> : null}
        <input
          name="password"
          placeholder="Password"
          type="password"
          className={classes.input}
          id="login-password"
          value={formik.values.password}
          onChange={formik.handleChange}
          error={
            formik.touched.password &&
            Boolean(formik.errors.password).toString()
          }
        />
        {formik.errors.password ? <div>{formik.errors.password}</div> : null}
        <Button
          type="submit"
          className={classes.button}
          color="secondary"
          variant="contained"
        >
          {props.auth.isLoading ? (
            <CircularProgress color="primary" />
          ) : (
            "Sign In"
          )}
        </Button>
      </form>
    </React.Fragment>
  );
}

Survey = ({ toggleSurvey, setToggleSurvey }) => {
  const iOS =
    typeof navigator !== 'undefined' &&
    typeof navigator.userAgent !== 'undefined' &&
    /iPad|iPhone|iPod/.test(navigator.userAgent);

  const {
    title,
    formTitle,
    directions,
    drawer,
    surveyCloseButton,
  } = useStyles();

  return (
    <>
      <SwipeableDrawer
        disablebackdroptransition={!iOS ? 'true' : 'false'}
        disablediscovery={iOS ? 'true' : 'false'}
        anchor={'right'}
        open={toggleSurvey}
        onClose={() => setToggleSurvey(false)}
        onOpen={() => setToggleSurvey}
        classes={{ paper: drawer }}
        PaperProps={{ elevation: 6 }}
      >
        <Grid container spacing={2}>
          <Grid item className={title}>
            <Typography variant="h3" className={formTitle}>
              Quick Survey
            </Typography>
            <IconButton
              color="primary"
              className={surveyCloseButton}
              onClick={() => setToggleSurvey(false)}
            >
              <Close variant="inherit" />
            </IconButton>
          </Grid>
          <Grid item>
            <Typography variant="body1" className={directions}>
              Write a survey question and up to three answer options. Then
              select the target audience for the survey. All replies will be
              available in your Messaging Inbox.
            </Typography>
          </Grid>
          <Grid item>
            <SurveyForm setToggleSurvey={setToggleSurvey} />
          </Grid>
        </Grid>
      </SwipeableDrawer>
    </>
  );
}

/**
   * Renders the component
   * @return {ReactComponent} <Viewer/>
   */
  render() {
    return (
      <Box p={2} display="flex" flexWrap="wrap">
        <Box mr={2}>
          <div id="cornerstone-div"
            ref={(input) => {
              this.canvasElement = input;
            }}
            style={{
              width: 500,
              height: 500,
              background: 'black',
            }}
          >
            <canvas className="cornerstone-canvas"></canvas>
          </div>
          <LinearProgress variant="buffer"
            value={this.state.renderedImagesProgress}
            valueBuffer={this.state.readyImagesProgress} /><br/>
          <TextField
            label="Max Simultaneous Requests"
            style={{width: 250}}
            defaultValue={this.state.maxSimultaneousRequests}
            onChange={(e) => {
              this.setState({maxSimultaneousRequests: Number(e.target.value)});
            }} /><br/><br/>
          <Button
            variant="contained"
            color="primary"
            disabled={this.state.isDisplaying}
            onClick={() => this.getInstances()}>
              Start
          </Button>
        </Box>
        <Box>
          <Typography variant="h5">
            Frames Loaded: {this.state.numReadyImages}
          </Typography>
          <Typography variant="h5">
            Frames Displayed: {this.state.numRenderedImages}
          </Typography>
          <Typography variant="h5">
            Total Time: {(this.state.totalTimer / 1000).toFixed(2)}s
          </Typography>
          <Typography variant="h5">
            Time to First Image: {
              (this.state.timeToFirstImage / 1000).toFixed(2)
            }s
          </Typography>
          <Typography variant="h5">
            Average FPS: {(this.state.numRenderedImages /
                        (this.state.renderTimer / 1000)).toFixed(2)}
          </Typography>
          <Typography variant="body1">
            Use your browser&apos;s developer tools to see bandwidth usage.
          </Typography>
        </Box>
      </Box>
    );
  }

function Homepage() {
  const { popular } = useContext(PopularAnimeContext);
  const [recent, setRecent] = useState([]);
  const { schedule } = useContext(ScheduleContext);

  const useStyles = makeStyles({
    root: {
      maxWidth: "100vw",
    },
    title: {
      padding: "10px",
      flexGrow: 1,
    },
    grids: {
      display: "flex",
    },
    spinner: {
      padding: "5px",
    },
  });

  const getRecent = () => {
    axios
      .get("/api/v1/anime/recent/1", {})
      .then((res) => {
        setRecent(res.data);
      })
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    getRecent();
  }, []);

  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Grid item container spacing={2}>
        <Grid item xs={12} className={classes.grids}>
          <Typography className={classes.title} variant="h5">
            Most Popular Anime
          </Typography>
        </Grid>
        <PopularCards Anime={popular} />
        <Grid item xs={12} className={classes.grids}>
          <Typography className={classes.title} variant="h5">
            Most Recent Anime
          </Typography>
        </Grid>
        <RecentCards Anime={recent} />
        <Grid item xs={12}>
          <Typography className={classes.title} variant="h5">
            Schedule
          </Typography>
          <Schedule schedule={schedule} />
        </Grid>
      </Grid>
    </div>
  );
}

render() {
    return (
      <div>
        <AppBar position="static">
          <Toolbar>
            <Typography
              className={this.props.classes.heading}
              variant="display1"
              color="inherit"
            >
              Chat Server
            </Typography>
            <Hidden mdUp>
              <IconButton
                color="inherit"
                onClick={this.handleMenubutton}
                className={this.props.classes.menuButton}
              >
                <MenuIcon />
              </IconButton>
            </Hidden>
            <Hidden smDown>
              <Typography className={this.props.classes.links}>
                <Button href="/api/signup" color="primary" variant="contained">
                  Signup
                </Button>

                <Button href="/api/signin" color="primary" variant="contained">
                  Signin
                </Button>

                <Button href="/api/chat" color="primary" variant="contained">
                  Chat
                </Button>
              </Typography>
            </Hidden>
          </Toolbar>
        </AppBar>
        <Hidden mdUp>
          <Drawer
            variant="persistent"
            anchor="top"
            open={this.state.open}
            classes={{ paperAnchorTop: this.props.classes.drawerColor }}
          >
            <div className={this.props.classes.drawerWidth}>
              <IconButton onClick={this.handleMenubutton}>
                <KeyboardArrowUpIcon />
              </IconButton>

              <List>
                {["SignUp", "SignIn", "Chat"].map((text, index) => (
                  <ListItem button key={index}>
                    <Button href={`#${text}`} onClick={this.handleMenubutton}>
                      <ListItemText primary={text} />
                    </Button>
                  </ListItem>
                ))}
              </List>
            </div>
          </Drawer>
        </Hidden>
      </div>
    );
  }