Some hakupage styles

src/app/components/header.tsx

@@ -14,7 +14,7 @@ export default async function Header({title = 'Valintojen toteuttaminen', isHome
   const headerStyle: CSSProperties = {
     borderBottom: '1px solid rgba(0, 0, 0, 0.15)', 
     backgroundColor: 'white',
-    padding: '0.5rem 5vw',
+    padding: '0.5rem 3vw',
     width: '100svw',
     left: 0,
     position: 'absolute',

src/app/globals.css

@@ -3,7 +3,7 @@ body {
   color: '#666';
   text-align: center;
   min-height: 100svh;
-  max-width: 90vw;
+  max-width: 94vw;
   font-size: 1rem;
   font-family: "'Roboto', sans-serif";
   background-color: rgb(245, 245, 245);

src/app/haku/[oid]/hakukohde-list.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { getTranslation } from "@/app/lib/common";
+import { Hakukohde } from "@/app/lib/kouta";
+import { styled } from "@mui/material";
+
+const StyledList = styled('div')({
+  maxWidth: '20vw',
+  textAlign: 'left'
+});
+
+const StyledItem = styled('div')({
+  '.organizationLabel': {
+    fontWeight: 500
+  },
+
+  '&:nth-child(even)': {
+    backgroundColor: '#f5f5f5'
+  },
+  '&:hover': {
+    backgroundColor: '#e0f2fd'
+  }
+});
+
+export const HakukohdeList = ({hakukohteet}: {hakukohteet : Hakukohde[]}) =>{
+
+    return (
+      <StyledList>
+        {hakukohteet.map((hk: Hakukohde) => 
+          <StyledItem key={hk.oid}>
+            <p title={hk.organisaatioOid} className="organizationLabel">{getTranslation(hk.organisaatioNimi)}</p>
+            <p title={hk.oid}>{getTranslation(hk.nimi)}</p>
+          </StyledItem>)}
+      </StyledList>
+    );
+}

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

@@ -3,6 +3,7 @@
 import { getTranslation } from "@/app/lib/common";
 import { Hakukohde, getHaku, getHakukohteet } from "../../lib/kouta";
 import Header from "@/app/components/header";
+import { HakukohdeList } from "./hakukohde-list";
 
 export default async function HakuPage({
   params
@@ -16,12 +17,12 @@ export default async function HakuPage({
   return (
     <main>
       <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 className="mainContainer" style={{display: 'flex', flexDirection: 'row'}}>
+        <HakukohdeList hakukohteet={hakukohteet} />
+        <div style={{alignSelf: 'center', width: '70%'}}>
+          <h2>Valitse hakukohde</h2>
+          <p>Kesken...</p>
+        </div>
       </div>
     </main>
   );