housesof/src/routes/credits.svelte

<script lang="ts">
    import { fade } from 'svelte/transition'
    import { DURATION } from '$utils/contants'
    // Components
    import Metas from '$components/Metas.svelte'
    import SiteTitle from '$components/atoms/SiteTitle.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'

    export let data: any
</script>

<Metas
    title="Credits - Houses Of"
    description=""
    image=""
/>


<main class="credits"
    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
    out:fade={{ duration: DURATION.PAGE_OUT }}
>
    <section class="credits__heading">
        <SiteTitle variant="inline" />
        <p class="text-medium">{data.credits.text}</p>
    </section>

    <section class="credits__list">
        <div class="grid container">
            {#each data.credits.list as { title, credits }}
                <div class="credits__category grid">
                    <h2 class="title-small">{title}</h2>
                    <ul>
                        {#each credits as { name, role, website }}
                        <li>
                            <dl>
                                <dt>
                                    {#if website}
                                        <h3>
                                            <a href={website} rel="noopener external" target="_blank">{name}</a>
                                        </h3>
                                    {:else}
                                        <h3>{name}</h3>
                                    {/if}
                                </dt>
                                <dd>
                                    {role}
                                </dd>
                            </dl>
                        </li>
                        {/each}
                    </ul>
                </div>
            {/each}

            <div class="credits__category grid">
                <h2 class="title-small">Photography</h2>
                <ul>
                    {#each data.credit as { name, website, location }}
                    <li>
                        <dl>
                            <dt>
                                {#if website}
                                    <h3>
                                        <a href={website} rel="noopener external" target="_blank">{name}</a>
                                    </h3>
                                {:else}
                                    <h3>{name}</h3>
                                {/if}
                            </dt>
                            <dd>
                                <ul>
                                    {#each location as { location_id: { name, slug: slugLocation, country: { slug: slugCountry }}}, index}
                                        <li>
                                            <a href="/{slugCountry}/{slugLocation}" sveltekit:noscroll>{name}</a>
                                        </li>
                                    {/each}
                                </ul>
                            </dd>
                        </dl>
                    </li>
                    {/each}
                </ul>
            </div>
        </div>
    </section>

    <InteractiveGlobe type="cropped" />
</main>


<script context="module" lang="ts">
    import { fetchAPI } from '$utils/api'

    export async function load ({ page, fetch, session, stuff }) {
        const res = await fetchAPI(`
            query {
                credits {
                    text
                    list
                }

                credit {
                    name
                    website
                    location {
                        location_id {
                            name
                            slug
                            country {
                                slug
                            }
                        }
                    }
                }
            }
        `)

        const { data } = res

        return {
            props: {
                data,
            }
        }
    }
</script>