37 lines
903 B
TypeScript
37 lines
903 B
TypeScript
import { Carousel, CarouselItem } from "@lume/ui";
|
|
|
|
export function Videos({ urls }: { urls: string[] }) {
|
|
if (urls.length === 1) {
|
|
return (
|
|
<div className="group px-3">
|
|
<video
|
|
className="w-full h-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
|
|
controls
|
|
muted
|
|
>
|
|
<source src={urls[0]} type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Carousel
|
|
items={urls}
|
|
renderItem={({ item, isSnapPoint }) => (
|
|
<CarouselItem key={item} isSnapPoint={isSnapPoint}>
|
|
<video
|
|
className="w-full h-full object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
|
|
controls={false}
|
|
muted
|
|
>
|
|
<source src={item} type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</CarouselItem>
|
|
)}
|
|
/>
|
|
);
|
|
}
|