59 lines
2.0 KiB
TypeScript
Executable File
59 lines
2.0 KiB
TypeScript
Executable File
import React, {Fragment} from 'react';
|
|
import {PageMetaTags} from '@common/http/page-meta-tags';
|
|
import {PageStatus} from '@common/http/page-status';
|
|
import {TitlePageHeaderImage} from '@app/titles/pages/title-page/title-page-header-image';
|
|
import {SitePageLayout} from '@app/site-page-layout';
|
|
import {SiteSectionHeading} from '@app/titles/site-section-heading';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {TitleCreditsGrid} from '@app/titles/pages/title-page/title-credits-grid/title-credits-grid';
|
|
import {
|
|
GetEpisodeResponse,
|
|
useEpisode,
|
|
} from '@app/episodes/requests/use-episode';
|
|
import {EpisodePageHeader} from '@app/episodes/episode-page-header';
|
|
|
|
export function EpisodeFullCreditsPage() {
|
|
const query = useEpisode('episodeCreditsPage');
|
|
|
|
const content = query.data ? (
|
|
<Fragment>
|
|
<PageMetaTags query={query} />
|
|
<PageContent data={query.data} />
|
|
</Fragment>
|
|
) : (
|
|
<PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />
|
|
);
|
|
|
|
return <SitePageLayout>{content}</SitePageLayout>;
|
|
}
|
|
|
|
interface PageContentProps {
|
|
data: GetEpisodeResponse;
|
|
}
|
|
function PageContent({
|
|
data: {title, episode, credits: groupedCredits},
|
|
}: PageContentProps) {
|
|
return (
|
|
<div>
|
|
<TitlePageHeaderImage title={title} episode={episode} />
|
|
<div className="container mx-auto mt-24 px-14 md:mt-40 md:px-24">
|
|
<EpisodePageHeader title={title} episode={episode} showPoster />
|
|
<div className="mt-48 @container">
|
|
<SiteSectionHeading headingType="h2" className="mb-40">
|
|
<Trans message="Full cast and crew" />
|
|
</SiteSectionHeading>
|
|
{groupedCredits &&
|
|
Object.entries(groupedCredits).map(([department, credits]) => (
|
|
<div key={department}>
|
|
<h3 className="mb-16 text-2xl font-bold capitalize">
|
|
<Trans message={department} />
|
|
</h3>
|
|
<TitleCreditsGrid credits={credits} className="mb-68" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|