36 feat implementere produktdetaljside fra figma

[taraa]

Beskrivelse

Implementert produktdetaljsiden i React og TypeScript med utgangspunkt i Figma-designet til Handlelappen.

Formålet er å lage en responsiv og brukervennlig side som presenterer produktinformasjon, prissammenligning mellom butikker og handlelistefunksjonalitet.

Siden bruker foreløpig eksempeldata fra Figma. Integrasjon med GraphQL og faktiske produktdata håndteres i en separat issue.

Relaterte issues

Closes #36

Endringer gjort

• Opprettet ProductDetailsPage.tsx og ProductDetailsPage.css i en egen mappe.
• Implementert layout, farger, typografi og styling basert på Figma.
• Lagt til produktbilde med «Mangler bilde» som standardtekst.
• Lagt til produktnavn, merke, kategori, ingredienser, allergener og næringsinnhold.
• Implementert prissammenligning med automatisk sortering fra billigst til dyrest og beregning av prisforskjeller.
• Lagt til interaktive knapper for å øke og redusere antall produkter, fjerne produktet fra handlelisten og skrive valgfrie notater.
• Tilpasset layouten for ulike skjermstørrelser.
• Brukt semantiske HTML-elementer og tilgjengelige knappetekster.
• Holdt implementasjonen isolert fra resten av applikasjonen for å unngå merge-konflikter.

Hva slags type fiks inneholder denne PR

• Bug fix
• Ny funksjonalitet
• Refactor
• Dokumentasjon
• Testing

Sjekkliste

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger

Skjermbilder

Screenshot av nettisden våres si 'Product details'

Screenshot av 'Product details' på figma

[lindeav]

Ser veldig bra ut! Nice å teste med hardkodet komponenter og etterpå legge til den faktiske dataen.