add Suggestions component

src/features/QualificationPage/features/TestPage/TestPage.tsx

@@ -18,6 +18,7 @@ import {
 
 import Layout from 'common/Layout/Layout';
 import SEO from 'common/SEO/SEO';
+import Suggestions from './components/Suggestions/Suggestions';
 
 export type TestPageParams = {
   slug: string;
@@ -39,6 +40,7 @@ const TestPage = ({ questions, suggestions, qualification }: TestPageProps) => {
           questions.length
         } ${polishPlurals('pytanie', 'pytania', 'pytań', questions.length)}`}
       />
+      <Suggestions suggestions={suggestions} />
     </Layout>
   );
 };

src/features/QualificationPage/features/TestPage/components/Suggestions/Suggestions.tsx

@@ -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;

src/features/QualificationPage/features/TestPage/queries.ts

@@ -41,6 +41,7 @@ export const QUERY_GENERATE_TEST_SIMILAR_QUALIFICATIONS = gql`
         id
         name
         code
+        slug
       }
     }
   }