components#RegularCard JavaScript Examples

The following examples show how to use components#RegularCard. 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: icopublish.jsx    From crypto-manager with MIT License 6 votes vote down vote up
function icoPublished({ ...props }) {
  return (
    <Grid container>
      <ItemGrid xs={12} sm={12} md={12}>
        <RegularCard
          cardTitle="All ICO's Table"
          // cardSubtitle="Here is a subtitle for this table"
          content={
            <Table
              tableHeaderColor="primary"
            //   tableHead={["Name", "ETA", "TEAM", "CONCEPT", "WHITE", "SOCIAL"]}
              tableData={[
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                // ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                // ["Sage Rodriguez", "Netherlands", "Baileux", "$56,142"],
                // ["Philip Chaney", "Korea, South", "Overland Park", "$38,735"],
                // ["Doris Greene", "Malawi", "Feldkirchen in Kärnten", "$63,542"],
                // ["Mason Porter", "Chile", "Gloucester", "$78,615"]
              ]}
            />
          }
        />
      </ItemGrid>
    </Grid>
  );
}
Example #2
Source File: Icons.jsx    From crypto-manager with MIT License 5 votes vote down vote up
function Icons({ ...props }) {
  return (
    <Grid container>
      <ItemGrid xs={12} sm={12} md={12}>
        <RegularCard
          plainCard
          cardTitle="Material Design Icons"
          cardSubtitle={
            <P>
              Handcrafted by our friends from{" "}
              <A
                href="https://design.google.com/icons/"
                target="_blank"
                rel="noopener noreferrer"
              >
                Google
              </A>
            </P>
          }
          content={
            <div>
              <Hidden only={["sm", "xs"]}>
                <iframe
                  className={props.classes.iframe}
                  src="https://material.io/icons/"
                  title="Icons iframe"
                >
                  <p>Your browser does not support iframes.</p>
                </iframe>
              </Hidden>
              <Hidden only={["lg", "md"]}>
                <ItemGrid xs={12} sm={12} md={6}>
                  <h5>
                    The icons are visible on Desktop mode inside an iframe.
                    Since the iframe is not working on Mobile and Tablets please
                    visit the icons on their original page on Google. Check the
                    <a
                      href="https://design.google.com/icons/"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      Material Icons
                    </a>
                  </h5>
                </ItemGrid>
              </Hidden>
            </div>
          }
        />
      </ItemGrid>
    </Grid>
  );
}
Example #3
Source File: icotablelist.jsx    From crypto-manager with MIT License 5 votes vote down vote up
function icoTableList({ ...props }) {
  return (
    <Grid container>
      <ItemGrid xs={12} sm={12} md={12}>
        <RegularCard
          cardTitle="All ICO's Table"
          // cardSubtitle="Here is a subtitle for this table"
          content={
            <Table
              tableHeaderColor="primary"
            //   tableHead={["Name", "ETA", "TEAM", "CONCEPT", "WHITE", "SOCIAL"]}
              tableData={[
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                // ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
                // ["Sage Rodriguez", "Netherlands", "Baileux", "$56,142"],
                // ["Philip Chaney", "Korea, South", "Overland Park", "$38,735"],
                // ["Doris Greene", "Malawi", "Feldkirchen in Kärnten", "$63,542"],
                // ["Mason Porter", "Chile", "Gloucester", "$78,615"]
              ]}
            />
          }
        />
      </ItemGrid>
      {/* <ItemGrid xs={12} sm={12} md={12}>
        <RegularCard
          cardTitle="UPCOMING Table"
          // cardSubtitle="Here is a subtitle for this table"
          content={
            <Table
              tableHeaderColor="primary"
            //   tableHead={["Name", "ETA", "OVERALL", "SOCIAL"]}
              tableData={[
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
              ]}
            />
          }
        />
      </ItemGrid> */}
    </Grid>
  );
}
Example #4
Source File: Notifications.jsx    From crypto-manager with MIT License 4 votes vote down vote up
render() {
    return (
      <RegularCard
        cardTitle="Notifications"
        cardSubtitle={
          <P>
            Handcrafted by our friends from{" "}
            <A target="_blank" href="https://material-ui-next.com/">
              Material UI
            </A>{" "}
            and styled by{" "}
            <A target="_blank" href="https://www.creative-tim.com/">
              Creative Tim
            </A>. Please checkout the{" "}
            <A href="#pablo" target="_blank">
              full documentation
            </A>.
          </P>
        }
        content={
          <div>
            <Grid container>
              <ItemGrid xs={12} sm={12} md={6}>
                <h5>Notifications Style</h5>
                <br />
                <SnackbarContent message={"This is a plain notification"} />
                <br />
                <SnackbarContent
                  message={"This is a notification with close button."}
                  close
                />
                <br />
                <SnackbarContent
                  message={"This is a notification with close button and icon."}
                  close
                  icon={AddAlert}
                />
                <br />
                <SnackbarContent
                  message={
                    "This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style."
                  }
                  close
                  icon={AddAlert}
                />
                <br />
              </ItemGrid>
              <ItemGrid xs={12} sm={12} md={6}>
                <h5>Notifications States</h5>
                <br />
                <SnackbarContent
                  message={
                    'INFO - This is a regular notification made with color="info"'
                  }
                  close
                  color="info"
                />
                <br />
                <SnackbarContent
                  message={
                    'SUCCESS - This is a regular notification made with color="success"'
                  }
                  close
                  color="success"
                />
                <br />
                <SnackbarContent
                  message={
                    'WARNING - This is a regular notification made with color="warning"'
                  }
                  close
                  color="warning"
                />
                <br />
                <SnackbarContent
                  message={
                    'DANGER - This is a regular notification made with color="danger"'
                  }
                  close
                  color="danger"
                />
                <br />
                <SnackbarContent
                  message={
                    'PRIMARY - This is a regular notification made with color="primary"'
                  }
                  close
                  color="primary"
                />
                <br />
              </ItemGrid>
            </Grid>
            <br />
            <br />
            <Grid container justify="center">
              <ItemGrid xs={12} sm={12} md={6} style={{ textAlign: "center" }}>
                <h5>
                  Notifications Places
                  <Small>Click to view notifications</Small>
                </h5>
              </ItemGrid>
            </Grid>
            <Grid container justify="center">
              <ItemGrid xs={12} sm={12} md={10} lg={8}>
                <Grid container>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("tl")}
                    >
                      Top Left
                    </Button>
                    <Snackbar
                      place="tl"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.tl}
                      closeNotification={() => this.setState({ tl: false })}
                      close
                    />
                  </ItemGrid>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("tc")}
                    >
                      Top Center
                    </Button>
                    <Snackbar
                      place="tc"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.tc}
                      closeNotification={() => this.setState({ tc: false })}
                      close
                    />
                  </ItemGrid>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("tr")}
                    >
                      Top Right
                    </Button>
                    <Snackbar
                      place="tr"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.tr}
                      closeNotification={() => this.setState({ tr: false })}
                      close
                    />
                  </ItemGrid>
                </Grid>
              </ItemGrid>
            </Grid>
            <Grid container justify={"center"}>
              <ItemGrid xs={12} sm={12} md={10} lg={8}>
                <Grid container>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("bl")}
                    >
                      Bottom Left
                    </Button>
                    <Snackbar
                      place="bl"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.bl}
                      closeNotification={() => this.setState({ bl: false })}
                      close
                    />
                  </ItemGrid>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("bc")}
                    >
                      Bottom Center
                    </Button>
                    <Snackbar
                      place="bc"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.bc}
                      closeNotification={() => this.setState({ bc: false })}
                      close
                    />
                  </ItemGrid>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("br")}
                    >
                      Bottom Right
                    </Button>
                    <Snackbar
                      place="br"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.br}
                      closeNotification={() => this.setState({ br: false })}
                      close
                    />
                  </ItemGrid>
                </Grid>
              </ItemGrid>
            </Grid>
          </div>
        }
      />
    );
  }
