add Suggestions component
This commit is contained in:
parent
a5bce6dff3
commit
c21c8eda7d
|
@ -18,6 +18,7 @@ import {
|
||||||
|
|
||||||
import Layout from 'common/Layout/Layout';
|
import Layout from 'common/Layout/Layout';
|
||||||
import SEO from 'common/SEO/SEO';
|
import SEO from 'common/SEO/SEO';
|
||||||
|
import Suggestions from './components/Suggestions/Suggestions';
|
||||||
|
|
||||||
export type TestPageParams = {
|
export type TestPageParams = {
|
||||||
slug: string;
|
slug: string;
|
||||||
|
@ -39,6 +40,7 @@ const TestPage = ({ questions, suggestions, qualification }: TestPageProps) => {
|
||||||
questions.length
|
questions.length
|
||||||
} ${polishPlurals('pytanie', 'pytania', 'pytań', questions.length)}`}
|
} ${polishPlurals('pytanie', 'pytania', 'pytań', questions.length)}`}
|
||||||
/>
|
/>
|
||||||
|
<Suggestions suggestions={suggestions} />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,71 @@
|
||||||
|
import { polishPlurals } from 'polish-plurals';
|
||||||
|
import { Qualification } from 'libs/graphql';
|
||||||
|
import { QUESTIONS } from 'config/app';
|
||||||
|
import { Route } from 'config/routing';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardActions,
|
||||||
|
CardHeader,
|
||||||
|
Container,
|
||||||
|
Grid,
|
||||||
|
Typography,
|
||||||
|
} from '@material-ui/core';
|
||||||
|
import Section from 'common/Section/Section';
|
||||||
|
import Link from 'common/Link/Link';
|
||||||
|
|
||||||
|
export interface SuggestionsProps {
|
||||||
|
suggestions: Qualification[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const Suggestions = ({ suggestions }: SuggestionsProps) => {
|
||||||
|
return (
|
||||||
|
<Section>
|
||||||
|
<Container>
|
||||||
|
<Typography variant="h2" align="center" gutterBottom>
|
||||||
|
Podobne kwalifikacje
|
||||||
|
</Typography>
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
{suggestions.map(suggestion => {
|
||||||
|
return (
|
||||||
|
<Grid item xs={12} sm={6} md={4} key={suggestion.id}>
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
title={suggestion.name}
|
||||||
|
subheader={suggestion.code}
|
||||||
|
/>
|
||||||
|
<CardActions>
|
||||||
|
{QUESTIONS.map(limit => {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={{
|
||||||
|
pathname: Route.TestPage,
|
||||||
|
query: { slug: suggestion.slug, limit },
|
||||||
|
}}
|
||||||
|
key={limit}
|
||||||
|
>
|
||||||
|
<Button color="secondary">
|
||||||
|
Test {limit}{' '}
|
||||||
|
{polishPlurals(
|
||||||
|
'pytanie',
|
||||||
|
'pytania',
|
||||||
|
'pytań',
|
||||||
|
limit
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</CardActions>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Suggestions;
|
|
@ -41,6 +41,7 @@ export const QUERY_GENERATE_TEST_SIMILAR_QUALIFICATIONS = gql`
|
||||||
id
|
id
|
||||||
name
|
name
|
||||||
code
|
code
|
||||||
|
slug
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue
Block a user