gw-svelte/src/lib/components/ValuesSection.svelte

<script lang="ts">
  import Icon from '$lib/components/Icon.svelte';
  import type { IconCard } from '$lib/types';

  export let values: IconCard[];

  $: orderedValues = values
    .map((value, index) => ({ value, index }))
    .sort((a, b) => {
      const aOrder = a.value.order ?? Number.POSITIVE_INFINITY;
      const bOrder = b.value.order ?? Number.POSITIVE_INFINITY;

      if (aOrder !== bOrder) {
        return aOrder - bOrder;
      }

      return a.index - b.index;
    })
    .map(({ value }) => value);
</script>

<section id="values">
  <div class="values-inner">
    <h2 class="section-heading">Where dogs come first</h2>

    <div class="values-grid">
      {#each orderedValues as value}
        <div class="value-card">
          <Icon name={value.icon} className="value-card-icon" />
          <h3>{value.title}</h3>
          <p>{value.body}</p>
        </div>
      {/each}
    </div>
  </div>
</section>