mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-27 17:41:21 +00:00
44 lines
1.3 KiB
Svelte
44 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { Avatar } from '@skeletonlabs/skeleton';
|
|
|
|
import type { Project } from './projects-cards';
|
|
|
|
export let headerImage: Project['headerImage'];
|
|
export let headerSubTitle: Project['headerSubTitle'];
|
|
export let title: Project['title'];
|
|
export let description: Project['description'];
|
|
export let logo: Project['logo'];
|
|
export let contributors: Project['contributors'];
|
|
export let date: Project['date'];
|
|
</script>
|
|
|
|
<div
|
|
class="card border border-white/10 bg-white/5 shadow-xl duration-200 hover:bg-white/10 hover:shadow-2xl rounded overflow-hidden"
|
|
>
|
|
<header>
|
|
<enhanced:img
|
|
src={headerImage}
|
|
class="bg-black/50 w-full aspect-[21/9] object-cover object-top"
|
|
alt={headerSubTitle}
|
|
/>
|
|
</header>
|
|
<div class="p-4 space-y-4">
|
|
<header class="h6">{headerSubTitle}</header>
|
|
<span class="h3" data-toc-ignore>{title}</span>
|
|
<article>
|
|
<p>
|
|
{description}
|
|
</p>
|
|
</article>
|
|
</div>
|
|
<hr class="opacity-50" />
|
|
<footer class="p-4 flex justify-start items-center space-x-4">
|
|
<Avatar src={logo} width="w-8" />
|
|
<div class="flex-auto flex justify-between items-center">
|
|
{#each contributors as contributor}
|
|
<Avatar src={contributor.imageSrc} width="w-8" />
|
|
{/each}
|
|
<small>{new Date(date).toLocaleDateString()}</small>
|
|
</div>
|
|
</footer>
|
|
</div>
|