diff --git a/client/src/App.tsx b/client/src/App.tsx index ef1b528..e6777b2 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -5,30 +5,34 @@ import RecipeListPage from './routes/RecipeListPage' import RecipeDetailPage from './routes/RecipeDetailPage' import FavoritesPage from './routes/FavoritesPage' import ShoppingListPage from './routes/ShoppingListPage' -import NewRecipePage from './routes/NewRecipePage' import ProfilePage from './routes/ProfilePage' import NotFoundPage from './routes/NotFoundPage' import DesignTestPage from './routes/DesignTestPage' -//flyttet testsiden til designTestPage under routes +// Flyttet testsiden til DesignTestPage under routes export default function App() { return ( - {/* Layout-rute: alle sidene under vises inni Layout (med felles header) */} + {/* Alle sidene under vises inni Layout med felles header */} }> } /> - {/* Alle oppskrifter, og søkeresultater med ?q=... */} + + {/* Oppskrifter */} } /> } /> + } /> } /> - } /> } /> - {/* Testside for designsystemet. Finnes bare i utvikling (npm run dev) */} - {import.meta.env.DEV && } />} - {/* Hvis det er noen stier som ikke matcher de over */} + + {/* Testside for designsystemet */} + {import.meta.env.DEV && ( + } /> + )} + + {/* Hvis ingen av stiene over matcher */} } /> ) -} +} \ No newline at end of file diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx index be81eb8..654a49e 100644 --- a/client/src/components/layout/Header.tsx +++ b/client/src/components/layout/Header.tsx @@ -1,54 +1,49 @@ +import { useState } from 'react' 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' +import NewRecipePage from '../../routes/NewRecipePage' +import { RecipeStepIndicator } from '../new-recipe/RecipeStepIndicator' // Fokusmarkering ved tastaturnavigasjon const focusRing = - 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'; + 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary' -// Aktiv lenke markeres med både farge og understrek, slik at det ikke bare er farge som skiller den ut. NavLink setter aria-current="page" automatisk. +// Aktiv lenke markeres med både farge og understrek function navLinkClass({ isActive }: { isActive: boolean }) { - const base = `whitespace-nowrap font-body transition-colors hover:text-primary ${focusRing}`; + const base = `whitespace-nowrap font-body transition-colors hover:text-primary ${focusRing}` return isActive ? `${base} text-primary underline underline-offset-4` - : `${base} text-text`; + : `${base} text-text` } -// Lenkene er stylet som Button, men er lenker fordi de navigerer. -// whitespace-nowrap hindrer at teksten brytes over to linjer. -const buttonBase = `whitespace-nowrap rounded-medium px-3 py-2 text-sm font-body transition-colors ${focusRing}`; +// Styling for knapper/lenker i header +const buttonBase = `whitespace-nowrap rounded-medium px-3 py-2 text-sm font-body transition-colors ${focusRing}` -// Hovedknapp, understreket når siden er aktiv -/*function newRecipeClass({ isActive }: { isActive: boolean }) { - const base = `${buttonBase} bg-primary text-background hover:bg-primary-hover`; - - return isActive ? `${base} underline underline-offset-4` : base; -}*/ - -// underknapp, fylt når siden er aktiv +// Brukerknapp function userClass({ isActive }: { isActive: boolean }) { - const base = `${buttonBase} border border-primary`; + const base = `${buttonBase} border border-primary` return isActive ? `${base} bg-primary text-background` - : `${base} text-primary hover:bg-pink-light`; + : `${base} text-primary hover:bg-pink-light` } export default function Header() { - // Søkeordet fra URL-en, slik at det viser gjeldende søk - const [searchParams] = useSearchParams(); - const query = searchParams.get('q') ?? ''; + // Søkeordet fra URL-en + const [searchParams] = useSearchParams() + const query = searchParams.get('q') ?? '' + + // Holder styr på hvilket steg i Ny oppskrift brukeren er på + const [currentStep, setCurrentStep] = useState(1) return (
- {/* På store skjermer ligger alt på én linje. På mindre skjermer flyttes søkefeltet under menyen. */}
- {/* Logoen lenker til forsiden */} + + {/* Logo */} - {/* key tvinger feltet til å oppdatere seg når søkeordet i URL-en endres, f.eks. ved tilbakeknappen */} - + {/* Søkefelt */} + + {/* Navigasjon */}
- ); -} + ) +} \ No newline at end of file diff --git a/client/src/components/new-recipe/RecipeStep1.tsx b/client/src/components/new-recipe/RecipeStep1.tsx new file mode 100644 index 0000000..17eda16 --- /dev/null +++ b/client/src/components/new-recipe/RecipeStep1.tsx @@ -0,0 +1,286 @@ +import { useState } from 'react' +import Rating from '@mui/material/Rating' +import { Button } from '../ui/Button' +import { Tag } from '../ui/Tag' + +const CATEGORIES = [ + 'Frokost', + 'Lunsj', + 'Middag', + 'Dessert', + 'Annet', +] + +const TAGS = [ + 'Vegetar', + 'Vegan', + 'Glutenfri', + 'Laktosefri', + 'Under 30 min', +] + +type RecipeStep1Props = { + onNext: () => void +} + +export default function RecipeStep1({ + onNext, +}: RecipeStep1Props) { + const [category, setCategory] = useState('Middag') + + const [selectedTags, setSelectedTags] = useState([ + 'Vegetar', + 'Glutenfri', + ]) + + const [servings, setServings] = useState(4) + + // Velger eller fjerner en tag + const toggleTag = (tag: string) => { + if (selectedTags.includes(tag)) { + setSelectedTags( + selectedTags.filter((item) => item !== tag), + ) + } else { + setSelectedTags([...selectedTags, tag]) + } + } + + return ( +
+ + {/* TO KOLONNER */} +
+ + {/* VENSTRE SIDE */} +
+ + {/* Bilde */} +
+

Bilde av retten

+ + +
+ + {/* Rating */} + + + {/* Kort beskrivelse */} +
+ + +