first commit

resources/client/channels/carousel/channel-content-carousel.tsx

@@ -0,0 +1,67 @@
+import React, {Fragment} from 'react';
+import {ChannelContentProps} from '@app/channels/channel-content';
+import {ChannelHeader} from '@app/channels/channel-header/channel-header';
+import {ChannelContentGridItem} from '@app/channels/content-grid/channel-content-grid-item';
+import {useCarousel} from '@app/channels/carousel/use-carousel';
+import clsx from 'clsx';
+import {ContentGridProps} from '@app/channels/content-grid/content-grid-layout';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {KeyboardArrowLeftIcon} from '@common/icons/material/KeyboardArrowLeft';
+import {KeyboardArrowRightIcon} from '@common/icons/material/KeyboardArrowRight';
+
+interface Props extends ChannelContentProps {
+  variant?: ContentGridProps['variant'];
+}
+export function ChannelContentCarousel(props: Props) {
+  const {channel, variant} = props;
+  const {
+    scrollContainerRef,
+    canScrollForward,
+    canScrollBackward,
+    scrollToPreviousPage,
+    scrollToNextPage,
+    containerClassName,
+    itemClassName,
+  } = useCarousel();
+
+  const gridClassName =
+    variant === 'landscape'
+      ? 'content-grid-landscape'
+      : 'content-grid-portrait';
+
+  return (
+    <div>
+      <ChannelHeader
+        {...props}
+        actions={
+          <Fragment>
+            <IconButton
+              disabled={!canScrollBackward}
+              onClick={() => scrollToPreviousPage()}
+              aria-label="Previous page"
+            >
+              <KeyboardArrowLeftIcon />
+            </IconButton>
+            <IconButton
+              disabled={!canScrollForward}
+              onClick={() => scrollToNextPage()}
+              aria-label="Next page"
+            >
+              <KeyboardArrowRightIcon />
+            </IconButton>
+          </Fragment>
+        }
+      />
+      <div
+        ref={scrollContainerRef}
+        className={clsx(containerClassName, gridClassName)}
+      >
+        {channel.content?.data.map(item => (
+          <div className={itemClassName} key={`${item.id}-${item.model_type}`}>
+            <ChannelContentGridItem item={item} variant={variant} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}