forked from freeCodeCamp/chapter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
chaptersPage.tsx
40 lines (36 loc) · 1.03 KB
/
chaptersPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { Heading, VStack, Stack } from '@chakra-ui/layout';
import { NextPage } from 'next';
import React from 'react';
import { Grid, GridItem } from '@chakra-ui/react';
import { useChaptersQuery } from 'generated/graphql';
export const ChaptersPage: NextPage = () => {
const { loading, error, data } = useChaptersQuery();
if (loading) {
return <h1>Loading...</h1>;
}
if (error || !data?.chapters) {
return (
<div>
<h1>error...</h1>
<h2>{error?.message}</h2>
</div>
);
}
return (
<VStack>
<Stack w={['90%', '90%', '60%']} maxW="600px" spacing={3} mt={10} mb={5}>
<Heading>Chapters: </Heading>
<Grid mt="5%" templateColumns="repeat(2, 1fr)" columnGap="5%">
{data.chapters.map((chapter) => (
<GridItem>
<Heading size="md" key={chapter.id}>
<ChapterCard key={chapter.id} chapter={chapter} />
</Heading>
</GridItem>
))}
</Grid>
</Stack>
</Stack>
</VStack>
);
};