Oppgave 3 — Lage og bruke komponenter

Bakgrunn

En komponent i Svelte er bare en .svelte-fil med markup, stil og logikk. Du importerer den i andre filer og slipper å gjenta den samme HTML-en.

Komponenter mottar data via props — du eksponerer dem med $props(), og forelderen sender dem inn som attributter.

Lag komponenten

Opprett filen src/lib/FilmKort.svelte med dette innholdet:

<script>
  let { film } = $props();
</script>

<article class="filmkort">
  <h3>{film.tittel}</h3>
  <p class="meta">{film.regissør} • {film.år}</p>
</article>

<style>
  .filmkort {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.875rem 1rem;
  }
  h3 {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
  }
  .meta { color: #6b7280; font-size: 0.8rem; margin: 0; }
</style>

Ta i bruk

I src/routes/+page.svelte (eller en annen rute), importer komponenten og bruk {#each} fra forrige oppgave til å rendre én FilmKort per film:

<script>
  import FilmKort from '$lib/FilmKort.svelte';

  let filmer = [
    { tittel: 'Interstellar', år: 2014, regissør: 'Christopher Nolan' },
    { tittel: 'Parasite', år: 2019, regissør: 'Bong Joon-ho' },
    { tittel: 'Spirited Away', år: 2001, regissør: 'Hayao Miyazaki' },
  ];
</script>

{#each filmer as film}
  <FilmKort {film} />
{/each}

Live eksempel

Koden ovenfor produserer dette:

Oppgaven

1. Lag src/lib/FilmKort.svelte som vist over og bruk den i en av sidene dine.
2. Lag deretter en til komponent for et annet tema — f.eks. BykKort eller ArtistKort — med dine egne props.
3. Bruk den nye komponenten sammen med {#each} for å rendre flere kort på rad.
4. Bonus: Legg til en farge-prop som bestemmer bakgrunnsfarge på kortet — sett den med style="background: {farge}" inne i komponenten.

Tips

• $lib er et alias for src/lib/. Importer slik: import X from '$lib/X.svelte';.
• Komponentnavn må starte med stor bokstav (FilmKort, ikke filmKort) — ellers tror Svelte at det er et HTML-element.
• CSS i en komponent er scoped som standard — stilene lekker ikke ut til andre komponenter.
• Når en prop heter det samme som variabelen kan du forkorte: <FilmKort {film} /> i stedet for <FilmKort film={film} />.