Skip to content
This repository was archived by the owner on May 4, 2023. It is now read-only.

Commit 0a59926

Browse files
dastrong-codigadastrong-codiga
committed
feat: created empty/error/loading states for snippet/cookbook view pages
1 parent ba25ebb commit 0a59926

File tree

5 files changed

+99
-20
lines changed

5 files changed

+99
-20
lines changed

‎src/renderer/components/ViewCookbookSnippets/ViewCookbookSnippetsEmpty.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Flex, Link } from '@chakra-ui/react';
2+
import { EmptyState } from '@codiga/components';
3+
import { useParams } from 'react-router-dom';
4+
import { APP_URL } from 'renderer/lib/config';
5+
6+
export default function ViewCookbookSnippetsEmpty() {
7+
const params = useParams();
8+
9+
return (
10+
<EmptyState
11+
title="No snippets found"
12+
description="This cookbook doesn't have any snippets."
13+
illustration="empty"
14+
py="space_64"
15+
>
16+
<Flex gridGap="space_16">
17+
<Link
18+
isExternal
19+
href={`${APP_URL}/assistant/snippet/create?cookbookId=${params.cookbookId}`}
20+
variant="primary"
21+
size="sm"
22+
>
23+
Add Snippet to Cookbook
24+
</Link>
25+
</Flex>
26+
</EmptyState>
27+
);
28+
}

‎src/renderer/components/ViewCookbookSnippets/ViewCookbookSnippetsError.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Flex, Link } from '@chakra-ui/react';
2+
import { EmptyState } from '@codiga/components';
3+
import { Link as RouterLink } from 'react-router-dom';
4+
import { APP_URL } from 'renderer/lib/config';
5+
6+
export default function ViewCookbookSnippetsError() {
7+
return (
8+
<EmptyState
9+
title="Oops! An error occured!"
10+
description="We couldn't find that cookbook."
11+
illustration="empty"
12+
py="space_64"
13+
>
14+
<Flex gridGap="space_16">
15+
<Link as={RouterLink} to="/" variant="secondary" size="sm">
16+
Go Home
17+
</Link>
18+
<Link
19+
isExternal
20+
href={`${APP_URL}/support`}
21+
variant="primary"
22+
size="sm"
23+
>
24+
Contact Support
25+
</Link>
26+
</Flex>
27+
</EmptyState>
28+
);
29+
}

‎src/renderer/components/ViewCookbookSnippets/ViewCookbookSnippetsLoading.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { HStack, Skeleton } from '@chakra-ui/react';
2+
3+
export default function ViewCookbookSnippetsLoading() {
4+
return (
5+
<HStack
6+
alignItems="center"
7+
bg="neutral.25"
8+
_dark={{ bg: 'base.dark' }}
9+
h="74px"
10+
w="full"
11+
spacing="space_16"
12+
>
13+
<Skeleton h="28px" w="28px" />
14+
<Skeleton h="26px" w="26px" />
15+
<Skeleton h="26px" w="200px" />
16+
<Skeleton h="28px" w="100px" />
17+
<Skeleton h="28px" w="100px" />
18+
<Skeleton h="28px" w="100px" />
19+
</HStack>
20+
);
21+
}

‎src/renderer/components/ViewSnippet/ViewSnippetError.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Flex, Link } from '@chakra-ui/react';
22
import { EmptyState } from '@codiga/components';
3-
import { Link as RouterLink } from 'react-router-dom';
43
import { APP_URL } from 'renderer/lib/config';
54

65
export default function ViewSnippetError() {
@@ -12,9 +11,6 @@ export default function ViewSnippetError() {
1211
py="space_64"
1312
>
1413
<Flex gridGap="space_16">
15-
<Link as={RouterLink} to="/" variant="secondary" size="sm">
16-
Go Home
17-
</Link>
1814
<Link
1915
isExternal
2016
href={`${APP_URL}/support`}

‎src/renderer/components/ViewSnippet/ViewSnippetLoading.tsx

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
1-
import { HStack, Skeleton } from '@chakra-ui/react';
1+
import { Box, HStack, Skeleton } from '@chakra-ui/react';
2+
import CodeLoading from '../Code/CodeLoading';
23

34
export default function ViewSnippetLoading() {
45
return (
5-
<HStack
6-
alignItems="center"
7-
bg="neutral.25"
8-
_dark={{ bg: 'base.dark' }}
9-
h="74px"
10-
w="full"
11-
spacing="space_16"
12-
>
13-
<Skeleton h="28px" w="28px" />
14-
<Skeleton h="26px" w="26px" />
15-
<Skeleton h="26px" w="200px" />
16-
<Skeleton h="28px" w="100px" />
17-
<Skeleton h="28px" w="100px" />
18-
<Skeleton h="28px" w="100px" />
19-
</HStack>
6+
<Box h="full">
7+
<HStack
8+
alignItems="center"
9+
bg="neutral.25"
10+
_dark={{ bg: 'base.dark' }}
11+
h="74px"
12+
w="full"
13+
spacing="space_16"
14+
>
15+
<Skeleton h="28px" w="28px" />
16+
<Skeleton h="26px" w="26px" />
17+
<Skeleton h="26px" w="200px" />
18+
<Skeleton h="28px" w="100px" />
19+
<Skeleton h="28px" w="100px" />
20+
<Skeleton h="28px" w="100px" />
21+
</HStack>
22+
23+
<CodeLoading />
24+
</Box>
2025
);
2126
}

0 commit comments

Comments
 (0)