generated from cms/tibi-docs
37 lines
965 B
Svelte
37 lines
965 B
Svelte
<script lang="ts">
|
|
export let persons: Page[]
|
|
let boxes = persons.map((p) => p.personPreview.name)
|
|
const sortByFirstName = (a, b) => {
|
|
const nameA = a?.split(" ")[0] // Extracts the first name from "First Last"
|
|
const nameB = b?.split(" ")[0]
|
|
console.log("nameA", nameA, "nameB", nameB, "comp", nameA?.localeCompare(nameB))
|
|
return nameA?.localeCompare(nameB)
|
|
}
|
|
boxes = boxes.sort(sortByFirstName)
|
|
$: console.log(boxes, "boxes", persons)
|
|
</script>
|
|
|
|
<div class="boxList">
|
|
{#each boxes as name}
|
|
<div class="box">
|
|
{name}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
|
|
.boxList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
.box {
|
|
padding: 5px 10px;
|
|
background-color: @signal-color;
|
|
color: @font-color-secondary;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|