30 lines
915 B
TypeScript
30 lines
915 B
TypeScript
import React from "react";
|
|
import { Carousel } from '@mantine/carousel';
|
|
import VideoPlayer from "./VideoPlayer"; // assuming VideoPlayer and ImageViewer are custom components to display videos and photos
|
|
import ImageViewer from "./ImageViewer"; // assuming VideoPlayer and ImageViewer are custom components to display videos and photos
|
|
|
|
type Props = {
|
|
videos: string[];
|
|
photos: string[];
|
|
};
|
|
|
|
const GalleryCarousel: React.FC<Props> = ({ videos, photos }): JSX.Element => {
|
|
return (
|
|
<Carousel
|
|
withIndicators
|
|
height={200}
|
|
slideSize="33.333333%"
|
|
slideGap="md"
|
|
loop
|
|
align="start" >
|
|
{photos.map((photo, index) => (
|
|
<ImageViewer key={`gallery-photo-${index}`} url={photo} />
|
|
))}
|
|
{videos.map((video, index) => (
|
|
<VideoPlayer key={`gallery-video-${index}`} url={video} />
|
|
))}
|
|
</Carousel>
|
|
);
|
|
};
|
|
|
|
export default GalleryCarousel; |