feat: add a basic header

Resolves #74
JonasKellerer · Nov 22, 2024 · 13f31c4 · 13f31c4
1 parent f0d3422
commit 13f31c4
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 12 deletions.
diff --git a/website/cypress/e2e/app.cy.ts b/website/cypress/e2e/app.cy.ts
@@ -2,7 +2,7 @@ describe('Navigation', () => {
     it('should navigate to the survey page', () => {
         cy.visit('http://localhost:3000');
 
-        cy.get('a[href*="survey"]').click();
+        cy.get('a[href*="survey"]').first().click();
 
         cy.url().should('include', '/survey');
 

diff --git a/website/public/empty b/website/public/empty
diff --git a/website/public/next.svg b/website/public/next.svg
diff --git a/website/public/vercel.svg b/website/public/vercel.svg
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
+import { Header } from '@/components/layout/Header';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -12,7 +13,10 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html lang='en'>
-            <body className={inter.className}>{children}</body>
+            <body className={inter.className}>
+                <Header />
+                {children}
+            </body>
         </html>
     );
 }
diff --git a/website/src/components/layout/Header.tsx b/website/src/components/layout/Header.tsx
@@ -0,0 +1,44 @@
+import Link from 'next/link';
+
+export function Header() {
+    return (
+        <header className={'sticky'}>
+            <div className='mb-2 flex items-center justify-between border-b p-2 px-8'>
+                <Logo />
+                <Navigation />
+                <CallToAction />
+            </div>
+        </header>
+    );
+}
+
+function Logo() {
+    return (
+        <Link href='/' className='text-lg font-bold'>
+            Varilis
+        </Link>
+    );
+}
+
+function Navigation() {
+    return (
+        <nav className='flex items-center justify-between p-4'>
+            <ul className='flex space-x-4'>
+                <li>
+                    <Link href='/'>Home</Link>
+                </li>
+                <li>
+                    <Link href='/survey'>Survey</Link>
+                </li>
+            </ul>
+        </nav>
+    );
+}
+
+function CallToAction() {
+    return (
+        <div className='flex items-center justify-center'>
+            <Link href='/survey'>Take the survey</Link>
+        </div>
+    );
+}