feat: Implementere produktdetaljside fra Figma

[taraa]

Beskrivelse

Vi skal utvikle produktdetaljsiden i React + TypeScript med utgangspunkt i Figma-designet vårt. Siden skal vise informasjon om et valgt produkt, inkludert produktbilde, navn, merke, kategori og priser fra ulike butikker.

Målet er å få på plass en responsiv og brukervennlig side som følger det felles designet til Handlelappen.

Foreslått løsning

• Opprette ProductDetailsPage.tsx og tilhørende CSS-fil.
• Implementere layout og styling basert på Figma.
• Vise produktbilde, navn, merke, kategori og prisinformasjon.
• Lage en oversikt over butikkpriser, sortert fra billigst til dyrest.
• Vise «Mangler bilde» dersom produktbildet ikke finnes.
• Forberede visning av ingredienser, allergener og næringsinnhold dersom data er tilgjengelige.
• Forberede integrasjon med handlelistefunksjonaliteten.

Bruke eksisterende felleskomponenter der det er mulig.

Akseptansekriterier

• Produktdetaljsiden følger Figma-designet.
• Siden er implementert med React, TypeScript og CSS.
• task: Produktinformasjon hentes fra backend via GraphQL. #41
• Butikkpriser vises i stigende rekkefølge.
• Manglende produktbilder håndteres.
• Siden er responsiv og ivaretar universell utforming.
• Siden er testet lokalt.
• Implementasjonen kan integreres med resten av applikasjonen uten større endringer.

Design/mockup

Figma lenke
Product details

Avhengigheter

• Muligens endre på eksisterende GraphQL-backend for produktinformasjon og priser.
• Felles komponenter fra Figma der disse er tilgjengelige.
• Endelig integrasjon med navigasjon og handlelister gjøres i samarbeid med gruppen.