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

Commit 54b734c

Browse files
kartik-gupta-ijkartik-gupta-ij
authored
add about page (#110)
Fixes #105
1 parent 330f644 commit 54b734c

File tree

2 files changed

+162
-138
lines changed

2 files changed

+162
-138
lines changed

‎src/components/Navbar/infoModal.tsx

Lines changed: 94 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
1-
import { Anchor, Box, Image, Modal, Table, Text, Tooltip } from '@mantine/core';
1+
import { Box, Button, Modal, Text, Tooltip, px } from '@mantine/core';
22
import { FC, useEffect } from 'react';
33
import { useInfoModalStyles } from './styles';
4-
import docImage from '@/assets/images/doc.webp';
5-
import githubLogo from '@/assets/images/github-logo.webp';
6-
import slackLogo from '@/assets/images/slack-logo.webp';
74
import { useGetAbout } from '@/hooks/useGetAbout';
5+
import { IconAlertCircle, IconBook2, IconBrandGithub, IconBrandSlack, IconBusinessplan } from '@tabler/icons-react';
86

97
const helpResources = [
108
{
11-
image: slackLogo,
9+
icon: IconBrandSlack,
1210
title: 'Slack',
1311
description: 'Connect with us',
1412
href: 'https://launchpass.com/parseable',
1513
},
1614
{
17-
image: githubLogo,
15+
icon: IconBrandGithub,
1816
title: 'GitHub',
1917
description: 'Find resources',
2018
href: 'https://github.com/parseablehq/parseable',
2119
},
2220
{
23-
image: docImage,
21+
icon: IconBook2,
2422
title: 'Documentation',
2523
description: 'Learn more',
2624
href: 'https://www.parseable.io/docs/introduction',
2725
},
26+
{
27+
icon: IconBusinessplan,
28+
title: 'Get paid support',
29+
description: 'Get paid support',
30+
href: 'mailto:[email protected]', //https://www.parseable.io/pricing
31+
},
2832
];
2933

3034
type HelpCardProps = {
@@ -35,16 +39,14 @@ const HelpCard: FC<HelpCardProps> = (props) => {
3539
const { data } = props;
3640

3741
const { classes } = useInfoModalStyles();
38-
const { HelpIconBox, helpToolip } = classes;
42+
const { HelpIconBox } = classes;
3943

4044
return (
41-
<Box className={HelpIconBox}>
42-
<Anchor underline={false} href={data.href} target="_blank" className={helpToolip}>
43-
<Tooltip label={data.description} position="bottom" withArrow>
44-
<Image maw={45} src={data.image} alt={data.title} />
45-
</Tooltip>
46-
</Anchor>
47-
</Box>
45+
<Tooltip label={data.description} position="bottom" withArrow sx={{ color: 'white', backgroundColor: 'black' }}>
46+
<Button className={HelpIconBox} component={'a'} href={data.href} target="_blank">
47+
<data.icon size={px('1.2rem')} stroke={1.5} />
48+
</Button>
49+
</Tooltip>
4850
);
4951
};
5052

@@ -70,88 +72,110 @@ const InfoModal: FC<InfoModalProps> = (props) => {
7072
const { classes } = useInfoModalStyles();
7173
const {
7274
container,
73-
innerContainer,
74-
infoModal,
75-
helpTitle,
76-
helpDescription,
77-
aboutText,
75+
parseableText,
7876
aboutTitle,
7977
aboutDescription,
78+
actionBtn,
8079
helpIconContainer,
80+
aboutTextBox,
81+
aboutTextKey,
82+
aboutTextValue,
83+
aboutTextInnerBox,
84+
actionBtnRed
8185
} = classes;
8286

8387
return (
8488
<Modal
85-
className={infoModal}
8689
opened={opened}
8790
onClose={close}
8891
withinPortal
8992
withCloseButton={false}
9093
size="xl"
9194
centered>
9295
<Box className={container}>
93-
<Box className={innerContainer}>
94-
<Text className={aboutTitle}>About</Text>
96+
97+
<Text className={aboutTitle}>
98+
About <span className={parseableText}>Parseable</span>
99+
</Text>
100+
<Text className={aboutDescription} id="info-modal-description">
101+
Here you can find useful information about your Parseable instance.
102+
</Text>
95103
{error ? (
96-
<Text className={aboutDescription} >Error...</Text>
104+
<Text className={aboutDescription}>Error...</Text>
97105
) : loading ? (
98106
<Text className={aboutDescription}>Loading...</Text>
99107
) : data ? (
100108
<>
101-
<Text className={aboutDescription} id="info-modal-description">
102-
Here you can find useful information about your Parseable instance.
103-
</Text>
104-
105-
<Table highlightOnHover withBorder>
106-
<tbody className={aboutText}>
107-
<tr>
108-
<td>Commit</td>
109-
<td>{data.commit}</td>
110-
</tr>
111-
<tr>
112-
<td>Deployment Id</td>
113-
<td>{data.deploymentId}</td>
114-
</tr>
115-
<tr>
116-
<td>Latest Version</td>
117-
<td>{data.latestVersion}</td>
118-
</tr>
119-
<tr>
120-
<td>License</td>
121-
<td>{data.license}</td>
122-
</tr>
123-
<tr>
124-
<td>Mode</td>
125-
<td>{data.mode}</td>
126-
</tr>
127-
<tr>
128-
<td>Staging</td>
129-
<td>{data.staging}</td>
130-
</tr>
131-
<tr>
132-
<td>Store</td>
133-
<td>{data.store}</td>
134-
</tr>
135-
<tr>
136-
<td>Version</td>
137-
<td>{data.version}</td>
138-
</tr>
139-
</tbody>
140-
</Table>
109+
<Box className={aboutTextBox}>
110+
<Box className={aboutTextInnerBox}>
111+
<Text className={aboutTextKey}> License: </Text>
112+
<Text className={aboutTextValue}> {data.license} </Text>
113+
<Button
114+
variant="outline"
115+
component={'a'}
116+
href="mailto:[email protected]"
117+
target="_blank"
118+
className={actionBtn}
119+
>
120+
Upgrade to commercial license
121+
</Button>
122+
</Box>
123+
124+
</Box>
125+
<Box className={aboutTextBox}>
126+
<Box className={aboutTextInnerBox}>
127+
<Text className={aboutTextKey}> Commit: </Text>
128+
<Text className={aboutTextValue}> {data.commit} </Text>
129+
</Box>
130+
<Box className={aboutTextInnerBox}>
131+
<Text className={aboutTextKey}> Version: </Text>
132+
<Text className={aboutTextValue}> {data.version} </Text>
133+
{data.updateAvailable ? (
134+
<Button
135+
variant="outline"
136+
component={'a'}
137+
href="https://github.com/parseablehq/parseable/releases/latest"
138+
target="_blank"
139+
className={actionBtnRed}
140+
leftIcon={<IconAlertCircle size={px('1.2rem')} stroke={1.5} />}
141+
>
142+
Upgrade to latest version {data.latestVersion}
143+
</Button> ): null}
144+
</Box>
145+
146+
</Box>
147+
<Box className={aboutTextBox}>
148+
<Box className={aboutTextInnerBox}>
149+
<Text className={aboutTextKey}> Deployment Id: </Text>
150+
<Text className={aboutTextValue}> {data.deploymentId} </Text>
151+
</Box>
152+
<Box className={aboutTextInnerBox}>
153+
<Text className={aboutTextKey}>Mode</Text>
154+
<Text className={aboutTextValue}>{data.mode}</Text>
155+
</Box>
156+
<Box className={aboutTextInnerBox}>
157+
<Text className={aboutTextKey}>Staging</Text>
158+
<Text className={aboutTextValue}>{data.staging}</Text>
159+
</Box>
160+
<Box className={aboutTextInnerBox}>
161+
<Text className={aboutTextKey}>Store</Text>
162+
<Text className={aboutTextValue}>{data.store}</Text>
163+
</Box>
164+
</Box>
141165
</>
142166
) : null}
143-
</Box>
144-
<Box className={innerContainer}>
145-
<Text className={helpTitle}>Need any help?</Text>
146-
<Text className={helpDescription}>Here you can find useful resources and information.</Text>
167+
168+
169+
<Text className={aboutTitle}>Need any help?</Text>
170+
<Text className={aboutDescription}>Here you can find useful resources and information.</Text>
147171

148-
<Box mt={12} className={helpIconContainer}>
172+
<Box mt={15} className={helpIconContainer}>
149173
{helpResources.map((data) => (
150174
<HelpCard key={data.title} data={data} />
151175
))}
152176
</Box>
153177
</Box>
154-
</Box>
178+
155179
</Modal>
156180
);
157181
};

0 commit comments

Comments
 (0)