first commit

resources/client/episodes/epispde-full-credits-page.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+}