91 lines
2.0 KiB
JavaScript
91 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { useStaticQuery, graphql } from 'gatsby';
|
|
|
|
import {
|
|
Box,
|
|
Card,
|
|
CardHeader,
|
|
Grid,
|
|
Container,
|
|
Typography,
|
|
} from '@material-ui/core';
|
|
import Link from '../components/Link';
|
|
import SEO from '../components/SEO';
|
|
|
|
const buildURLToVersionPage = (baseUrl, code) => {
|
|
return `https://${code}.${baseUrl}`;
|
|
};
|
|
|
|
function SupportedVersionsPage({ location }) {
|
|
const {
|
|
twhelp: {
|
|
versions: { items: versions },
|
|
},
|
|
site: {
|
|
siteMetadata: { baseUrl },
|
|
},
|
|
} = useStaticQuery(graphql`
|
|
query {
|
|
twhelp {
|
|
versions(sort: ["host ASC"]) {
|
|
items {
|
|
host
|
|
code
|
|
}
|
|
}
|
|
}
|
|
site {
|
|
siteMetadata {
|
|
baseUrl
|
|
}
|
|
}
|
|
}
|
|
`);
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
minHeight="100vh"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
flexDirection="column"
|
|
paddingY={5}
|
|
>
|
|
<SEO pathname={location.pathname} title="Supported versions" />
|
|
<Container>
|
|
<header>
|
|
<Typography variant="h1" align="center">
|
|
<Link color="secondary" underline="none" to="/">
|
|
TWHelp
|
|
</Link>
|
|
</Typography>
|
|
<Typography variant="h2" align="center" gutterBottom>
|
|
Version selection
|
|
</Typography>
|
|
</header>
|
|
<Grid container spacing={2}>
|
|
{versions.map(version => (
|
|
<Grid key={version.code} item xs={12} sm={6} md={4} lg={3}>
|
|
<Card>
|
|
<CardHeader
|
|
title={
|
|
<Link
|
|
color="secondary"
|
|
underline="none"
|
|
href={buildURLToVersionPage(baseUrl, version.code)}
|
|
>
|
|
{version.host}
|
|
</Link>
|
|
}
|
|
/>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default SupportedVersionsPage;
|