From 8aba89043a5bd1fba6da92b76ac0bd077929a456 Mon Sep 17 00:00:00 2001
From: Isabella Hauan-Zamora <isabehau@ntnu.no>
Date: Thu, 8 Oct 2026 13:02:16 +0200
Subject: [PATCH] Fullfort steg 2 og 3 i ny oppskrift

---
 .../src/components/new-recipe/RecipeStep1.tsx | 288 +++++-------------
 .../src/components/new-recipe/RecipeStep2.tsx | 281 +++++++++++++++--
 .../src/components/new-recipe/RecipeStep3.tsx | 185 +++++++++--
 .../new-recipe/RecipeStepIndicator.tsx        | 135 +++++---
 client/src/components/ui/Field.tsx            |  35 +++
 client/src/components/ui/Input.tsx            |  23 ++
 client/src/index.css                          |  19 ++
 client/src/routes/NewRecipePage.tsx           |  75 ++++-
 8 files changed, 729 insertions(+), 312 deletions(-)
 create mode 100644 client/src/components/ui/Field.tsx
 create mode 100644 client/src/components/ui/Input.tsx

diff --git a/client/src/components/new-recipe/RecipeStep1.tsx b/client/src/components/new-recipe/RecipeStep1.tsx
index 17eda16..b5040d4 100644
--- a/client/src/components/new-recipe/RecipeStep1.tsx
+++ b/client/src/components/new-recipe/RecipeStep1.tsx
@@ -1,286 +1,166 @@
-import { useState } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
 import Rating from '@mui/material/Rating'
 import { Button } from '../ui/Button'
+import { Field } from '../ui/Field'
+import { Input, Textarea } from '../ui/Input'
 import { Tag } from '../ui/Tag'
+import type { RecipeFormData } from '../../routes/NewRecipePage'
 
-const CATEGORIES = [
-  'Frokost',
-  'Lunsj',
-  'Middag',
-  'Dessert',
-  'Annet',
-]
-
-const TAGS = [
-  'Vegetar',
-  'Vegan',
-  'Glutenfri',
-  'Laktosefri',
-  'Under 30 min',
-]
-
+// Sånn at informasjonen blir lagret mellom stegene
 type RecipeStep1Props = {
+  data: RecipeFormData
+  setData: Dispatch<SetStateAction<RecipeFormData>>
   onNext: () => void
 }
 
