Set up page routing and base layout

frontend/__tests__/page.test.tsx

@@ -2,14 +2,13 @@ import '@testing-library/jest-dom'
 
 import { render, screen } from '@testing-library/react'
 
-import Page from '../app/page'
+import Layout from '../components/layout/layout'
 
-describe('Page', () => {
+describe('Layout', () => {
     it('renders the logo', () => {
-        render(<Page />)
+        render(<Layout children={undefined} />)
 
-        const page = screen.getByRole('img')
-
-        expect(page).toBeInTheDocument()
+        const logo = screen.getByRole('img')
+        expect(logo).toBeInTheDocument()
     })
 })

frontend/components/layout/layout.tsx

@@ -0,0 +1,16 @@
+import { NavBar } from '@/components/layout/navbar'
+import { inter } from '@/styles/fonts'
+import '@/styles/globals.css'
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode
+}>) {
+    return (
+        <>
+            <NavBar />
+            <div className={`${inter.className} mx-10`}>{children}</div>
+        </>
+    )
+}

frontend/jest.config.ts

@@ -95,7 +95,9 @@ const config: Config = {
     // ],
 
     // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-    // moduleNameMapper: {},
+    moduleNameMapper: {
+        '^@/fonts$': '<rootDir>/styles/fonts',
+    },
 
     // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
     // modulePathIgnorePatterns: [],

frontend/pages/_app.tsx

@@ -0,0 +1,11 @@
+import Layout from '@/components/layout/layout'
+
+import { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+    return (
+        <Layout>
+            <Component {...pageProps} />
+        </Layout>
+    )
+}

frontend/pages/index.tsx

@@ -0,0 +1,51 @@
+import { NewSession } from '@/components/dashboard/new-session'
+import { ProgressCard } from '@/components/dashboard/progress-card'
+import { RecentSessions } from '@/components/dashboard/recent-sessions'
+
+export default function Home() {
+    const progressData = [
+        {
+            difficulty: 'Easy',
+            score: '10/20',
+            progress: 50,
+            indicatorColor: 'bg-green-700',
+            backgroundColor: 'bg-green-500',
+        },
+        {
+            difficulty: 'Medium',
+            score: '15/27',
+            progress: 60,
+            indicatorColor: 'bg-amber-500',
+            backgroundColor: 'bg-amber-300',
+        },
+        {
+            difficulty: 'Hard',
+            score: '5/19',
+            progress: 20,
+            indicatorColor: 'bg-red-500',
+            backgroundColor: 'bg-red-400',
+        },
+    ]
+
+    return (
+        <div className="my-4">
+            <h2 className="text-xl font-bold my-6">Welcome Back, Lynn</h2>
+            <div className="flex flex-row justify-evenly -mx-2">
+                {progressData.map(({ difficulty, score, progress, indicatorColor, backgroundColor }, index) => (
+                    <ProgressCard
+                        key={index}
+                        difficulty={difficulty}
+                        score={score}
+                        progress={progress}
+                        indicatorColor={indicatorColor}
+                        backgroundColor={backgroundColor}
+                    />
+                ))}
+            </div>
+            <div className="flex flex-row justify-between my-4">
+                <NewSession />
+                <RecentSessions />
+            </div>
+        </div>
+    )
+}

frontend/styles/fonts.ts

@@ -0,0 +1,9 @@
+import { Inter } from 'next/font/google'
+
+// define variable fonts
+const inter = Inter({
+    subsets: ['latin'],
+    variable: '--font-inter',
+})
+
+export { inter }

frontend/app/globals.css → frontend/styles/globals.css

@@ -16,13 +16,13 @@
 
 pre,
 code {
-    font-family: var(--font-geist-mono);
+    font-family: var(--font-inter);
 }
 
 body {
     color: var(--foreground);
     background: var(--background);
-    font-family: var(--font-geist-sans);
+    font-family: var(--font-inter);
 }
 
 @layer utilities {

frontend/tsconfig.json

@@ -18,7 +18,8 @@
             }
         ],
         "paths": {
-            "@/*": ["./*"]
+            "@/*": ["./*"],
+            "@/fonts": ["./styles/fonts"]
         }
     },
     "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],