initial people screen using TitlePageLayout

src/routes/person/[id]/PersonPage.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+ import { getTmdbPerson } from '$lib/apis/tmdb/tmdbApi';
+ import Button from '$lib/components/Button.svelte';
+ import Card from '$lib/components/Card/Card.svelte';
+ import { fetchCardTmdbProps } from '$lib/components/Card/card';
+ import CarouselPlaceholderItems from '$lib/components/Carousel/CarouselPlaceholderItems.svelte';
+ import TitlePageLayout from '$lib/components/TitlePageLayout/TitlePageLayout.svelte';
+ import { Archive, ChevronRight, DotFilled, Plus } from 'radix-icons-svelte';
+
+ const GenderDescription = ['Not set', 'Female', 'Male', 'Non-binary'];
+
+ export let personId: number;
+ export let isModal = false;
+ export let handleCloseModal: () => void = () => {};
+
+ const tmdbUrl = 'https://www.themoviedb.org/person/' + personId;
+ const data = loadInitialPageData();
+
+ async function loadInitialPageData() {
+ const tmdbPerson = await getTmdbPerson(personId);
+ const tmdbMoviesOn = await Promise.all(
+ tmdbPerson?.movie_credits.cast?.map(fetchCardTmdbProps) ?? []
+ )
+ .then((res) => res.filter((p) => p.backdropUrl))
+ .then((res) => res.sort((a, b) => b.rating - a.rating));
+ const tmdbSeriesOn = await Promise.all(
+ tmdbPerson?.tv_credits.cast?.map(fetchCardTmdbProps) ?? []
+ )
+ .then((res) => res.filter((p) => p.backdropUrl))
+ .then((res) => res.sort((a, b) => b.rating - a.rating));
+
+ return {
+ tmdbPerson,
+ tmdbMoviesOn,
+ tmdbSeriesOn
+ };
+ }
+</script>
+
+{#await data}
+ <TitlePageLayout {isModal} {handleCloseModal} />
+{:then { tmdbPerson, tmdbMoviesOn, tmdbSeriesOn }}
+ {@const person = tmdbPerson}
+ <TitlePageLayout
+ titleInformation={{
+ tmdbId: Number(person?.id),
+ type: 'person',
+ title: person?.name || 'Person',
+ backdropUriCandidates: [person?.profile_path ?? ''],
+ posterPath: person?.profile_path || '',
+ tagline: person?.known_for_department || person?.name || '',
+ overview: person?.biography || ''
+ }}
+ {isModal}
+ {handleCloseModal}
+ >
+ <svelte:fragment slot="title-info">
+ {#if person?.homepage}
+ <p>{person?.homepage}</p>
+ <DotFilled />
+ {/if}
+ <a href={tmdbUrl} target="_blank">Popularity index: {person?.popularity?.toFixed(1)} TMDB</a>
+ </svelte:fragment>
+ <svelte:fragment slot="title-right" />
+
+ <svelte:fragment slot="info-components">
+ <div class="col-span-2 lg:col-span-1">
+ <p class="text-zinc-400 text-sm">Known for</p>
+ <h2 class="font-medium">
+ {person?.known_for_department}
+ </h2>
+ </div>
+ <div class="col-span-2 lg:col-span-1">
+ <p class="text-zinc-400 text-sm">Gender</p>
+ <h2 class="font-medium">
+ {GenderDescription[person?.gender ?? 0]}
+ </h2>
+ </div>
+ <div class="col-span-2 lg:col-span-1">
+ <p class="text-zinc-400 text-sm">Birthday</p>
+ <h2 class="font-medium">
+ {new Date(person?.birthday || Date.now()).toLocaleDateString('en', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric'
+ })}
+ </h2>
+ </div>
+ <div class="col-span-2 lg:col-span-1">
+ <p class="text-zinc-400 text-sm">Place of Birth</p>
+ <h2 class="font-medium">
+ {person?.place_of_birth}
+ </h2>
+ </div>
+ {#if person?.also_known_as}
+ <div class="col-span-2 lg:col-span-1">
+ <p class="text-zinc-400 text-sm">Also known as</p>
+ <h2 class="font-medium">
+ {#each person?.also_known_as ?? [] as prop}
+ <p>{prop}</p>
+ {/each}
+ </h2>
+ </div>
+ {/if}
+ </svelte:fragment>
+
+ <div slot="cast-crew-carousel-title" class="font-medium text-lg">Appeared on movies like</div>
+ <svelte:fragment slot="cast-crew-carousel">
+ {#await tmdbMoviesOn}
+ <CarouselPlaceholderItems />
+ {:then props}
+ {#each props as prop}
+ <Card {...prop} openInModal={isModal} />
+ {/each}
+ {/await}
+ </svelte:fragment>
+ <div slot="recommendations-carousel-title" class="font-medium text-lg">And tv shows like</div>
+ <svelte:fragment slot="recommendations-carousel">
+ {#await tmdbSeriesOn}
+ <CarouselPlaceholderItems />
+ {:then props}
+ {#each props as prop}
+ <Card {...prop} openInModal={isModal} />
+ {/each}
+ {/await}
+ </svelte:fragment>
+ </TitlePageLayout>
+{/await}