finish routes and add light testing

e2e/fineArt.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test';
+
+test('navigates to page', async ({ page }) => {
+    await page.goto('/art');
+
+    await expect(page.getByText('Coming Soon')).toBeInViewport()
+});

e2e/writing.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test';
+
+test('navigates to page', async ({ page }) => {
+    await page.goto('/writing');
+
+    await expect(page.getByText('Coming Soon')).toBeInViewport()
+});

src/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import AppBar from '@mui/material/AppBar'
+import Stack from '@mui/material/Stack'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
@@ -12,16 +13,32 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
     paddingBottom: theme.spacing(2),
     // Override media queries injected by theme.mixins.toolbar
     '@media all': {
-        minHeight: 128,
+        minHeight: 80,
     },
-}));
+}))
+
+const StyledNavLink = styled(NavLink)(() => ({
+    color: 'white',
+    textDecoration: 'none'
+}))
 
 const Header: FC = () => {
     return <AppBar position="static" aria-label="header">
         <StyledToolbar>
-            <NavLink to="/" style={{ textDecoration: 'none', color: 'white' }}>
-                <Typography variant="h1">Ann Kilzer</Typography>
-            </NavLink>
+            <Stack direction='row' spacing={2} sx={{ alignItems: 'center' }}>
+                <StyledNavLink to="/" style={{ textDecoration: 'none', color: 'white' }}>
+                    <Typography variant="h1">Ann Kilzer</Typography>
+                </StyledNavLink>
+                <StyledNavLink to="/software" >
+                    <Typography variant="overline">Software</Typography>
+                </StyledNavLink>
+                <StyledNavLink to="/art" >
+                    <Typography variant="overline">Art</Typography>
+                </StyledNavLink>
+                <StyledNavLink to="/writing" >
+                    <Typography variant="overline">Writing</Typography>
+                </StyledNavLink>
+            </Stack>
         </StyledToolbar>
     </AppBar >
 }

src/routes/FineArt/FineArt.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+import Container from '@mui/material/Container'
+
+interface FineArtProps {
+}
+
+const FineArt: FC<FineArtProps> = () => {
+    return <Container>Coming Soon</Container>
+}
+
+export default FineArt

src/routes/FineArt/__test__/FineArt.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '../../../tests/customRender'
+import { screen } from '@testing-library/react'
+import FineArt from '../FineArt'
+
+describe('FineArt Route', () => {
+    it('should display the FineArt Route', async () => {
+        render(<FineArt />)
+        const text = await screen.findByText('Coming Soon')
+        expect(text).toBeVisible()
+    })
+})

src/routes/Router.tsx

@@ -8,6 +8,8 @@ import Home from './Home/Home'
 import BaseLayout from './BaseLayout'
 import Software from './Software/Software'
 import NotFound from './NotFound/NotFound'
+import FineArt from './FineArt/FineArt'
+import Writing from './Writing/Writing'
 
 const browserRouter = createBrowserRouter([{
     element: <BaseLayout />,
@@ -24,6 +26,14 @@ const browserRouter = createBrowserRouter([{
             path: 'theme',
             element: <ThemePreview />
         },
+        {
+            path: 'art',
+            element: <FineArt />
+        },
+        {
+            path: 'writing',
+            element: <Writing />
+        },
         {
             path: '*',
             element: <NotFound />

src/routes/Writing/Writing.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+import Container from '@mui/material/Container'
+
+interface WritingProps {
+}
+
+const Writing: FC<WritingProps> = () => {
+    return <Container>Coming Soon</Container>
+}
+
+export default Writing

src/routes/Writing/__test__/Writing.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '../../../tests/customRender'
+import { screen } from '@testing-library/react'
+import Writing from '../Writing'
+
+describe('FineArt Route', () => {
+    it('should display the FineArt Route', async () => {
+        render(<Writing />)
+        const text = await screen.findByText('Coming Soon')
+        expect(text).toBeVisible()
+    })
+})