Example #5
Source File: Typography.jsx    From crypto-manager with MIT License 4 votes vote down vote up
function TypographyPage({ ...props }) {
  return (
    <RegularCard
      cardTitle={"Material Dashboard Heading"}
      cardSubtitle={"Created using Roboto Font Family"}
      content={
        <div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Header 1</div>
            <h1>The Life of Material Dashboard</h1>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Header 2</div>
            <h2>The Life of Material Dashboard</h2>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Header 3</div>
            <h3>The Life of Material Dashboard</h3>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Header 4</div>
            <h4>The Life of Material Dashboard</h4>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Header 5</div>
            <h5>The Life of Material Dashboard</h5>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Header 6</div>
            <h6>The Life of Material Dashboard</h6>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Paragraph</div>
            <P>
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers. I understand
              culture. I am the nucleus. I think that’s a responsibility that I
              have, to push possibilities, to show people, this is the level
              that things could be at.
            </P>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Quote</div>
            <Quote
              text="I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
              author=" Kanye West, Musician"
            />
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Muted Text</div>
            <Muted>
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers...
            </Muted>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Primary Text</div>
            <Primary>
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers...
            </Primary>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Info Text</div>
            <Info>
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers...
            </Info>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Success Text</div>
            <Success>
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers...
            </Success>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Warning Text</div>
            <Warning>
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers...
            </Warning>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Danger Text</div>
            <Danger>
              I will be the leader of a company that ends up being worth
              billions of dollars, because I got the answers...
            </Danger>
          </div>
          <div className={props.classes.typo}>
            <div className={props.classes.note}>Small Tag</div>
            <h2>
              Header with small subtitle<br />
              <Small>Use "Small" tag for the headers</Small>
            </h2>
          </div>
        </div>
      }
    />
  );
}