Implementerer steg 1 for ny oppskrift

client/src/components/layout/Header.tsx

@@ -1,5 +1,10 @@
-import { Link, NavLink, useSearchParams } from 'react-router';
-import SearchBar from './SearchBar';
+import { Link, NavLink, useSearchParams } from 'react-router'
+import SearchBar from './SearchBar'
+import { Button } from '../ui/Button'
+import { Dialog } from '../ui/Dialog'
+import NewRecipePage, {
+  RecipeStepIndicator,
+} from '../../routes/NewRecipePage'
 
 // Fokusmarkering ved tastaturnavigasjon
 const focusRing =
@@ -72,9 +77,20 @@ export default function Header() {
               </NavLink>
             </li>
             <li>
-              <NavLink to="/new-recipe" className={newRecipeClass}>
-                Ny oppskrift
-              </NavLink>
+              <Dialog
+                trigger={
+                  <Button
+                    variant="primary"
+                    size="small"
+                  >
+                    Ny Oppskrift
+                  </Button>
+                }
+                title="Ny oppskrift"
+                headerContent={<RecipeStepIndicator />}
+              >
+                <NewRecipePage />
+              </Dialog>
             </li>
             <li>
               <NavLink to="/profile" className={userClass}>

client/src/components/ui/Dialog.tsx

@@ -4,10 +4,16 @@ import * as RadixDialog from '@radix-ui/react-dialog'
 type DialogProps = {
   trigger: ReactNode
   title: string
+  headerContent?: ReactNode
   children: ReactNode
 }
 
-export function Dialog({ trigger, title, children }: DialogProps) {
+export function Dialog({
+  trigger,
+  title,
+  headerContent,
+  children,
+}: DialogProps) {
   return (
     <RadixDialog.Root>
       {/* Elementet som åpner dialogen */}
@@ -28,35 +34,42 @@ export function Dialog({ trigger, title, children }: DialogProps) {
         <RadixDialog.Content
           className="
             fixed left-1/2 top-1/2
-            w-[90%] max-w-lg
+            w-[94%] max-w-6xl
+            max-h-[92vh]
             -translate-x-1/2 -translate-y-1/2
-
+            overflow-y-auto
             rounded-large
             bg-background
-            p-6
-
+            p-6 md:p-8
             text-text
             shadow-lg
-
             focus:outline-none
           "
         >
-          <div className="flex items-start justify-between gap-4">
+          {/* Header */}
+          <div className="flex items-center gap-8 border-b border-peach pb-4">
+
+            {/* Tittel */}
             <RadixDialog.Title
-              className="font-heading text-2xl text-text"
+              className="shrink-0 font-heading text-3xl text-text"
             >
               {title}
             </RadixDialog.Title>
 
+            {/* Stegindikator */}
+            <div className="flex flex-1 justify-center">
+              {headerContent}
+            </div>
+
+            {/* Lukk */}
             <RadixDialog.Close
               className="
+                shrink-0
                 rounded-small
                 px-2 py-1
                 text-primary
                 cursor-pointer
-
                 hover:bg-pink-light
-
                 focus-visible:outline-2
                 focus-visible:outline-offset-2
                 focus-visible:outline-primary
@@ -67,13 +80,14 @@ export function Dialog({ trigger, title, children }: DialogProps) {
             </RadixDialog.Close>
           </div>
 
-          <RadixDialog.Description
-            asChild
-          >
-            <div className="font-body mt-4">
-              {children}
-            </div>
+          <RadixDialog.Description className="sr-only">
+            Skjema for å opprette en ny oppskrift
           </RadixDialog.Description>
+
+          {/* Innholdet i dialogen */}
+          <div className="mt-4 font-body">
+            {children}
+          </div>
         </RadixDialog.Content>
       </RadixDialog.Portal>
     </RadixDialog.Root>

client/src/index.css

@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&family=Tangerine:wght@400;700&display=swap" rel="stylesheet');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Tangerine:wght@400;700&display=swap');
+
 @import "tailwindcss";
 
 
@@ -18,7 +19,7 @@
   --color-peach: #efd7c4;
 
   /* Typografi */
-  --font-heading: "Mrs Saint Delafield", Georgia, serif;
+  --font-heading: "Tangerine", cursive;
   --font-body: "DM Sans", Arial, sans-serif;
 
   /* Border radius */
@@ -53,4 +54,65 @@ body {
 
 #root {
   min-height: 100vh;
-}
+}
+
+/* Skjema */
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.form-input {
+  width: 100%;
+  border: 1px solid var(--color-peach);
+  border-radius: var(--radius-medium);
+  background-color: var(--color-background);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+.form-input:focus-visible {
+  outline: 2px solid var(--color-primary);
+}
+
+.upload-button {
+  display: flex;
+  height: 140px;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px dashed var(--color-peach);
+  border-radius: var(--radius-medium);
+  background-color: var(--color-background);
+}
+
+.upload-button:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--color-peach) 20%,
+    transparent
+  );
+}
+
+.upload-button:focus-visible {
+  outline: 2px solid var(--color-primary);
+}
+
+.stepper-button {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: var(--radius-small);
+  background-color: var(--color-peach);
+  cursor: pointer;
+}
+
+.stepper-button:hover {
+  background-color: var(--color-pink-light);
+}
+

client/src/routes/HomePage.tsx

@@ -1,6 +1,54 @@
-// TODO: vise oppskrifter pent men slideshow elns og vise populære oppskrifter
+import { useState } from 'react'
+import { Tag } from '../components/ui/Tag'
+
+
+
 export default function HomePage() {
+  const [vegetarSelected, setVegetarSelected] = useState(false)
+  const [middagSelected, setMiddagSelected] = useState(false)
+
   return (
-    <h1 className="font-heading text-4xl md:text-5xl">Hva frister i dag?</h1>
-  );
-}
+    <main className="bg-background min-h-screen">
+
+      <div className="max-w-6xl mx-auto px-6 py-10">
+
+        {/* Slideshow-placeholder */}
+        <section
+          className="
+            w-full
+            h-80
+            rounded-large
+            bg-gray-200
+            flex items-center justify-center
+            text-gray-500
+          "
+        >
+          Slideshow kommer her
+        </section>
+
+
+
+        {/* Filter-tags */}
+        <div className="flex flex-wrap gap-3 mt-8">
+          <Tag
+            selected={vegetarSelected}
+            onClick={() => setVegetarSelected(!vegetarSelected)}
+          >
+            Vegetar
+          </Tag>
+
+          <Tag
+            selected={middagSelected}
+            onClick={() => setMiddagSelected(!middagSelected)}
+          >
+            Middag
+          </Tag>
+
+          <Tag>Italiensk</Tag>
+          <Tag>Glutenfri</Tag>
+        </div>
+
+      </div>
+    </main>
+  )
+}