Skip to content

46 fikse ny oppskrift #66

Merged
merged 2 commits into from
Oct 8, 2026
+729 −312
Merged

46 fikse ny oppskrift #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8aba890
Fullfort steg 2 og 3 i ny oppskrift
Oct 8, 2026
122d60c
Merge remote-tracking branch 'origin/main' into 46-fikse-ny-oppskrift
Oct 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
288 changes: 84 additions & 204 deletions client/src/components/new-recipe/RecipeStep1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
}
Loading