updates

.env

@@ -1,2 +1,3 @@
 GOOGLE_ID=965618497314-1ao7iol0n33dp14697q7ee599lo8duau.apps.googleusercontent.com
 GOOGLE_SECRET=5loXVhLtL3KtKlPxWJ4rSBHe
+NEXTAUTH_URL=http://localhost:3000

components/CareerStack/index.tsx

@@ -0,0 +1,24 @@
+import { Stack, Text } from '@chakra-ui/layout';
+import React from 'react';
+
+interface Props {}
+
+function CareerStack(props: Props) {
+	const {} = props;
+
+	return (
+		<Stack>
+			{
+				// icon
+				// company name
+				// company website
+				// company working period
+				// company stack
+				// description
+			}
+			<Text>Bla</Text>
+		</Stack>
+	);
+}
+
+export default CareerStack;

components/Footer/index.tsx

@@ -0,0 +1,69 @@
+import {
+	Box,
+	chakra,
+	Container,
+	Stack,
+	Text,
+	useColorModeValue,
+	VisuallyHidden,
+} from '@chakra-ui/react';
+import { FaInstagram, FaTwitter, FaYoutube } from 'react-icons/fa';
+import { ReactNode } from 'react';
+
+const SocialButton = ({
+	children,
+	label,
+	href,
+}: {
+	children: ReactNode;
+	label: string;
+	href: string;
+}) => {
+	return (
+		<chakra.button
+			bg={useColorModeValue('blackAlpha.100', 'whiteAlpha.100')}
+			rounded={'full'}
+			w={8}
+			h={8}
+			cursor={'pointer'}
+			as={'a'}
+			href={href}
+			display={'inline-flex'}
+			alignItems={'center'}
+			justifyContent={'center'}
+			transition={'background 0.3s ease'}
+			_hover={{
+				bg: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
+			}}
+		>
+			<VisuallyHidden>{label}</VisuallyHidden>
+			{children}
+		</chakra.button>
+	);
+};
+
+export default function Footer() {
+	return (
+		<Box color={useColorModeValue('gray.700', 'gray.200')}>
+			<Container
+				as={Stack}
+				maxW={'6xl'}
+				py={4}
+				direction={{ base: 'column', md: 'row' }}
+				spacing={4}
+				justify={{ base: 'center', md: 'space-between' }}
+				align={{ base: 'center', md: 'center' }}
+			>
+				<Text fontSize="xs">© 2021 Zeyad's Space on internet.</Text>
+				<Stack direction={'row'} spacing={6}>
+					<SocialButton
+						label={'Twitter'}
+						href={'https://twitter.com/zeyadetman'}
+					>
+						<FaTwitter />
+					</SocialButton>
+				</Stack>
+			</Container>
+		</Box>
+	);
+}

components/Layout/index.tsx

@@ -0,0 +1,28 @@
+import { Box, Container } from '@chakra-ui/layout';
+import { useSession } from 'next-auth/client';
+import React from 'react';
+import Footer from '../Footer';
+import Navbar from '../Navbar';
+
+interface Props {
+	children: any;
+}
+
+function Layout(props: Props) {
+	const [session, loading] = useSession();
+	const { children } = props;
+
+	if (loading) return null;
+
+	return (
+		<Container maxW={'80ch'} px={4} py={6}>
+			<Navbar user={session?.user} />
+			<Box px={10} py={10}>
+				{children}
+			</Box>
+			<Footer />
+		</Container>
+	);
+}
+
+export default Layout;

components/Navbar/index.tsx

@@ -0,0 +1,127 @@
+import { ReactNode } from 'react';
+import LinkRoute from 'next/link';
+import {
+	Box,
+	Flex,
+	Avatar,
+	HStack,
+	Link,
+	IconButton,
+	Button,
+	Menu,
+	MenuButton,
+	MenuList,
+	MenuItem,
+	MenuDivider,
+	useDisclosure,
+	useColorModeValue,
+	Stack,
+} from '@chakra-ui/react';
+import { HamburgerIcon, CloseIcon, AddIcon } from '@chakra-ui/icons';
+import { signOut } from 'next-auth/client';
+
+const authLinks = [
+	{ name: 'Dashboard', url: '/dashboard' },
+	{ name: 'Settings', url: '/settings' },
+];
+
+const visitorLinks = [
+	{ name: 'About', url: '/' },
+	{ name: 'Blog', url: '/blog' },
+	{ name: 'Gallery', url: '/gallery' },
+];
+
+const NavLink = ({ children, url }: { children: ReactNode }) => (
+	<Link
+		px={2}
+		py={1}
+		rounded={'md'}
+		_hover={{
+			textDecoration: 'none',
+			bg: useColorModeValue('gray.200', 'gray.700'),
+		}}
+		href={url}
+	>
+		{children}
+	</Link>
+);
+
+export default function Navbar({ user }: any) {
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const links = user ? authLinks : visitorLinks;
+
+	return (
+		<>
+			<Box px={4}>
+				<Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
+					<IconButton
+						size={'md'}
+						icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
+						aria-label={'Open Menu'}
+						display={{ md: 'none' }}
+						onClick={isOpen ? onClose : onOpen}
+					/>
+					<HStack spacing={8} alignItems={'center'}>
+						<Box>Logo</Box>
+						<HStack
+							as={'nav'}
+							spacing={4}
+							display={{ base: 'none', md: 'flex' }}
+						>
+							{links.map(({ name, url }) => (
+								<NavLink key={url} url={url}>
+									{name}
+								</NavLink>
+							))}
+						</HStack>
+					</HStack>
+					{user ? (
+						<Flex alignItems={'center'}>
+							<Button
+								variant={'solid'}
+								colorScheme={'teal'}
+								size={'sm'}
+								mr={4}
+								leftIcon={<AddIcon />}
+							>
+								Action
+							</Button>
+							<Menu>
+								<MenuButton
+									as={Button}
+									rounded={'full'}
+									variant={'link'}
+									cursor={'pointer'}
+									minW={0}
+								>
+									<Avatar size={'sm'} src={user?.image} />
+								</MenuButton>
+								<MenuList>
+									<MenuItem
+										onClick={() => {
+											signOut();
+										}}
+									>
+										Logout
+									</MenuItem>
+								</MenuList>
+							</Menu>
+						</Flex>
+					) : null}
+				</Flex>
+
+				{isOpen ? (
+					<Box pb={4} display={{ md: 'none' }}>
+						<Stack as={'nav'} spacing={4}>
+							{links.map(({ url, name }) => (
+								<NavLink key={url} url={url}>
+									{name}
+								</NavLink>
+							))}
+						</Stack>
+					</Box>
+				) : null}
+			</Box>
+		</>
+	);
+}

next.config.js

@@ -0,0 +1,20 @@
+const compose = require('next-compose');
+module.exports = compose([
+	{
+		webpack(config, options) {
+			config.module.rules.push({
+				test: /\.mp3$/,
+				use: {
+					loader: 'file-loader',
+					options: {
+						publicPath: '/_next/static/sounds/',
+						outputPath: 'static/sounds/',
+						name: '[name].[ext]',
+						esModule: false,
+					},
+				},
+			});
+			return config;
+		},
+	},
+]);