68 lines
2.1 KiB
TypeScript
Executable File
68 lines
2.1 KiB
TypeScript
Executable File
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>
|
|
);
|
|
}
|