update career section

components/CareerStack/index.tsx

@@ -1,22 +1,19 @@
-import { Stack, Text } from '@chakra-ui/layout';
+import { HStack, Stack, Text } from '@chakra-ui/layout';
 import React from 'react';
 
 interface Props {}
 
-function CareerStack(props: Props) {
-	const {} = props;
+function CareerStack(props: { career: { company: string; date: string } }) {
+	const { company, date } = props.career;
 
 	return (
-		<Stack>
-			{
-				// icon
-				// company name
-				// company website
-				// company working period
-				// company stack
-				// description
-			}
-			<Text>Bla</Text>
+		<Stack key={company}>
+			<HStack justify="space-between">
+				<Text>{company}</Text>
+				<Text color="gray.500" fontSize="sm">
+					{date}
+				</Text>
+			</HStack>
 		</Stack>
 	);
 }

components/Navbar/index.tsx

@@ -20,6 +20,7 @@ import {
 import { HamburgerIcon, CloseIcon, AddIcon } from '@chakra-ui/icons';
 import { signOut } from 'next-auth/client';
 import ColorModeIcon from '../ColorModeIcon';
+import { useRouter } from 'next/router';
 
 const authLinks = [
 	{ name: 'Dashboard', url: '/dashboard' },
@@ -32,20 +33,26 @@ const visitorLinks = [
 	{ 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>
-);
+const NavLink = ({ children, url }: { children: ReactNode; url: string }) => {
+	const router = useRouter();
+
+	return (
+		<Link
+			px={2}
+			py={1}
+			rounded={'md'}
+			_hover={{
+				textDecoration: 'none',
+				bg: useColorModeValue('gray.200', 'gray.700'),
+			}}
+			href={url}
+			onClick={() => router.push(url)}
+			as="button"
+		>
+			{children}
+		</Link>
+	);
+};
 
 export default function Navbar({ user }: any) {
 	const { isOpen, onOpen, onClose } = useDisclosure();

pages/admin.tsx

@@ -20,7 +20,7 @@ export async function getServerSideProps(ctx: NextPageContext) {
 	};
 }
 
-function Admin(props: Props) {
+function Admin(props: { google: string }) {
 	const [session, loading] = useSession();
 	const { google } = props;
 	console.log({ google });

pages/index.tsx

@@ -5,6 +5,8 @@ import { getSession, useSession } from 'next-auth/client';
 import Layout from '../components/Layout';
 import { AiFillSound } from 'react-icons/ai';
 import { Icon } from '@chakra-ui/react';
+import { careers } from '../utils/career';
+import CareerStack from '../components/CareerStack';
 
 export async function getServerSideProps(ctx: NextPageContext) {
 	const session = await getSession(ctx);
@@ -51,6 +53,10 @@ export default function Home({ user }: any) {
 			<Heading as="h2" size="xl">
 				Career
 			</Heading>
+
+			{careers.map((career) => (
+				<CareerStack career={career} />
+			))}
 		</Layout>
 	);
 }

utils/career.ts

@@ -0,0 +1,42 @@
+const careers = [
+	{
+		title: 'Front-End Engineer',
+		company: 'Rubikal - Roadtrip Nation',
+		// logo: LOGOS.rubikal,
+		date: 'Jul 2019 – Present',
+		techStack: [],
+	},
+	{
+		title: 'Front-End Engineer',
+		company: 'Cognitev',
+		// logo: LOGOS.cognitev,
+		date: 'Jul 2019 – Present',
+		techStack: [],
+	},
+	{
+		title: 'Front-End Engineer',
+		company: 'Bosta',
+		url: 'https://www.bosta.co/',
+		// logo: LOGOS.bosta,
+		date: 'May 2019 – Apr 2020',
+		techStack: [],
+	},
+	{
+		title: 'Front-End Engineer',
+		company: 'Lynks',
+		url: 'https://lynks.com',
+		// logo: LOGOS.lynks,
+		date: 'Jan 2019 – May 2019',
+		techStack: [],
+	},
+	{
+		title: 'Front-End Engineer',
+		company: 'ArqamFC',
+		url: 'https://www.arqamfc.com/',
+		// logo: LOGOS.arqamfc,
+		date: 'Jun 2018 – Nov 2018',
+		techStack: ['nodejs', 'reactjs'],
+	},
+];
+
+export { careers };

utils/drive.ts

@@ -26,3 +26,4 @@
 // 		}
 // 	}
 // );
+export default {};