diff --git a/frontend/__tests__/page.test.tsx b/frontend/__tests__/page.test.tsx index 04d77283e6..4beead8cb2 100644 --- a/frontend/__tests__/page.test.tsx +++ b/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() + render() - const page = screen.getByRole('img') - - expect(page).toBeInTheDocument() + const logo = screen.getByRole('img') + expect(logo).toBeInTheDocument() }) }) diff --git a/frontend/app/fonts/GeistMonoVF.woff b/frontend/app/fonts/GeistMonoVF.woff deleted file mode 100644 index f2ae185cbf..0000000000 Binary files a/frontend/app/fonts/GeistMonoVF.woff and /dev/null differ diff --git a/frontend/app/fonts/GeistVF.woff b/frontend/app/fonts/GeistVF.woff deleted file mode 100644 index 1b62daacff..0000000000 Binary files a/frontend/app/fonts/GeistVF.woff and /dev/null differ diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx deleted file mode 100644 index 9f2022bb7c..0000000000 --- a/frontend/app/layout.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import './globals.css' - -import localFont from 'next/font/local' - -const geistSans = localFont({ - src: './fonts/GeistVF.woff', - variable: '--font-geist-sans', - weight: '100 900', -}) - -const geistMono = localFont({ - src: './fonts/GeistMonoVF.woff', - variable: '--font-geist-mono', - weight: '100 900', -}) - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode -}>) { - return ( - - {children} - - ) -} diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx deleted file mode 100644 index 3254391dfc..0000000000 --- a/frontend/app/page.tsx +++ /dev/null @@ -1,57 +0,0 @@ -'use client' - -import { NavBar } from '@/components/navbar' -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 ( -
- -
-

Welcome Back, Lynn

-
- {progressData.map(({ difficulty, score, progress, indicatorColor, backgroundColor }, index) => ( - - ))} -
-
- - -
-
-
- ) -} diff --git a/frontend/components/layout/layout.tsx b/frontend/components/layout/layout.tsx new file mode 100644 index 0000000000..d2a7f0ea80 --- /dev/null +++ b/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 ( + <> + +
{children}
+ + ) +} diff --git a/frontend/components/navbar.tsx b/frontend/components/layout/navbar.tsx similarity index 100% rename from frontend/components/navbar.tsx rename to frontend/components/layout/navbar.tsx diff --git a/frontend/jest.config.ts b/frontend/jest.config.ts index 2394724df8..b41db75aa8 100644 --- a/frontend/jest.config.ts +++ b/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$': '/styles/fonts', + }, // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader // modulePathIgnorePatterns: [], diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx new file mode 100644 index 0000000000..fb542bad89 --- /dev/null +++ b/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 ( + + + + ) +} diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx new file mode 100644 index 0000000000..24d7d25b5b --- /dev/null +++ b/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 ( +
+

Welcome Back, Lynn

+
+ {progressData.map(({ difficulty, score, progress, indicatorColor, backgroundColor }, index) => ( + + ))} +
+
+ + +
+
+ ) +} diff --git a/frontend/styles/fonts.ts b/frontend/styles/fonts.ts new file mode 100644 index 0000000000..e214420a19 --- /dev/null +++ b/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 } diff --git a/frontend/app/globals.css b/frontend/styles/globals.css similarity index 96% rename from frontend/app/globals.css rename to frontend/styles/globals.css index d547635203..c4548b38b0 100644 --- a/frontend/app/globals.css +++ b/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 { diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 1fce25792e..c00a5e132a 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -18,7 +18,8 @@ } ], "paths": { - "@/*": ["./*"] + "@/*": ["./*"], + "@/fonts": ["./styles/fonts"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],