first version

frontend/src/lib/components/widgets/boxlist.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
-    export let col: Column
-
-    // A function to compare first names and sort the array
+    export let persons: Page[]
+    let boxes = persons.map((p) => p.personPreview.name)
     const sortByFirstName = (a, b) => {
         const nameA = a.name.split(" ")[0] // Extracts the first name from "First Last"
         const nameB = b.name.split(" ")[0]
         return nameA.localeCompare(nameB)
     }
-
-    col.boxList.boxes.sort(sortByFirstName) // Sorts the array in place
+    boxes = boxes.sort(sortByFirstName)
 </script>
 
 <div class="boxList">
-    {#each col.boxList.boxes as name}
+    {#each boxes as name}
         <div class="box">
-            {name.name}
+            {name}
         </div>
     {/each}
 </div>