40 lines
1000 B
TypeScript
40 lines
1000 B
TypeScript
import { Component } from 'solid-js';
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import BaseCarousel from "@/components/ui/base-carousel";
|
|
|
|
interface ScreenshotCarouselProps {
|
|
screenshots?: {
|
|
url: string;
|
|
title: string;
|
|
}[];
|
|
loading?: boolean;
|
|
}
|
|
|
|
const ScreenshotCarousel: Component<ScreenshotCarouselProps> = (props) => {
|
|
const renderItem = (screenshot: NonNullable<ScreenshotCarouselProps['screenshots']>[0]) => (
|
|
<div class="w-full h-full aspect-[16/9]">
|
|
<img
|
|
src={screenshot.url}
|
|
alt={screenshot.title}
|
|
class="w-full h-full object-cover rounded-lg"
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const renderSkeleton = () => (
|
|
<div class="w-full h-full aspect-[16/9]">
|
|
<Skeleton class="w-full h-full rounded-lg" />
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<BaseCarousel
|
|
items={props.screenshots}
|
|
loading={props.loading}
|
|
renderItem={renderItem}
|
|
renderSkeleton={renderSkeleton}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ScreenshotCarousel; |