Header styles WIP

src/app/components/header.tsx

@@ -0,0 +1,41 @@
+import { CSSProperties } from "react";
+
+export type HeaderProps = 
+{
+  title?: string,
+  isHome?: boolean,
+}
+
+export default async function Header({title = 'Valintojen toteuttaminen', isHome = false} : HeaderProps) {
+
+  const HEADER_HEIGHT = '4rem';
+  const TITLE_SIZE = isHome? '2rem' : '1.5rem';
+
+  const headerStyle: CSSProperties = {
+    borderBottom: '1px solid rgba(0, 0, 0, 0.15)', 
+    backgroundColor: 'white',
+    padding: '0.5rem 5vw',
+    width: '100svw',
+    left: 0,
+    position: 'absolute',
+    height: HEADER_HEIGHT,
+    display: 'flex',
+    textAlign: 'left',
+    justifyContent: 'flex-start',
+    alignContent: 'center'
+  };
+
+  const titleStyle: CSSProperties = {
+    alignSelf: 'center',
+    fontSize: TITLE_SIZE,
+  };
+
+  return (
+    <header>
+      <div style={headerStyle}>
+        <h1 style={titleStyle}>{title}</h1>
+      </div>
+      <div style={{height: HEADER_HEIGHT, marginBottom: '4rem'}} />
+    </header>
+  );
+};

src/app/globals.css

@@ -10,30 +10,32 @@ body {
 }
 
 h1 {
-  font-size: 3rem;
+  font-size: 2.25rem;
 }
 
 h2 {
-  font-size: 2.5rem;
+  font-size: 1.75rem;
 }
 
 h3 {
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 h4 {
-  font-size: 1.5rem
+  font-size: 1.25rem
 }
 
 h5 {
-  font-size: 1.25rem;
-}
-
-h6 {
   font-size: 1rem;
 }
 
 h1, h2, h3, h4, h5, h6 {
   color: #2a2a2a;
   font-weight: 500;
 }
+
+.mainContainer {
+  border: 1px solid rgba(0, 0, 0, 0.15); 
+  background-color: white;
+  padding: 2rem;
+}

src/app/haku/[oid]/page.tsx

@@ -2,6 +2,7 @@
 
 import { getTranslation } from "@/app/lib/common";
 import { Hakukohde, getHaku, getHakukohteet } from "../../lib/kouta";
+import Header from "@/app/components/header";
 
 export default async function HakuPage({
   params
@@ -14,16 +15,13 @@ export default async function HakuPage({
 
   return (
     <main>
-      <div>
-        <h1>Valintojen Toteuttaminen</h1>
-        <h2>{getTranslation(hakuNimi)}</h2>
-        <div>
-          {hakukohteet.map((hk: Hakukohde) => 
-            <div key={hk.oid}>
-              <p title={hk.organisaatioOid}>{getTranslation(hk.organisaatioNimi)}</p>
-              <p title={hk.oid}>{getTranslation(hk.nimi)}</p>
-            </div>)}
-        </div>
+      <Header title={getTranslation(hakuNimi)} />
+      <div className="mainContainer">
+        {hakukohteet.map((hk: Hakukohde) => 
+          <div key={hk.oid}>
+            <p title={hk.organisaatioOid}>{getTranslation(hk.organisaatioNimi)}</p>
+            <p title={hk.oid}>{getTranslation(hk.nimi)}</p>
+          </div>)}
       </div>
     </main>
   );

src/app/page.tsx

@@ -4,6 +4,7 @@ import { cookies } from 'next/headers';
 import { configuration } from "./lib/configuration";
 import { HakuSelector } from "./components/haku-selector";
 import { getHakutavat } from "./lib/koodisto";
+import Header from "./components/header";
 
 export default async function Home() {
 
@@ -12,19 +13,12 @@ export default async function Home() {
   const haut = await getHaut();
   const hakutavat = await getHakutavat();
 
-  const mainContainerStyle = {
-    border: '1px solid rgba(0, 0, 0, 0.15)', 
-    backgroundColor: 'white',
-    padding: '2rem',
-  };
-
   return (
     <main>
-      <div>
-        <h1 style={{textAlign: 'left'}}>Valintojen Toteuttaminen</h1>
-        <div style={mainContainerStyle}>
-          <HakuSelector haut={haut} hakutavat={hakutavat}/>
-        </div>
+      <Header isHome={true} />
+      <div className="mainContainer">
+        <h2 style={{textAlign: 'left'}}>Haut</h2>
+        <HakuSelector haut={haut} hakutavat={hakutavat}/>
       </div>
     </main>
   );