Mainlayout

.gitignore

@@ -6,6 +6,7 @@
 
 # Logs
 logs
+!src/**/logs
 *.log
 npm-debug.log*
 yarn-debug.log*

public/manifest.json

@@ -1,25 +1,15 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+	"short_name": "Parseable",
+	"name": "Parseable Log Storage",
+	"icons": [
+		{
+			"src": "favicon.ico",
+			"sizes": "64x64 32x32 24x24 16x16",
+			"type": "image/x-icon"
+		}
+	],
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
 }

src/@types/mantine.d.ts

@@ -1,7 +1,7 @@
 import type { Tuple, DefaultMantineColor } from '@mantine/core';
-import type { widths, heights, sizing } from './sizing';
+import type { widths, heights, sizing } from '../components/Mantine/sizing';
 
-export const CustomColorsName = ['white', 'brandPrimary', 'brandSecondary', 'error'] as const;
+export const CustomColorsName = ['white', 'brandPrimary', 'brandSecondary', 'error', 'dimmed'] as const;
 
 const CustomFontWeights = [
 	'thin',

src/components/Header/index.tsx

@@ -0,0 +1,149 @@
+import logoInvert from '@/assets/images/brand/logo-invert.svg';
+import docImage from '@/assets/images/doc.webp';
+import githubLogo from '@/assets/images/github-logo.webp';
+import slackLogo from '@/assets/images/slack-logo.webp';
+import { HOME_ROUTE, LOGIN_ROUTE } from '@/constants/routes';
+import { HEADER_HEIGHT } from '@/constants/theme';
+import type { BoxProps, HeaderProps as MantineHeaderProps, UnstyledButtonProps } from '@mantine/core';
+import { Anchor, Box, Card, Image, Header as MantineHeader, Text, UnstyledButton } from '@mantine/core';
+import { useDisclosure, useLocalStorage } from '@mantine/hooks';
+import { IconHelpCircle, IconLogout, IconUser } from '@tabler/icons-react';
+import { FC, Fragment } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useHeaderStyles } from './styles';
+import Modal from '../Modal';
+
+type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
+
+const Header: FC<HeaderProps> = (props) => {
+	const { classes } = useHeaderStyles();
+	const { container, actionsContainer } = classes;
+
+	return (
+		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} px="xl">
+			<Link to={HOME_ROUTE} style={{ height: 25 }}>
+				<Image maw={HEADER_HEIGHT * 2.5} mx="auto" src={logoInvert} alt="Parseable Logo" />
+			</Link>
+			<Box className={actionsContainer}>
+				<Help mr="lg" />
+				<User mr="lg" />
+				<SignOut />
+			</Box>
+		</MantineHeader>
+	);
+};
+
+const helpResources = [
+	{
+		image: slackLogo,
+		title: 'Slack',
+		description: 'Connect with us',
+		href: 'https://launchpass.com/parseable',
+	},
+	{
+		image: githubLogo,
+		title: 'GitHub',
+		description: 'Find resources',
+		href: 'https://github.com/parseablehq/parseable',
+	},
+	{
+		image: docImage,
+		title: 'Documentation',
+		description: 'Learn more',
+		href: 'https://www.parseable.io/docs/introduction',
+	},
+];
+
+const Help: FC<UnstyledButtonProps> = (props) => {
+	const [opened, { close, open }] = useDisclosure();
+
+	const { classes } = useHeaderStyles();
+	const { actionBtn, actionBtnIcon, actionBtnText, helpTitle, helpDescription } = classes;
+
+	return (
+		<Fragment>
+			<UnstyledButton {...props} className={actionBtn} onClick={open} color="brandSecondary.1" variant="filled">
+				<IconHelpCircle size="1.1rem" className={actionBtnIcon} />
+				<Text ml="xs" className={actionBtnText}>
+					Help
+				</Text>
+			</UnstyledButton>
+			<Modal opened={opened} onClose={close} withCloseButton={false} size="sm" centered>
+				<Text className={helpTitle}>Need any help?</Text>
+				<Text className={helpDescription}>Here you can find useful resources and information.</Text>
+				<Box>
+					{helpResources.map((data) => (
+						<HelpCard key={data.title} data={data} />
+					))}
+				</Box>
+			</Modal>
+		</Fragment>
+	);
+};
+
+type HelpCardProps = {
+	data: (typeof helpResources)[number];
+};
+
+const HelpCard: FC<HelpCardProps> = (props) => {
+	const { data } = props;
+
+	const { classes } = useHeaderStyles();
+	const { helpCard, helpCardTitle, helpCardDescription } = classes;
+
+	return (
+		<Anchor underline={false} href={data.href} target="_blank">
+			<Card className={helpCard}>
+				<Box>
+					<Text className={helpCardTitle}>{data.title}</Text>
+					<Text className={helpCardDescription}>{data.description}</Text>
+				</Box>
+				<Image maw={45} src={data.image} alt={data.title} />
+			</Card>
+		</Anchor>
+	);
+};
+
+const User: FC<BoxProps> = (props) => {
+	const [username] = useLocalStorage({ key: 'username', getInitialValueInEffect: false });
+
+	const { classes } = useHeaderStyles();
+	const { userContainer, userIcon, userText } = classes;
+
+	return (
+		<Box className={userContainer} {...props}>
+			<IconUser size="1.1rem" className={userIcon} />
+			<Text ml="xs" className={userText}>
+				{username}
+			</Text>
+		</Box>
+	);
+};
+
+const SignOut: FC<UnstyledButtonProps> = (props) => {
+	const nav = useNavigate();
+	const [, , removeCredentials] = useLocalStorage({ key: 'credentials' });
+	const [, , removeUsername] = useLocalStorage({ key: 'username' });
+
+	const onSignOut = () => {
+		removeCredentials();
+		removeUsername();
+		nav(
+			{
+				pathname: LOGIN_ROUTE,
+			},
+			{ replace: true },
+		);
+	};
+
+	const { classes } = useHeaderStyles();
+	const { actionBtn, actionBtnIcon } = classes;
+
+	return (
+		<UnstyledButton {...props} onClick={onSignOut} className={actionBtn}>
+			<IconLogout size="1.2rem" className={actionBtnIcon} />
+		</UnstyledButton>
+	);
+};
+
+export default Header;

