first commit

resources/client/titles/pages/title-page/title-page.tsx

@@ -0,0 +1,44 @@
+import {GetTitleResponse, useTitle} from '@app/titles/requests/use-title';
+import {PageStatus} from '@common/http/page-status';
+import {PageMetaTags} from '@common/http/page-meta-tags';
+import React, {Fragment} from 'react';
+import {TitlePageMainContent} from '@app/titles/pages/title-page/title-page-main-content';
+import {TitlePageHeader} from '@app/titles/pages/title-page/title-page-header';
+import {TitlePageHeaderImage} from '@app/titles/pages/title-page/title-page-header-image';
+import {TitlePageAside} from '@app/titles/pages/title-page/title-page-aside';
+import {SitePageLayout} from '@app/site-page-layout';
+
+export function TitlePage() {
+  const query = useTitle('titlePage');
+
+  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: GetTitleResponse;
+}
+function PageContent({data}: PageContentProps) {
+  return (
+    <Fragment>
+      <TitlePageHeaderImage title={data.title} />
+      <div className="container mx-auto mt-24 px-14 md:mt-40 md:px-24">
+        <div className="items-start gap-54 md:flex">
+          <TitlePageAside data={data} className="max-lg:hidden" />
+          <div className="flex-auto">
+            <TitlePageHeader title={data.title} />
+            <TitlePageMainContent data={data} />
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}