first commit

resources/client/channels/content-grid/channel-content-grid-item.tsx

@@ -0,0 +1,51 @@
+import {TITLE_MODEL} from '@app/titles/models/title';
+import {ChannelContentModel} from '@app/admin/channels/channel-content-config';
+import {NEWS_ARTICLE_MODEL} from '@app/titles/models/news-article';
+import {ContentGridProps} from '@app/channels/content-grid/content-grid-layout';
+import {Person, PERSON_MODEL} from '@app/titles/models/person';
+import {PersonPoster} from '@app/people/person-poster/person-poster';
+import {PersonLink} from '@app/people/person-link';
+import {PersonAge} from '@app/people/person-age';
+import {NewsArticleGridItem} from '@app/news/news-article-grid-item';
+import {
+  TitleLandscapeGridItem,
+  TitlePortraitGridItem,
+} from '@app/channels/content-grid/title-grid-item';
+
+interface Props {
+  item: ChannelContentModel;
+  variant?: ContentGridProps['variant'];
+}
+export function ChannelContentGridItem({item, variant}: Props) {
+  switch (item.model_type) {
+    case TITLE_MODEL:
+      return variant === 'landscape' ? (
+        <TitleLandscapeGridItem item={item} />
+      ) : (
+        <TitlePortraitGridItem item={item} />
+      );
+    case PERSON_MODEL:
+      return <PersonGridItem item={item} />;
+    case NEWS_ARTICLE_MODEL:
+      return <NewsArticleGridItem article={item} />;
+    default:
+      return null;
+  }
+}
+
+interface PersonGridItemProps {
+  item: Person;
+}
+function PersonGridItem({item}: PersonGridItemProps) {
+  return (
+    <div>
+      <PersonPoster person={item} srcSize="md" size="w-full" rounded />
+      <div className="mt-10 text-center text-sm">
+        <PersonLink person={item} className="block text-base font-medium" />
+        <div>
+          <PersonAge person={item} showRange />
+        </div>
+      </div>
+    </div>
+  );
+}