84 lines
2.3 KiB
Svelte
84 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { Play } from '@lucide/svelte';
|
|
import { Button } from 'bits-ui';
|
|
import type { Project } from './types/project';
|
|
import { goto } from '$app/navigation';
|
|
import Image from './Image.svelte';
|
|
|
|
const mockProjects: Project[] = [
|
|
{
|
|
id: 1,
|
|
name: 'Uno',
|
|
description: 'Recreation of the classic card game',
|
|
thumbnail: 'https://picsum.photos/seed/uno/400/225',
|
|
url: '/game/index.html'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Space Invaders',
|
|
description: 'Retro arcade shooter',
|
|
thumbnail: 'https://picsum.photos/seed/space/400/225'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Tetris',
|
|
description: 'Block stacking puzzle game',
|
|
thumbnail: 'https://picsum.photos/seed/tetris/400/225'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Snake',
|
|
description: 'Classic snake game with power-ups',
|
|
thumbnail: 'https://picsum.photos/seed/snake/400/225'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Pong',
|
|
description: 'Two-player paddle game',
|
|
thumbnail: 'https://picsum.photos/seed/pong/400/225'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'Breakout',
|
|
description: 'Brick-breaking arcade game',
|
|
thumbnail: 'https://picsum.photos/seed/breakout/400/225'
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{#each mockProjects 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={project.thumbnail}
|
|
alt={project.name}
|
|
class="h-full w-full 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.name}</h3>
|
|
<p class="mt-1 text-sm text-gray-400">{project.description}</p>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|