<script lang="ts">
// @ts-nocheck
import Masonry from 'svelte-bricks'
import { friends as allFriends } from '$lib/config/friends'
import { title as storedTitle } from '$lib/stores/title'
import Head from '$lib/components/head.svelte'
import FriendComponent from '$lib/components/extra/friend.svelte'
const rnd = Math.random()
const fy = (a: Friend[], r = 0, c = a.length) => {
while (c) (r = (rnd * c--) | 0), ([a[c], a[r]] = [a[r], a[c]])
return a
}
let items: { id: string }[] = [...fy(allFriends as { id: string }[]), { id: 'footer' }]
let width: number, height: number
storedTitle.set('')
</script>
<Head />
<Masonry
{items}
minColWidth={384}
maxColWidth={384}
gap={32}
let:item
class="mx-4 sm:mx-8 md:my-4 lg:mx-16 lg:my-8 xl:mx-32 xl:my-16"
bind:width
bind:height>
<FriendComponent {item} />
</Masonry>