Files
MediaManager/web/src/lib/components/recommended-media-carousel.svelte
2025-07-17 17:18:37 +02:00

45 lines
1.1 KiB
Svelte

<script lang="ts">
import type { MetaDataProviderSearchResult } from '$lib/types';
import AddMediaCard from '$lib/components/add-media-card.svelte';
import { Skeleton } from '$lib/components/ui/skeleton';
import { Button } from '$lib/components/ui/button';
import { ChevronRight } from 'lucide-svelte';
import { base } from '$app/paths';
let {
media,
isShow,
isLoading
}: {
media: MetaDataProviderSearchResult[];
isShow: boolean;
isLoading: boolean;
} = $props();
</script>
<div
class="grid w-full gap-4 sm:grid-cols-1
md:grid-cols-2 lg:grid-cols-3"
>
{#if isLoading}
<Skeleton class="h-[70vh] w-full" />
<Skeleton class="h-[70vh] w-full" />
<Skeleton class="h-[70vh] w-full" />
{:else}
{#each media.slice(0, 3) as mediaItem}
<AddMediaCard {isShow} result={mediaItem} />
{/each}
{/if}
{#if isShow}
<Button class="md:col-start-2" variant="secondary" href="{base}/dashboard/tv/add-show">
More recommendations
<ChevronRight />
</Button>
{:else}
<Button class="md:col-start-2" variant="secondary" href="{base}/dashboard/movies/add-movie">
More recommendations
<ChevronRight />
</Button>
{/if}
</div>