-export default function RecipeStep1({
-  onNext,
-}: RecipeStep1Props) {
-  const [category, setCategory] = useState('Middag')
+const categories = ['Frokost', 'Lunsj', 'Middag', 'Dessert', 'Snacks', 'Drikke']
 
-  const [selectedTags, setSelectedTags] = useState<string[]>([
-    'Vegetar',
-    'Glutenfri',
-  ])
+const dietaryTags = ['Vegetar', 'Vegansk', 'Pescetar', 'Glutenfri', 'Laktosefri', 'Annet +']
 
-  const [servings, setServings] = useState(4)
+export default function RecipeStep1({ data, setData, onNext }: RecipeStep1Props) {
+  // Oppdaterer ETT felt i oppskriften, f.eks. update('title', 'Pasta').
+  // Erstatter alle setData({ ...data, felt: verdi }) og sørger for at resten beholdes.
+  const update = <K extends keyof RecipeFormData>(key: K, value: RecipeFormData[K]) =>
+    setData((prev) => ({ ...prev, [key]: value }))
 
-  // Velger eller fjerner en tag
-  const toggleTag = (tag: string) => {
-    if (selectedTags.includes(tag)) {
-      setSelectedTags(
-        selectedTags.filter((item) => item !== tag),
-      )
-    } else {
-      setSelectedTags([...selectedTags, tag])
-    }
-  }
+  // Klikk på en valgt tag fjerner den, klikk på en ikke-valgt tag legger den til
+  const toggleTag = (tag: string) =>
+    update(
+      'tags',
+      data.tags.includes(tag) ? data.tags.filter((item) => item !== tag) : [...data.tags, tag],
+    )
 
   return (
     <div className="w-full">
+      <p className="mb-3 text-sm text-olive">Lag din egen oppskrift og del den med andre.</p>
 
-      {/* TO KOLONNER */}
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-
+      <div className="grid gap-4 md:grid-cols-2">
         {/* VENSTRE SIDE */}
-        <div className="space-y-3">
-
-          {/* Bilde */}
-          <div>
-            <p className="form-label">Bilde av retten</p>
-
-            <button
-              type="button"
-              className="upload-button"
-            >
-              <span
-                aria-hidden="true"
-                className="
-                  mb-2 flex h-10 w-10
-                  items-center justify-center
-                  rounded-full
-                  bg-pink-light
-                  text-lg text-primary
-                "
-              >
-                ♧
-              </span>
-
-              <span className="font-semibold">
-                Last opp bilde
-              </span>
+        <div className="space-y-2">
+          <Field label="Bilde">
+            <button type="button" className="upload-button">
+              <span className="text-sm font-semibold text-primary">Last opp bilde</span>
+              <span className="mt-1 text-xs text-olive">PNG, JPG eller WebP</span>
             </button>
-          </div>
-
-          {/* Rating */}
-          <Rating
-            name="rating"
-            defaultValue={2.5}
-            precision={0.5}
-            size="medium"
-            sx={{
-              color: 'var(--color-primary)',
-            }}
-          />
-
-          {/* Kort beskrivelse */}
-          <div>
-            <label
-              htmlFor="description"
-              className="form-label"
-            >
-              Kort beskrivelse
-              <span className="text-primary"> *</span>
-            </label>
+          </Field>
 
-            <textarea
+          <Field label="Kort beskrivelse" htmlFor="description" required>
+            <Textarea
               id="description"
-              rows={3}
+              rows={2}
               placeholder="Skriv noen setninger om oppskriften..."
-              className="form-input resize-none"
+              value={data.description}
+              onChange={(e) => update('description', e.target.value)}
             />
-          </div>
-
-          {/* Instagram / TikTok */}
-          <div>
-            <label
-              htmlFor="video-url"
-              className="form-label"
-            >
-              Instagram Reel / TikTok (valgfritt)
-            </label>
+          </Field>
+
+          <Field label="Vurdering" required>
+            <Rating
+              name="recipe-rating"
+              value={data.rating}
+              precision={1}
+              sx={{ color: '#9A2A47' }}
+              onChange={(_, value) => update('rating', value)}
+            />
+          </Field>
 
-            <input
+          <Field label="Instagram Reel / TikTok (valgfritt)" htmlFor="video-url">
+            <Input
               id="video-url"
               type="url"
               placeholder="Lim inn lenke til video..."
-              className="form-input"
+              value={data.videoUrl}
+              onChange={(e) => update('videoUrl', e.target.value)}
             />
-
-            <p className="mt-1 text-xs text-olive">
-              Legg til en video hvis du vil vise hvordan retten lages.
-            </p>
-          </div>
-
+          </Field>
         </div>
 
         {/* HØYRE SIDE */}
         <div className="space-y-3">
-
-          {/* Navn på oppskriften */}
-          <div>
-            <label
-              htmlFor="recipe-title"
-              className="form-label"
-            >
-              Navn på oppskriften
-              <span className="text-primary"> *</span>
-            </label>
-
-            <input
+          <Field label="Navn på oppskrift" htmlFor="recipe-title" required>
+            <Input
               id="recipe-title"
-              type="text"
               placeholder="F.eks. kremet pasta med sopp"
-              className="form-input"
+              value={data.title}
+              onChange={(e) => update('title', e.target.value)}
             />
-          </div>
+          </Field>
 
           {/* Tid og porsjoner */}
-          <div className="grid grid-cols-2 gap-6">
-
-            {/* Tid */}
-            <div>
-              <label
-                htmlFor="prep-time"
-                className="form-label"
-              >
-                Tid
-                <span className="text-primary"> *</span>
-              </label>
-
-              <div className="relative">
-                <input
+          <div className="grid grid-cols-2 gap-4">
+            <Field label="Tilberedningstid" htmlFor="prep-time" required>
+              <div className="flex items-center gap-2">
+                <Input
                   id="prep-time"
                   type="number"
                   min={1}
-                  defaultValue={30}
-                  className="form-input max-w-20 pr-12"
+                  value={data.prepTime}
+                  onChange={(e) => update('prepTime', Number(e.target.value))}
                 />
-
-                <span className="text-xs text-olive">
-                  min
-                </span>
+                <span className="text-sm text-olive">min</span>
               </div>
-            </div>
-
-            {/* Porsjoner */}
-            <div>
-              <p className="form-label">
-                Porsjoner
-                <span className="text-primary"> *</span>
-              </p>
+            </Field>
 
-              <div className="inline-flex items-center gap-4 rounded-medium border border-peach p-1">
+            <Field label="Porsjoner" required>
+              <div className="flex h-[38px] items-center gap-3">
                 <button
                   type="button"
                   className="stepper-button"
                   aria-label="Reduser antall porsjoner"
-                  onClick={() =>
-                    setServings(Math.max(1, servings - 1))
-                  }
+                  onClick={() => update('servings', Math.max(1, data.servings - 1))}
                 >
                   −
                 </button>
 
-                <span className="min-w-4 text-center font-semibold">
-                  {servings}
-                </span>
+                <span className="min-w-5 text-center font-semibold">{data.servings}</span>
 
                 <button
                   type="button"
                   className="stepper-button"
                   aria-label="Øk antall porsjoner"
-                  onClick={() =>
-                    setServings(servings + 1)
-                  }
+                  onClick={() => update('servings', data.servings + 1)}
                 >
                   +
                 </button>
               </div>
-            </div>
-
+            </Field>
           </div>
 
-          {/* Kategori */}
-          <div>
-            <p className="form-label">
-              Kategori
-              <span className="text-primary"> *</span>
-            </p>
-
+          <Field label="Kategori" required>
             <div className="flex flex-wrap gap-2">
-              {CATEGORIES.map((item) => (
+              {categories.map((category) => (
                 <Tag
-                  key={item}
-                  selected={category === item}
-                  onClick={() => setCategory(item)}
+                  key={category}
+                  selected={data.category === category}
+                  onClick={() => update('category', category)}
                 >
-                  {item}
+                  {category}
                 </Tag>
               ))}
             </div>
-          </div>
-
-          {/* Kosthold / tags */}
-          <div>
-            <p className="form-label">
-              Kosthold / tags
-            </p>
+          </Field>
 
+          <Field label="Kosthold">
             <div className="flex flex-wrap gap-2">
-              {TAGS.map((item) => (
-                <Tag
-                  key={item}
-                  selected={selectedTags.includes(item)}
-                  onClick={() => toggleTag(item)}
-                >
-                  {item}
+              {dietaryTags.map((tag) => (
+                <Tag key={tag} selected={data.tags.includes(tag)} onClick={() => toggleTag(tag)}>
+                  {tag}
                 </Tag>
               ))}
-
-              <Tag>Ny tag +</Tag>
             </div>
-          </div>
-
+          </Field>
         </div>
       </div>
 
-      {/* KNAPPER NEDERST */}
-      <div className="mt-4 flex items-center justify-end gap-5 border-t border-peach pt-4">
-
+      {/* KNAPPER */}
+      <div className="mt-3 flex items-center justify-end gap-5 border-t border-peach pt-3">
         <Button variant="ghost" size="small">
           Lagre utkast
         </Button>
-
-        <Button
-          variant="primary"
-          size="small"
-          onClick={onNext}
-        >
+        <Button variant="primary" size="small" onClick={onNext}>
           Neste: Ingredienser
         </Button>
-
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/client/src/components/new-recipe/RecipeStep2.tsx b/client/src/components/new-recipe/RecipeStep2.tsx
index 83eeff1..9fdcfa3 100644
--- a/client/src/components/new-recipe/RecipeStep2.tsx
+++ b/client/src/components/new-recipe/RecipeStep2.tsx
@@ -1,52 +1,267 @@
+import { useState } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
+import type { RecipeFormData } from '../../routes/NewRecipePage'
 import { Button } from '../ui/Button'
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { Field } from '../ui/Field'
+import { Input, Select, Textarea } from '../ui/Input'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import DeleteIcon from '@mui/icons-material/Delete'
+import AddIcon from '@mui/icons-material/Add'
+import DragIcon from '@mui/icons-material/DragIndicator'
+import InfoIcon from '@mui/icons-material/InfoOutlined'
 
 type RecipeStep2Props = {
+  data: RecipeFormData
+  setData: Dispatch<SetStateAction<RecipeFormData>>
   onBack: () => void
   onNext: () => void
 }
 
-export default function RecipeStep2({
-  onBack,
-  onNext,
-}: RecipeStep2Props) {
+type System = 'metric' | 'imperial'
+
+const UNITS: Record<System, string[]> = {
+  metric: ['g', 'kg', 'ml', 'dl', 'l', 'ts', 'ss', 'stk'],
+  imperial: ['oz', 'lb', 'fl oz', 'tsp', 'tbsp', 'cup'],
+}
+
+const SYSTEMS: { value: System; label: string }[] = [
+  { value: 'metric', label: 'Metrisk' },
+  { value: 'imperial', label: 'Imperial' },
+]
+
+// Samme kolonner i overskriften og i hver rad: [dra] [navn] [mengde] [enhet] [slett]
+const COLUMNS = 'md:grid-cols-[20px_1fr_100px_90px_32px]'
+
+const focusRing =
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+
+export default function RecipeStep2({ data, setData, onBack, onNext }: RecipeStep2Props) {
+  // Hvilken rad som dras akkurat nå, og hvilken rad som er "klar" til å dras
+  const [dragId, setDragId] = useState<number | null>(null)
+  const [readyId, setReadyId] = useState<number | null>(null)
+
+  const units = UNITS[data.measurementSystem]
+
+  const changeMeasurementSystem = (system: System) =>
+    setData((prev) => ({
+      ...prev,
+      measurementSystem: system,
+      // Bytt bare enheter som ikke finnes i det nye systemet
+      ingredients: prev.ingredients.map((item) =>
+        UNITS[system].includes(item.unit) ? item : { ...item, unit: UNITS[system][0] },
+      ),
+    }))
+
+  const updateIngredient = (id: number, field: 'name' | 'amount' | 'unit', value: string) =>
+    setData((prev) => ({
+      ...prev,
+      ingredients: prev.ingredients.map((item) =>
+        item.id === id ? { ...item, [field]: value } : item,
+      ),
+    }))
+
+  const addIngredient = () =>
+    setData((prev) => ({
+      ...prev,
+      ingredients: [
+        ...prev.ingredients,
+        { id: Date.now(), name: '', amount: '', unit: UNITS[prev.measurementSystem][0] },
+      ],
+    }))
+
+  const removeIngredient = (id: number) =>
+    setData((prev) => ({
+      ...prev,
+      ingredients: prev.ingredients.filter((item) => item.id !== id),
+    }))
+
+  // Flytter raden som dras til plassen der den ble sluppet
+  const moveIngredient = (fromId: number, toId: number) =>
+    setData((prev) => {
+      const list = [...prev.ingredients]
+      const from = list.findIndex((item) => item.id === fromId)
+      const to = list.findIndex((item) => item.id === toId)
+      if (from < 0 || to < 0 || from === to) return prev
+      const [moved] = list.splice(from, 1)
+      list.splice(to, 0, moved)
+      return { ...prev, ingredients: list }
+    })
+
   return (
-    <div className="w-full">
+     <div className="flex min-h-[500px] w-full flex-col">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-[1fr_320px]">
+        {/* VENSTRE: ingredienser */}
+        <div>
+          <h2 className="font-heading text-3xl text-text">
+            Ingredienser <span className="text-primary">*</span>
+          </h2>
+        
+          {/* Kolonnenavn (kun på større skjermer) */}
+          <div className={`mb-2 mt-4 hidden gap-3 text-xs font-semibold md:grid ${COLUMNS}`}>
+            <span />
+            <span>Ingrediens</span>
+            <span>Mengde</span>
+            <span>Enhet</span>
+          </div>
+
+          <div className="custom-scrollbar max-h-[300px] space-y-3 overflow-y-auto pr-2">
+            {data.ingredients.map((item) => (
+              <div
+                key={item.id}
+                draggable={readyId === item.id}
+                onDragStart={() => setDragId(item.id)}
+                onDragOver={(e) => e.preventDefault()}
+                onDrop={() => dragId !== null && moveIngredient(dragId, item.id)}
+                onDragEnd={() => {
+                  setDragId(null)
+                  setReadyId(null)
+                }}
+                className={`grid grid-cols-[1fr_90px] gap-2 md:items-center md:gap-3 ${COLUMNS} ${
+                  dragId === item.id ? 'opacity-50' : ''
+                }`}
+              >
+                {/* Dra-håndtak: raden kan bare dras etter å ha tatt tak her */}
+                <span
+                  aria-hidden="true"
+                  title="Dra for å endre rekkefølge"
+                  className="hidden cursor-grab text-olive md:block"
+                  onMouseDown={() => setReadyId(item.id)}
+                  onMouseUp={() => setReadyId(null)}
+                >
+                  <DragIcon fontSize="small" />
+                </span>
+
+                <Input
+                  aria-label="Ingrediens"
+                  className="col-span-2 md:col-span-1"
+                  placeholder="f.eks. Hvetemel"
+                  value={item.name}
+                  onChange={(e) => updateIngredient(item.id, 'name', e.target.value)}
+                />
+                <Input
+                  aria-label="Mengde"
+                  type="number"
+                  min="0"
+                  step="any"
+                  placeholder="300"
+                  value={item.amount}
+                  onChange={(e) => updateIngredient(item.id, 'amount', e.target.value)}
+                />
+                <Select
+                  aria-label="Enhet"
+                  value={item.unit}
+                  onChange={(e) => updateIngredient(item.id, 'unit', e.target.value)}
+                >
+                  {units.map((unit) => (
+                    <option key={unit} value={unit}>
+                      {unit}
+                    </option>
+                  ))}
+                </Select>
+                <button
+                  type="button"
+                  aria-label={`Fjern ${item.name || 'ingrediens'}`}
+                  className={`col-span-2 flex cursor-pointer justify-center rounded-small p-1 text-primary hover:bg-pink-light md:col-span-1 ${focusRing}`}
+                  onClick={() => removeIngredient(item.id)}
+                >
+                  <DeleteIcon fontSize="small" />
+                </button>
+              </div>
+            ))}
+          </div>
+
+          {/* Legg til */}
+          <div className="mt-4 flex flex-wrap gap-4 text-sm">
+            <button
+              type="button"
+              className={`flex cursor-pointer items-center gap-1 rounded-small px-2 py-1 font-semibold text-primary hover:bg-pink-light ${focusRing}`}
+              onClick={addIngredient}
+            >
+              <AddIcon fontSize="small" />
+              Legg til ingrediens
+            </button>
+          </div>
+        </div>
+
+        {/* HØYRE: porsjoner, måleenhet og tips */}
+        <aside className="space-y-6">
+          <Field label="Antall porsjoner" required>
+            <div className="flex items-center gap-4">
+              <div className="inline-flex items-center gap-4 rounded-medium border border-peach p-1">
+                <button
+                  type="button"
+                  aria-label="Reduser antall porsjoner"
+                  className={`h-8 w-8 rounded-small bg-peach/40 hover:bg-peach ${focusRing}`}
+                  onClick={() => setData((prev) => ({ ...prev, servings: Math.max(1, prev.servings - 1) }))}
+                >
+                  −
+                </button>
+                <span className="min-w-4 text-center font-semibold">{data.servings}</span>
+                <button
+                  type="button"
+                  aria-label="Øk antall porsjoner"
+                  className={`h-8 w-8 rounded-small bg-peach/40 hover:bg-peach ${focusRing}`}
+                  onClick={() => setData((prev) => ({ ...prev, servings: prev.servings + 1 }))}
+                >
+                  +
+                </button>
+              </div>
+              <p className="text-xs text-olive">
+                Ingrediensene vil skaleres automatisk basert på dette tallet.
+              </p>
+            </div>
+          </Field>
+
+          <Field label="Måleenheter">
+            <div className="flex gap-4 text-sm font-medium">
+              {SYSTEMS.map(({ value, label }) => (
+                <label key={value} className="flex cursor-pointer items-center gap-2">
+                  <input
+                    type="radio"
+                    name="measurement-system"
+                    className="accent-primary"
+                    checked={data.measurementSystem === value}
+                    onChange={() => changeMeasurementSystem(value)}
+                  />
+                  {label}
+                </label>
+              ))}
+            </div>
+            <p className="mt-2 text-xs text-olive">Velg hvilket målesystem oppskriften skal bruke.</p>
+          </Field>
 
-      {/* Midlertidig innhold */}
-      <div className="min-h-80">
-        <h2 className="font-heading text-3xl text-text">
-          Ingredienser
-        </h2>
+          <div className="rounded-medium border border-olive/20 bg-olive/10 p-2 text-sm text-olive">
+            <p className="mb-2 flex items-center gap-2 font-semibold text-text">
+              <InfoIcon fontSize="small" className="text-primary" />
+              Tips for ingredienser
+            </p>
+            Bruk vanlige måleenheter som g, kg, ml, dl, ts og ss. Det gjør det enklere for brukere å
+            skalere og justere oppskriften etter antall porsjoner.
+          </div>
 
-        <p className="mt-2 text-sm text-olive">
-          Step 2 – ingredienser kommer her.
-        </p>
+          <div className="rounded-medium border border-peach p-2 text-sm text-olive">
+            <p className="mb-2 font-semibold text-text">Rekkefølge</p>
+            Du kan dra radene for å endre rekkefølgen på ingrediensene.
+          </div>
+        </aside>
       </div>
 
       {/* Knapper */}
-      <div className="mt-4 flex items-center justify-end gap-5 border-t border-peach pt-4">
-        <Button
-        variant="ghost" size="small" onClick={onBack}
-        className="mr-auto"
-        > 
-         <ArrowBackIcon fontSize="small" />
+      <div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-peach pt-4">
+        <Button variant="ghost" size="small" onClick={onBack}>
+          <ArrowBackIcon fontSize="small" />
           Tilbake
         </Button>
 
-        <Button variant="ghost" size="small">
-          Lagre utkast
-        </Button>
-
-        <Button
-          variant="primary"
-          size="small"
-          onClick={onNext}
-        >
-          Neste: Fremgangsmåte
-        </Button>
+        <div className="flex gap-3">
+          <Button variant="ghost" size="small">
+            Lagre utkast
+          </Button>
+          <Button variant="primary" size="small" onClick={onNext}>
+            Neste: Fremgangsmåte
+          </Button>
+        </div>
       </div>
-
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/client/src/components/new-recipe/RecipeStep3.tsx b/client/src/components/new-recipe/RecipeStep3.tsx
index 2bd6773..83b4227 100644
--- a/client/src/components/new-recipe/RecipeStep3.tsx
+++ b/client/src/components/new-recipe/RecipeStep3.tsx
@@ -1,52 +1,171 @@
+import type { Dispatch, SetStateAction } from 'react'
+import type { RecipeFormData } from '../../routes/NewRecipePage'
 import { Button } from '../ui/Button'
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { Input, Textarea } from '../ui/Input'
+import { Tag } from '../ui/Tag'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import AddIcon from '@mui/icons-material/Add'
+import DeleteIcon from '@mui/icons-material/DeleteOutlined'
+import InfoIcon from '@mui/icons-material/InfoOutlined'
 
 type RecipeStep3Props = {
+  data: RecipeFormData
+  setData: Dispatch<SetStateAction<RecipeFormData>>
   onBack: () => void
   onNext: () => void
 }
 
-export default function RecipeStep3({
-  onBack,
-  onNext,
-}: RecipeStep3Props) {
+type Mode = 'steps' | 'text'
+
+const MODES: { value: Mode; label: string }[] = [
+  { value: 'steps', label: ' Steg for steg' },
+  { value: 'text', label: ' Samlet tekst' },
+]
+
+const focusRing =
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+
+export default function RecipeStep3({ data, setData, onBack, onNext }: RecipeStep3Props) {
+  const setMode = (mode: Mode) => setData((prev) => ({ ...prev, instructionMode: mode }))
+
+  const updateStep = (id: number, field: 'text' | 'minutes', value: string) =>
+    setData((prev) => ({
+      ...prev,
+      steps: prev.steps.map((step) => (step.id === id ? { ...step, [field]: value } : step)),
+    }))
+
+  const addStep = () =>
+    setData((prev) => ({
+      ...prev,
+      steps: [...prev.steps, { id: Date.now(), text: '', minutes: '' }],
+    }))
+
+  const removeStep = (id: number) =>
+    setData((prev) => ({ ...prev, steps: prev.steps.filter((step) => step.id !== id) }))
+
   return (
-    <div className="w-full">
+    <div className="flex min-h-[500px] w-full flex-col">
+      <div className="grid flex-1 grid-cols-1 gap-8 lg:grid-cols-[1fr_320px]">
+        {/* VENSTRE: fremgangsmåte */}
+        <div>
+          <h2 className="font-heading text-3xl text-text">
+            Fremgangsmåte <span className="text-primary">*</span>
+          </h2>
+          <p className="mt-1 text-sm text-olive">Hvordan vil du legge inn fremgangsmåten?</p>
+
+          {/* Velg metode */}
+          <div className="mt-3 flex gap-2">
+            {MODES.map(({ value, label }) => (
+              <Tag
+                key={value}
+                selected={data.instructionMode === value}
+                onClick={() => setMode(value)}
+              >
+                {label}
+              </Tag>
+            ))}
+          </div>
 
-      {/* Midlertidig innhold */}
-      <div className="min-h-80">
-        <h2 className="font-heading text-3xl text-text">
-          Fremgangsmåte
-        </h2>
+          {data.instructionMode === 'text' ? (
+            /* SAMLET TEKST */
+            <div className="mt-3">
+              <Textarea
+                aria-label="Fremgangsmåte"
+                rows={9}
+                placeholder="1. Kok pastaen etter anvisningen på pakken..."
+                value={data.instructionText}
+                onChange={(e) =>
+                  setData((prev) => ({ ...prev, instructionText: e.target.value }))
+                }
+              />
+              <p className="mt-2 text-xs text-olive">
+                Nummerer hvert steg (1., 2., 3. osv.) slik at fremgangsmåten blir enkel å følge.
+              </p>
+            </div>
+          ) : (
+            /* STEG FOR STEG */
+            <div className="mt-3">
+              <div className="custom-scrollbar max-h-[40vh] space-y-3 overflow-y-auto pb-1 pr-2">
+                {data.steps.map((step, index) => (
+                  <div key={step.id} className="grid grid-cols-[24px_1fr_90px_32px] items-start gap-3">
+                    <span className="flex h-9 items-center justify-center font-semibold text-primary">
+                      {index + 1}
+                    </span>
+                    <Textarea
+                      aria-label={`Steg ${index + 1}`}
+                      rows={2}
+                      placeholder="Beskriv steget..."
+                      value={step.text}
+                      onChange={(e) => updateStep(step.id, 'text', e.target.value)}
+                    />
+                    <Input
+                      aria-label={`Tid for steg ${index + 1} i minutter`}
+                      type="number"
+                      min="0"
+                      placeholder="min"
+                      value={step.minutes}
+                      onChange={(e) => updateStep(step.id, 'minutes', e.target.value)}
+                    />
+                    <button
+                      type="button"
+                      aria-label={`Fjern steg ${index + 1}`}
+                      className={`flex h-9 cursor-pointer items-center justify-center rounded-small text-primary hover:bg-pink-light ${focusRing}`}
+                      onClick={() => removeStep(step.id)}
+                    >
+                      <DeleteIcon fontSize="small" />
+                    </button>
+                  </div>
+                ))}
+              </div>
 
-        <p className="mt-2 text-sm text-olive">
-          Step 3 – fremgangsmåte kommer her.
-        </p>
+              <button
+                type="button"
+                className={`mt-4 flex cursor-pointer items-center gap-1 rounded-small px-2 py-1 text-sm font-semibold text-primary hover:bg-pink-light ${focusRing}`}
+                onClick={addStep}
+              >
+                <AddIcon fontSize="small" />
+                Legg til steg
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* HØYRE: tid og tips */}
+        <aside className="space-y-6 lg:pt-[50px]">
+          <div>
+            <p className="mb-1 text-sm font-semibold">Tid per steg (valgfritt)</p>
+            <p className="text-xs text-olive">
+              Du kan legge til tid på enkelte steg, f.eks. 10 min steketid.
+            </p>
+          </div>
+
+          <div className="rounded-medium border border-olive/20 bg-olive/10 p-4 text-sm text-olive">
+            <p className="mb-2 flex items-center gap-2 font-semibold text-text">
+              <InfoIcon fontSize="small" className="text-primary" />
+              Tips for fremgangsmåten
+            </p>
+            Skriv korte og tydelige steg. Del opp fremgangsmåten slik at det er enkelt å følge
+            oppskriften mens man lager maten.
+          </div>
+        </aside>
       </div>
 
       {/* Knapper */}
-      <div className="mt-4 flex items-center justify-end gap-5 border-t border-peach pt-4">
-        <Button
-        variant="ghost" size="small" onClick={onBack}
-        className="mr-auto"
-        > 
-         <ArrowBackIcon fontSize="small" />
+     <div className="mt-auto flex flex-wrap items-center justify-between gap-3 border-t border-peach pt-4">
+        <Button variant="ghost" size="small" onClick={onBack}>
+          <ArrowBackIcon fontSize="small" />
           Tilbake
         </Button>
 
-        <Button variant="ghost" size="small">
-          Lagre utkast
-        </Button>
-
-        <Button
-          variant="primary"
-          size="small"
-          onClick={onNext}
-        >
-          Neste: Forhåndsvisning
-        </Button>
+        <div className="flex gap-3">
+          <Button variant="ghost" size="small">
+            Lagre utkast
+          </Button>
+          <Button variant="primary" size="small" onClick={onNext}>
+            Neste: Publiser
+          </Button>
+        </div>
       </div>
-
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/client/src/components/new-recipe/RecipeStepIndicator.tsx b/client/src/components/new-recipe/RecipeStepIndicator.tsx
index 637e6cf..ced23e6 100644
--- a/client/src/components/new-recipe/RecipeStepIndicator.tsx
+++ b/client/src/components/new-recipe/RecipeStepIndicator.tsx
@@ -13,47 +13,102 @@ export function RecipeStepIndicator({
   currentStep,
 }: RecipeStepIndicatorProps) {
   return (
-    <ol className="flex items-center justify-center text-xs">
-      {STEPS.map((step, index) => {
-        const active = index + 1 === currentStep
-
-        return (
-          <li key={step} className="flex items-center">
-
-            {/* Linje mellom stegene */}
-            {index > 0 && (
-              <div className="mx-3 h-px w-8 bg-peach" />
-            )}
-
-            <div
-              className={`flex items-center gap-2 ${
-                active ? 'text-primary' : 'text-olive'
-              }`}
+    <>
+      {/* MOBIL */}
+      <div className="w-full md:hidden">
+        {/* Nummer og linjer */}
+        <ol className="flex w-full items-center">
+          {STEPS.map((step, index) => {
+            const active = index + 1 === currentStep
+
+            return (
+              <li
+                key={step}
+                className="flex flex-1 items-center last:flex-none"
+              >
+                {/* Nummer */}
+                <span
+                  className={`
+                    flex h-6 w-6 shrink-0
+                    items-center justify-center
+                    rounded-full
+                    text-[10px]
+                    ${
+                      active
+                        ? 'bg-primary text-background'
+                        : 'bg-peach text-olive'
+                    }
+                  `}
+                >
+                  {index + 1}
+                </span>
+
+                {/* Linje */}
+                {index < STEPS.length - 1 && (
+                  <div className="mx-2 h-px flex-1 bg-peach" />
+                )}
+              </li>
+            )
+          })}
+        </ol>
+
+        {/* Navn på aktivt steg */}
+        <p className="mt-1 text-xs font-semibold text-primary">
+          {STEPS[currentStep - 1]}
+        </p>
+      </div>
+
+      {/* DESKTOP */}
+      <ol className="hidden items-center justify-center text-xs md:flex">
+        {STEPS.map((step, index) => {
+          const active = index + 1 === currentStep
+
+          return (
+            <li
+              key={step}
+              className="flex items-center"
             >
-              {/* Nummer */}
-              <span
-                className={`
-                  flex h-7 w-7
-                  items-center justify-center
-                  rounded-full
-                  ${
-                    active
-                      ? 'bg-primary text-background'
-                      : 'bg-peach'
-                  }
-                `}
+              {/* Linje mellom stegene */}
+              {index > 0 && (
+                <div className="mx-3 h-px w-8 bg-peach" />
+              )}
+
+              <div
+                className={`flex items-center gap-2 ${
+                  active
+                    ? 'text-primary'
+                    : 'text-olive'
+                }`}
               >
-                {index + 1}
-              </span>
-
-              {/* Navn */}
-              <span className={active ? 'font-semibold' : ''}>
-                {step}
-              </span>
-            </div>
-          </li>
-        )
-      })}
-    </ol>
+                {/* Nummer */}
+                <span
+                  className={`
+                    flex h-7 w-7
+                    items-center justify-center
+                    rounded-full
+                    ${
+                      active
+                        ? 'bg-primary text-background'
+                        : 'bg-peach'
+                    }
+                  `}
+                >
+                  {index + 1}
+                </span>
+
+                {/* Navn */}
+                <span
+                  className={
+                    active ? 'font-semibold' : ''
+                  }
+                >
+                  {step}
+                </span>
+              </div>
+            </li>
+          )
+        })}
+      </ol>
+    </>
   )
 }
\ No newline at end of file
diff --git a/client/src/components/ui/Field.tsx b/client/src/components/ui/Field.tsx
new file mode 100644
index 0000000..0fd1e77
--- /dev/null
+++ b/client/src/components/ui/Field.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+
+type FieldProps = {
+  label: string
+  htmlFor?: string // Utelat for grupper (tags, porsjoner) som ikke har ett enkelt felt
+  required?: boolean
+  hint?: string
+  children: ReactNode
+}
+
+export function Field({ label, htmlFor, required, hint, children }: FieldProps) {
+  const labelClass = 'mb-2 block text-sm font-semibold'
+  const content = (
+    <>
+      {label}
+      {required && <span className="text-primary"> *</span>}
+    </>
+  )
+
+  return (
+    <div>
+      {htmlFor ? (
+        <label htmlFor={htmlFor} className={labelClass}>
+          {content}
+        </label>
+      ) : (
+        <p className={labelClass}>{content}</p>
+      )}
+
+      {children}
+
+      {hint && <p className="mt-1 text-xs text-olive">{hint}</p>}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Input.tsx b/client/src/components/ui/Input.tsx
new file mode 100644
index 0000000..4d87650
--- /dev/null
+++ b/client/src/components/ui/Input.tsx
@@ -0,0 +1,23 @@
+import type {
+  InputHTMLAttributes,
+  SelectHTMLAttributes,
+  TextareaHTMLAttributes,
+} from 'react'
+
+const base =
+  'w-full rounded-medium border border-peach bg-background px-4 py-2 text-sm focus-visible:outline-2 focus-visible:outline-primary'
+
+export function Input({ className = '', ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={`${base} ${className}`} {...props} />
+}
+
+export function Textarea({
+  className = '',
+  ...props
+}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return <textarea className={`${base} resize-none ${className}`} {...props} />
+}
+
+export function Select({ className = '', ...props }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return <select className={`${base} ${className}`} {...props} />
+}
diff --git a/client/src/index.css b/client/src/index.css
index 6211b1c..524c092 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -19,6 +19,7 @@
   --color-pink: #b46a72;
   --color-pink-dark: #ddbaae;
   --color-peach: #efd7c4;
+  --color-sage: #c2c395;
 
   /* Typografi */
   --font-heading: "Tangerine", cursive;
@@ -118,3 +119,21 @@ body {
   background-color: var(--color-pink-light);
 }
 
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-sage) var(--color-background);
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--color-background);
+  border-radius: 999px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-sage);
+  border-radius: 999px;
+}
diff --git a/client/src/routes/NewRecipePage.tsx b/client/src/routes/NewRecipePage.tsx
index aeb3817..d75f8f6 100644
--- a/client/src/routes/NewRecipePage.tsx
+++ b/client/src/routes/NewRecipePage.tsx
@@ -1,8 +1,43 @@
+import { useState } from 'react'
 import RecipeStep1 from '../components/new-recipe/RecipeStep1'
 import RecipeStep2 from '../components/new-recipe/RecipeStep2'
 import RecipeStep3 from '../components/new-recipe/RecipeStep3'
 import RecipeStep4 from '../components/new-recipe/RecipeStep4'
 
+export type Ingredient = {
+  id: number
+  name: string
+  amount: string
+  unit: string
+}
+
+export type Instruction = {
+  id: number
+  text: string
+}
+
+export type RecipeFormData = {
+  // Step 1
+  title: string
+  description: string
+  videoUrl: string
+  prepTime: number
+  servings: number
+  category: string
+  tags: string[]
+  rating: number | null
+
+  // Step 2
+  measurementSystem: 'metric' | 'imperial'
+  ingredients: Ingredient[]
+  ingredientNote: string
+
+  // Step 3
+  instructionMode: 'steps' | 'text'
+  instructionText: string
+  steps: { id: number; text: string; minutes: string }[]  
+}
+
 type NewRecipePageProps = {
   currentStep: number
   setCurrentStep: (step: number) => void
@@ -12,12 +47,44 @@ export default function NewRecipePage({
   currentStep,
   setCurrentStep,
 }: NewRecipePageProps) {
+  // All informasjon om oppskriften lagres her
+  const [recipeData, setRecipeData] = useState<RecipeFormData>({
+    // Step 1
+    title: '',
+    description: '',
+    videoUrl: '',
+    prepTime: 30,
+    servings: 4,
+    category: 'Middag',
+    tags: [],
+    rating: null,
+
+    // Step 2
+    measurementSystem: 'metric',
+    ingredients: [
+      {
+        id: 1,
+        name: '',
+        amount: '',
+        unit: 'g',
+      },
+    ],
+    ingredientNote: '',
+
+    // Step 3
+    instructionMode: 'steps',
+    instructionText: '',
+    steps: [{ id: 1, text: '', minutes: '' }
+    ],
+  })
+
   return (
     <div className="w-full">
-
       {/* STEP 1 */}
       {currentStep === 1 && (
         <RecipeStep1
+          data={recipeData}
+          setData={setRecipeData}
           onNext={() => setCurrentStep(2)}
         />
       )}
@@ -25,6 +92,8 @@ export default function NewRecipePage({
       {/* STEP 2 */}
       {currentStep === 2 && (
         <RecipeStep2
+          data={recipeData}
+          setData={setRecipeData}
           onBack={() => setCurrentStep(1)}
           onNext={() => setCurrentStep(3)}
         />
@@ -33,6 +102,8 @@ export default function NewRecipePage({
       {/* STEP 3 */}
       {currentStep === 3 && (
         <RecipeStep3
+          data={recipeData}
+          setData={setRecipeData}
           onBack={() => setCurrentStep(2)}
           onNext={() => setCurrentStep(4)}
         />
@@ -41,10 +112,10 @@ export default function NewRecipePage({
       {/* STEP 4 */}
       {currentStep === 4 && (
         <RecipeStep4
+          // data={recipeData}
           onBack={() => setCurrentStep(3)}
         />
       )}
-
     </div>
   )
 }
\ No newline at end of file