components#Layout TypeScript Examples

The following examples show how to use components#Layout. 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: Send.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
Send: React.FC = () => {
  const { trackPageView } = useMatomo();

  // Track page views of the Send tab
  React.useEffect(() => {
    trackPageView({
      documentTitle: "Send",
      href: "https://across.to",
    });
  }, [trackPageView]);

  return (
    <Layout>
      <ChainSelection />
      <CoinSelection />
      <AddressSelection />
      <SendAction />
    </Layout>
  );
}
Example #2
Source File: App.tsx    From iplocate with MIT License 6 votes vote down vote up 
App: React.FC = () => (
  <ThemeProvider>
    <Layout>
      <Router>
        <Switch>
          <Route path="/" component={Home} />
        </Switch>
      </Router>
    </Layout>
  </ThemeProvider>
)
Example #3
Source File: _app.page.tsx    From webapis-playground with MIT License 5 votes vote down vote up 
function MyApp({ Component, pageProps, router }: AppProps) {
  const [favicon, setFavicon] = React.useState('/faviconLight.ico');
  const changeFavicon = () => {
    const isDark = window.matchMedia('(prefers-color-scheme: dark)');
    if (!isDark.matches) return setFavicon('/faviconDark.ico');
    return setFavicon('/faviconLight.ico');
  };

  React.useEffect(() => {
    changeFavicon();
    window
      .matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', changeFavicon);
  }, []);

  return (
    <motion.div
      key={router.route}
      initial="initial"
      animate="animate"
      variants={{
        initial: {
          opacity: 0,
        },
        animate: {
          opacity: 1,
        },
      }}
    >
      <Head>
        <meta charSet="utf-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta
          name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5"
        />
        <meta name="theme-color" content="#317EFB" />

        <link rel="manifest" href="/manifest.json" />
        <link rel="apple-touch-icon" href="/apple-icon.png"></link>
      </Head>

      <SEO
        title="Web APIs Playground - Create, Share, Learn JavaScript Web APIs"
        description="The Web APIs Playground is a project to showcase the JavaScript Web APIs with examples and demonstrations. Client-side JavaScript APIs provides wrapper functions for many low-level tasks."
        icon={favicon}
        keywords={[
          'javascript',
          'web apis',
          'drag and drop',
          'image capture',
          'full screen',
          'next.js',
        ]}
        twitter={{
          site: '@tapasadhikary',
          image: 'https://webapis-playground.vercel.app/readme/og.png',
          card: 'summary_large_image',
        }}
      />

      <NextNProgress height={3} color="#fff" options={{ showSpinner: false }} />
      <Header />

      <Layout>
        <Component {...pageProps} />
      </Layout>
    </motion.div>
  );
}
Example #4
Source File: App.tsx    From crossfeed with Creative Commons Zero v1.0 Universal 5 votes vote down vote up 
App: React.FC = () => (
  <MatomoProvider value={instance}>
    <Router>
      <CFThemeProvider>
        <AuthContextProvider>
          <SearchProvider>
            <Layout>
              <LinkTracker />
              <Switch>
                <RouteGuard
                  exact
                  path="/"
                  render={() => <Redirect to="/inventory" />}
                  unauth={AuthLogin}
                  component={Risk}
                />
                <RouteGuard
                  exact
                  path="/signup"
                  render={() => <Redirect to="/inventory" />}
                  unauth={(props) => <AuthLogin {...props} showSignUp={true} />}
                  component={Risk}
                />
                <Route
                  exact
                  path="/login-gov-callback"
                  component={LoginGovCallback}
                />
                <Route
                  exact
                  path="/create-account"
                  component={AuthCreateAccount}
                />
                <Route exact path="/terms" component={TermsOfUse} />

                <RouteGuard exact path="/inventory" component={SearchPage} />
                <RouteGuard
                  path="/inventory/domain/:domainId"
                  component={Domain}
                />
                <RouteGuard path="/inventory/domains" component={Domains} />
                <RouteGuard
                  path="/inventory/vulnerabilities"
                  exact
                  component={Vulnerabilities}
                />
                <RouteGuard
                  path="/inventory/vulnerabilities/grouped"
                  component={(props) => (
                    <Vulnerabilities {...props} groupBy="title" />
                  )}
                />
                <RouteGuard
                  path="/inventory/vulnerability/:vulnerabilityId"
                  component={Vulnerability}
                />

                <RouteGuard path="/feeds" component={Feeds} />
                <RouteGuard path="/scans" component={Scans} exact />
                <RouteGuard path="/scans/history" component={Scans} exact />
                <RouteGuard path="/scans/:scanId" component={Scan} />
                <RouteGuard
                  path="/organizations/:organizationId"
                  component={Organization}
                />
                <RouteGuard path="/organizations" component={Organizations} />
                <RouteGuard path="/users" component={Users} />
                <RouteGuard path="/settings" component={Settings} />
              </Switch>
            </Layout>
          </SearchProvider>
        </AuthContextProvider>
      </CFThemeProvider>
    </Router>
  </MatomoProvider>
)
Example #5
Source File: city.tsx    From ArCovidRos with GNU Affero General Public License v3.0 4 votes vote down vote up 
Abm = () => {
  const [loading, setLoading] = useState<boolean>(false);

  const handleClick = async () => {
    setLoading(true);

    await axios({
      method: METHODS.POST,
      url: ENDPOINTS.ABM,
      data: {

      }
    }).then((response) => {

    }).catch((error) => {
      console.warn('Error while tryng to log in', error);
    });

    setLoading(false);
  };

  const [date, setDate] = useState<date>(null);
  const [city, setCity] = useState<string>('');
  const [department, setDepartment] = useState<string>('');
  const [zone, setZone] = useState<string>('');
  const [cases, setCases] = useState<number>(null);
  const [newCases, setNewCases] = useState<number>(null);
  const [deads, setDeads] = useState<number>(null);
  const [newDeads, setNewDeads] = useState<number>(null);
  const [recover, setRecover] = useState<number>(null);
  const [newRecover, setNewRecover] = useState<number>(null);
  const [url, setUrl] = useState<string>('');

  return (
    <Layout>
      <Grid container justify="center" direction="row" spacing={4}>
        <Grid item xs={12}>
          <Typography variant="h5">Alta de casos por Ciudad</Typography>
        </Grid>

        <Grid item xs={6}>
          <Grid item>
            <TextField fullWidth label="Día" required
            value={date} onChange={e => setDate(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Ciudad"
              value={city} onChange={e => setCity(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Total de confirmados" required
              value={cases} onChange={e => setCases(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Total de muertos"
              value={deads} onChange={e => setDeads(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Total de recuperados" required
              value={recover} onChange={e => setRecover(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Url" required
              value={url} onChange={e => setUrl(e?.target?.value)} />
          </Grid>
        </Grid>

        <Grid item xs={6}>
          <Grid item>
            <TextField fullWidth label="Departamento"
              value={department} onChange={e => setDepartment(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Zona"
              value={zone} onChange={e => setZone(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Nuevos casos" required
              value={newCases} onChange={e => setNewCases(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Nuevos muertos"
              value={newDeads} onChange={e => setNewDeads(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Nuevos recuperados" required
              value={newRecover} onChange={e => setNewRecover(e?.target?.value)} />
          </Grid>
        </Grid>

        <Grid item xs={12} align="right">
          <Button color="primary" disabled={loading} variant="contained" onClick={handleClick}>Agregar</Button>
        </Grid>
      </Grid>
    </Layout>
  );
}
Example #6
Source File: province.tsx    From ArCovidRos with GNU Affero General Public License v3.0 4 votes vote down vote up 
Abm = () => {
  const [loading, setLoading] = useState<boolean>(false);

  const handleClick = async () => {
    setLoading(true);

    await axios({
      method: METHODS.POST,
      url: ENDPOINTS.ABM,
      data: {

      }
    }).then((response) => {

    }).catch((error) => {
      console.warn('Error while tryng to log in', error);
    });

    setLoading(false);
  };

  const [date, setDate] = useState<date>(null);
  const [province, setProvince] = useState<string>('');
  const [cases, setCases] = useState<number>(null);
  const [newCases, setNewCases] = useState<number>(null);
  const [deads, setDeads] = useState<number>(null);
  const [newDeads, setNewDeads] = useState<number>(null);
  const [recover, setRecover] = useState<number>(null);
  const [newRecover, setNewRecover] = useState<number>(null);
  const [url, setUrl] = useState<string>('');

  return (
    <Layout>
      <Grid container justify="center" direction="row" spacing={4}>
        <Grid item xs={12}>
          <Typography variant="h5">Alta de casos por Provincia</Typography>
        </Grid>

        <Grid item xs={6}>
          <Grid item>
            <TextField fullWidth label="Día" required
              value={date} onChange={e => setDate(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Total de confirmados" required
              value={cases} onChange={e => setCases(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Total de muertos"
              value={deads} onChange={e => setDeads(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Total de recuperados" required
              value={recover} onChange={e => setRecover(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Url" required
              value={url} onChange={e => setUrl(e?.target?.value)} />
          </Grid>
        </Grid>

        <Grid item xs={6}>
          <Grid item>
            <TextField fullWidth label="Provincia" required
              value={province} onChange={e => setProvince(e?.target?.value)} />
          </Grid>
          <Grid item>
            <TextField fullWidth label="Nuevos casos"
              value={newCases} onChange={e => setNewCases(e?.target?.value)} />
          </Grid>

          <Grid item>
            <TextField fullWidth label="Nuevos muertos"
              value={newDeads} onChange={e => setNewDeads(e?.target?.value)} />
          </Grid>

          <Grid item>
            <TextField fullWidth label="Nuevos recuperados"
              value={newRecover} onChange={e => setNewRecover(e?.target?.value)} />
          </Grid>
        </Grid>

                <Grid item xs={12} align="right">
          <Button color="primary" disabled={loading} variant="contained" onClick={handleClick}>Agregar</Button>
        </Grid>
      </Grid>
    </Layout>
  );
}
Example #7
Source File: index.tsx    From ArCovidRos with GNU Affero General Public License v3.0 4 votes vote down vote up 
Home = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const [data, setData] = useState<stat[]>([]);
  const [page, setPage] = useState<number>(0);

  const getStats = async (page = 0) => {
    axios({
      method: METHODS.GET,
      url: ENDPOINTS.ABM + `/${page}`,
    })
      .then((response) => {
        const { data } = response;
        setData(data.data);
        setLoading(false);
      })
      .catch((error) => {
        console.warn("Error while getting stats", error);
        setLoading(false);
      });
  };

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
    getStats(newPage);
  };

  useEffect(() => {
    setLoading(true);
    getStats();
  }, []);

  return (
    <Layout>
      <Grid container>
        <Grid xs={12}>
          <TableContainer component={Paper}>
            <Table style={{ position: "relative" }} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell align="center">Fecha</TableCell>
                  <TableCell align="center">Provincia</TableCell>
                  <TableCell align="center">Con&nbsp;=</TableCell>
                  <TableCell align="center">Con&nbsp;+</TableCell>
                  <TableCell align="center">Mue&nbsp;=</TableCell>
                  <TableCell align="center">Mue&nbsp;+</TableCell>
                  <TableCell align="center">Rec&nbsp;=</TableCell>
                  <TableCell align="center">Rec&nbsp;+</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {loading && (
                  <LinearProgress
                    style={{ position: "absolute", width: "100%", bottom: 0 }}
                  />
                )}
                {!loading &&
                  data.map((item, index) => {
                    const {
                      fecha,
                      provincia: prov,
                      confirmados_total: confTot,
                      confirmados_dif: confDif,
                      muertes_total: mueTot,
                      muertes_dif: mueDif,
                      recuperados_total: recTot,
                      recuperados_dif: recDif,
                    } = item;

                    return (
                      <TableRow key={index}>
                        <TableCell component="th" scope="row" align="center">
                          {moment.utc(fecha).format("DD/MM/YYYY")}
                        </TableCell>
                        <TableCell align="center">{prov}</TableCell>
                        <TableCell align="center">{confTot}</TableCell>
                        <TableCell align="center">{confDif}</TableCell>
                        <TableCell align="center">{mueTot}</TableCell>
                        <TableCell align="center">{mueDif}</TableCell>
                        <TableCell align="center">{recTot}</TableCell>
                        <TableCell align="center">{recDif}</TableCell>
                      </TableRow>
                    );
                  })}
              </TableBody>
            </Table>
          </TableContainer>
          <TablePagination
            rowsPerPageOptions={[25]}
            component="div"
            count={-1}
            rowsPerPage={25}
            page={page}
            onChangePage={handleChangePage}
          />
        </Grid>
      </Grid>
      <Grid>
        <Typography variant="body2" align="right">
          {" "}
          Referencia: <b>Con</b>firmados • <b>Mue</b>rtos • <b>Rec</b>uperados •{" "}
          <b>+</b> Nuevos • <b> = </b> Total &nbsp; &nbsp;
        </Typography>
      </Grid>
    </Layout>
  );
}
Example #8
Source File: index.tsx    From ArCovidRos with GNU Affero General Public License v3.0 4 votes vote down vote up 
Login = () => {
  const { isAuthorized } = session;
  const [username, setUsername] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);
  let history = useHistory();

  const handleClick = async () => {
    setLoading(true);

    await axios({
      method: METHODS.POST,
      url: ENDPOINTS.LOGIN,
      data: {
        username,
        password,
      }
    }).then((response) => {
      const { data: { token }} = response;

      localStorage.setItem('covidapi', JSON.stringify({ token: token }));
      history.push('/');
    }).catch((error) => {
      console.warn('Error while tryng to log in', error);
    });

    setLoading(false);
  };

  useEffect(() => {
    if (isAuthorized()) {
      history.push('/abm/province');
    }
  }, [])

  return (
    <Layout className="login">
      <Grid className="login__content" container direction="column" spacing={3} xs={4}>
        <Grid item>
          <Typography variant="h5">Personal autorizado</Typography>
        </Grid>
        <Grid item>
          <TextField
            label="Usuario"
            fullWidth
            required
            onChange={event => {
              setUsername(event?.target?.value);
            }}
            value={username}
          />
        </Grid>
        <Grid item>
          <TextField
            label="Contraseña"
            fullWidth
            required
            onChange={event => {
              setPassword(event?.target?.value);
            }}
            type="password"
            value={password}
          />
        </Grid>
        <Grid item align="right">
          <Button
            style={{
              color:"#00ff8b",
              borderColor:"#00ff8b",
              fontWeight:"bold"
              }}
            disabled={loading}
            variant="outlined"
            onClick={handleClick}
          >
            Iniciar sesion
          </Button>
        </Grid>
      </Grid>
    </Layout>
  );
}
Example #9
Source File: Confirmation.tsx    From frontend-v1 with GNU Affero General Public License v3.0 4 votes vote down vote up 
Confirmation: React.FC = () => {
  const { deposit, toggle } = useDeposits();

  if (!deposit) return null;
  const amountMinusFees = receiveAmount(deposit.amount, deposit.fees);
  const tokenInfo = TOKENS_LIST[deposit.fromChain].find(
    (t) => t.address === deposit.token
  );
  const isWETH = tokenInfo?.symbol === "WETH";

  return (
    <Layout>
      <Wrapper>
        <Header>
          <Heading>Deposit succeeded</Heading>
          <SubHeading>
            Your funds will arrive in{" "}
            {getConfirmationDepositTime(deposit.toChain)}
          </SubHeading>
          <SuccessIcon>
            <Check strokeWidth={4} />
          </SuccessIcon>
        </Header>
        <InfoSection>
          <Link
            href={CHAINS[deposit.fromChain].constructExplorerLink(
              deposit.txHash
            )}
            target="_blank"
            rel="noopener norefferrer"
          >
            Explorer <ArrowUpRight width={16} height={16} />
          </Link>
          <div>
            <Row>
              <Info>
                <h3>Sending</h3>
                <div>
                  <Logo
                    src={tokenInfo?.logoURI}
                    alt={`${tokenInfo?.symbol} logo`}
                  />
                  <div>
                    {formatUnits(deposit.amount, tokenInfo?.decimals ?? 18)}{" "}
                    {tokenInfo?.symbol}
                  </div>
                </div>
              </Info>
              <Info></Info>
              <Info>
                <h3>Receiving</h3>
                <div>
                  <Logo
                    src={isWETH ? MAINNET_ETH?.logoURI : tokenInfo?.logoURI}
                    alt={`${
                      isWETH ? MAINNET_ETH?.symbol : tokenInfo?.symbol
                    } logo`}
                  />
                  <div>
                    {formatUnits(
                      amountMinusFees,
                      (isWETH ? MAINNET_ETH?.decimals : tokenInfo?.decimals) ??
                        18
                    )}{" "}
                    {isWETH ? MAINNET_ETH?.symbol : tokenInfo?.symbol}
                  </div>
                </div>
              </Info>
            </Row>
            <Info>
              <h3>From</h3>
              <div>
                <Logo
                  src={CHAINS[deposit.fromChain].logoURI}
                  alt={`${CHAINS[deposit.fromChain].name} logo`}
                />
                <div>
                  <SecondaryLink
                    href={`${CHAINS[deposit.fromChain].explorerUrl}/address/${
                      deposit.from
                    }`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <span>{deposit.from}</span>
                    <span>{shortenAddressLong(deposit.from ?? "")}</span>
                  </SecondaryLink>
                </div>
              </div>
            </Info>
            <Info>
              <h3>To</h3>
              <div>
                <Logo
                  src={CHAINS[deposit.toChain].logoURI}
                  alt={`${CHAINS[deposit.toChain].name} logo`}
                />
                <div>
                  <SecondaryLink
                    href={`${CHAINS[deposit.toChain].explorerUrl}/address/${
                      deposit.toAddress
                    }`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <span>{deposit.toAddress}</span>
                    <span>{shortenAddressLong(deposit.toAddress ?? "")}</span>
                  </SecondaryLink>
                </div>
              </div>
            </Info>
            <Info>
              <h3>Estimated time of arrival</h3>
              <div>
                <div>{getConfirmationDepositTime(deposit.toChain)}</div>
              </div>
            </Info>
          </div>
          <Button onClick={() => toggle({ showConfirmationScreen: false })}>
            Close
          </Button>
        </InfoSection>
      </Wrapper>
    </Layout>
  );
}
Example #10
Source File: NewConfirmation.tsx    From frontend-v1 with GNU Affero General Public License v3.0 4 votes vote down vote up 
Confirmation: React.FC = () => {
  const { deposit, toggle } = useDeposits();
  const [l1DepositSuccess] = useState(true);

  if (!deposit) return null;
  // const amountMinusFees = receiveAmount(deposit.amount, deposit.fees);

  const tokenInfo = TOKENS_LIST[deposit.fromChain].find(
    (t) => t.address === deposit.token
  );

  return (
    <Layout>
      <Wrapper>
        <Header>
          <SuccessIconRow>
            <SuccessIcon>
              <Check strokeWidth={4} />
            </SuccessIcon>
            {l1DepositSuccess ? (
              <SuccessIcon>
                <Check strokeWidth={4} />
              </SuccessIcon>
            ) : (
              <ConfirmationIcon>
                <div>~2 minutes</div>
              </ConfirmationIcon>
            )}
          </SuccessIconRow>
          {l1DepositSuccess ? <SuccessIconRow /> : <ConfirmationLine />}
          <SuccessInfoRow>
            <SuccessInfoBlock>
              <SuccessInfoText>Deposit succeeded</SuccessInfoText>
              <Link
                href={CHAINS[deposit.fromChain].constructExplorerLink(
                  deposit.txHash
                )}
                target="_blank"
                rel="noopener norefferrer"
              >
                Explorer <ArrowUpRight width={16} height={16} />
              </Link>
            </SuccessInfoBlock>
            <SuccessInfoBlock>
              {l1DepositSuccess ? (
                <>
                  <SuccessInfoText>Transfer succeeded</SuccessInfoText>
                  <Link
                    href={CHAINS[deposit.fromChain].constructExplorerLink(
                      deposit.txHash
                    )}
                    target="_blank"
                    rel="noopener norefferrer"
                  >
                    Explorer <ArrowUpRight width={16} height={16} />
                  </Link>
                </>
              ) : (
                <ConfirmationText>Funds transferred</ConfirmationText>
              )}
            </SuccessInfoBlock>
          </SuccessInfoRow>
        </Header>
        <InfoSection>
          <div>
            <Row>
              <Info>
                <h3>Send</h3>
                <div>
                  <Logo
                    src={tokenInfo?.logoURI}
                    alt={`${tokenInfo?.symbol} logo`}
                  />
                  <div>
                    {formatUnits(deposit.amount, tokenInfo?.decimals ?? 18)}{" "}
                    {tokenInfo?.symbol}
                  </div>
                </div>
              </Info>
              <Info></Info>
              {/* <Info>
                <h3>Receiving</h3>
                <div>
                  <Logo
                    src={tokenInfo?.logoURI}
                    alt={`${tokenInfo?.symbol} logo`}
                  />
                  <div>
                    {formatUnits(amountMinusFees, tokenInfo?.decimals ?? 18)}{" "}
                    {tokenInfo?.symbol}
                  </div>
                </div>
              </Info> */}
            </Row>
            <Info>
              <h3>From</h3>
              <div>
                <Logo
                  src={CHAINS[deposit.fromChain].logoURI}
                  alt={`${CHAINS[deposit.fromChain].name} logo`}
                />
                <div>
                  <SecondaryLink
                    href={`${CHAINS[deposit.fromChain].explorerUrl}/address/${
                      deposit.from
                    }`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {deposit.from}
                  </SecondaryLink>
                </div>
              </div>
            </Info>
            <Info>
              <h3>To</h3>
              <div>
                <Logo
                  src={CHAINS[deposit.toChain].logoURI}
                  alt={`${CHAINS[deposit.toChain].name} logo`}
                />
                <div>
                  <SecondaryLink
                    href={`${CHAINS[deposit.toChain].explorerUrl}/address/${
                      deposit.toAddress
                    }`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {deposit.toAddress}
                  </SecondaryLink>
                </div>
              </div>
            </Info>
            <Info>
              <h3>Estimated time of arrival</h3>
              <div>
                <div>~2 minutes</div>
              </div>
            </Info>
          </div>
          <Button onClick={() => toggle({ showConfirmationScreen: false })}>
            Close
          </Button>
        </InfoSection>
      </Wrapper>
    </Layout>
  );
}