src/components/Header/styles.tsx

@@ -0,0 +1,117 @@
+import { createStyles } from '@mantine/core';
+
+export const useHeaderStyles = createStyles((theme) => {
+	const { primaryColor, colors, spacing, fontSizes, radius, shadows } = theme;
+	const { fontWeights, widths, heights } = theme.other;
+
+	const pColor = colors[primaryColor][2];
+	const sColor = colors.brandSecondary[2];
+
+	return {
+		container: {
+			background: pColor,
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'space-between',
+			paddingLeft: spacing.lg,
+			border: 'none',
+		},
+
+		actionsContainer: {
+			display: 'flex',
+			alignItems: 'center',
+		},
+
+		actionBtn: {
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+
+			'&:hover *': {
+				color: sColor,
+			},
+		},
+
+		actionBtnIcon: {
+			color: colors.gray[3],
+		},
+
+		actionBtnText: {
+			color: colors.gray[3],
+			fontSize: fontSizes.sm,
+		},
+
+		helpTitle: {
+			fontSize: fontSizes.md,
+			textAlign: 'center',
+			color: pColor,
+			fontWeight: fontWeights.bold,
+		},
+
+		helpDescription: {
+			fontSize: fontSizes.sm,
+			textAlign: 'center',
+			color: colors.dimmed[0],
+			marginTop: spacing.xs,
+
+			'&::after': {
+				content: '""',
+				borderRadius: radius.lg,
+				display: 'block',
+				backgroundColor: sColor,
+				width: widths[14],
+				height: heights['0.5'],
+				marginTop: theme.spacing.sm,
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			},
+		},
+
+		helpCard: {
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'space-between',
+			boxShadow: shadows.sm,
+			marginTop: spacing.sm,
+			transition: 'transform .2s ease-in-out',
+
+			'&:hover': {
+				transform: 'scale(1.05)',
+			},
+		},
+
+		helpCardTitle: {
+			fontWeight: fontWeights.semibold,
+
+			'&::after': {
+				content: '""',
+				display: 'block',
+				backgroundColor: pColor,
+				width: widths[14],
+				height: heights['0.5'],
+				marginTop: spacing.xs,
+				marginBottom: spacing.xs,
+			},
+		},
+
+		helpCardDescription: {
+			color: colors.dimmed[0],
+			fontSize: fontSizes.sm,
+		},
+
+		userContainer: {
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+		},
+
+		userIcon: {
+			color: colors.gray[3],
+		},
+
+		userText: {
+			color: colors.gray[3],
+			fontSize: fontSizes.sm,
+		},
+	};
+});

src/components/Mantine/theme.tsx

@@ -21,6 +21,7 @@ export const theme: MantineThemeOverride = {
 		brandPrimary: ['#4192DF', '#1F288E', '#1A237E', '#10143E'],
 		brandSecondary: ['#F6BA74', '#F29C38', '#C27D2D'],
 		error: ['#8F0F27'],
+		dimmed: ['#868e96'],
 	},
 	primaryColor: 'brandPrimary',
 	other: {