77 lines
2.5 KiB
Svelte
77 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { Play, LoaderCircle } from '@lucide/svelte';
|
|
import { Button } from 'bits-ui';
|
|
import type { Project, RepoDefinition } from './types/project';
|
|
import { goto } from '$app/navigation';
|
|
import Image from './Image.svelte';
|
|
import { createQuery } from '@tanstack/svelte-query';
|
|
|
|
const reposQuery = createQuery<RepoDefinition[]>(() => ({
|
|
queryKey: ['global-repos'],
|
|
queryFn: async () => {
|
|
const response = await fetch('/api/v0/repos');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch repositories');
|
|
}
|
|
return response.json();
|
|
},
|
|
staleTime: 60000
|
|
}));
|
|
|
|
const projects = $derived(reposQuery.data ?? []);
|
|
const isLoading = $derived(reposQuery.isPending);
|
|
const hasError = $derived(reposQuery.isError);
|
|
const isEmpty = $derived(!isLoading && !hasError && projects.length === 0);
|
|
</script>
|
|
|
|
{#if isLoading}
|
|
<div class="flex items-center justify-center py-12">
|
|
<LoaderCircle class="h-8 w-8 animate-spin text-text-muted" />
|
|
</div>
|
|
{:else if hasError}
|
|
<div class="py-12 text-center text-text-muted">
|
|
<p>Failed to load projects. Please try again later.</p>
|
|
</div>
|
|
{:else if isEmpty}
|
|
<div class="py-12 text-center text-text-muted">
|
|
<p>No projects available yet.</p>
|
|
</div>
|
|
{:else}
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{#each projects as project (project.id)}
|
|
<div
|
|
class="group relative overflow-hidden rounded-lg bg-gray-900 shadow-xl ring-1 ring-gray-800 transition-transform hover:scale-[1.02]"
|
|
>
|
|
<div class="relative aspect-video overflow-hidden">
|
|
<Image
|
|
src={`/api/v0/repos/${project.id}/files/thumbnail.webp`}
|
|
fallback={`https://picsum.photos/seed/${project.id}/400/225`}
|
|
alt={project.full_name}
|
|
class="min-h-56.5 w-full min-w-100 object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
|
|
<div
|
|
class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
|
|
>
|
|
<Button.Root
|
|
class="flex h-10 w-14 items-center justify-center rounded-md bg-white/90 text-gray-900 shadow-lg transition-transform hover:scale-110 hover:bg-white"
|
|
onclick={() => {
|
|
goto(`/p/${project.id}`).catch((e) => {
|
|
console.warn(e);
|
|
});
|
|
}}
|
|
>
|
|
<Play />
|
|
</Button.Root>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<h3 class="text-lg font-semibold text-white">{project.full_name}</h3>
|
|
<p class="mt-1 text-sm text-gray-400">{project.description}</p>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|