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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 =</TableCell>
<TableCell align="center">Con +</TableCell>
<TableCell align="center">Mue =</TableCell>
<TableCell align="center">Mue +</TableCell>
<TableCell align="center">Rec =</TableCell>
<TableCell align="center">Rec +</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
</Typography>
</Grid>
</Layout>
);
}
Example #8
| Source File: index.tsx From ArCovidRos with GNU Affero General Public License v3.0 | 4 votes |
|
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 |
|
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 |
|
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>
);
}
