56 lines
2.0 KiB
Svelte
56 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
let { onViewProfile, name, position, image, featured = false, tag = null } = $props();
|
|
import { getInitials } from '$lib/format';
|
|
|
|
let imageError = $state(false);
|
|
|
|
function handleImageError() {
|
|
imageError = true;
|
|
}
|
|
</script>
|
|
|
|
<article
|
|
class="group bg-ecsess-800 ring-ecsess-500/50 ring-offset-ecsess-900 hover:ring-ecsess-300 hover:shadow-ecsess-400/50 focus-within:ring-ecsess-300 focus-within:ring-offset-ecsess-900 grid h-full min-w-0 grid-rows-[auto_1fr] overflow-hidden rounded-xl shadow-md ring-2 ring-offset-2 transition-all duration-500 ease-out focus-within:ring-2 focus-within:ring-offset-2 hover:shadow-xl {featured
|
|
? 'w-full max-w-56 sm:max-w-64'
|
|
: 'w-full max-w-56 sm:max-w-64'}"
|
|
>
|
|
<div
|
|
class="bg-ecsess-700 relative flex aspect-square min-h-0 w-full items-center justify-center overflow-hidden"
|
|
>
|
|
{#if tag}
|
|
<span
|
|
class="bg-ecsess-600 text-ecsess-50 ring-ecsess-400/60 absolute top-2 right-2 z-1 rounded-md px-2 py-1 text-xs font-semibold tracking-wide uppercase shadow-md ring-1"
|
|
>
|
|
{tag}
|
|
</span>
|
|
{/if}
|
|
{#if image && !imageError}
|
|
<img
|
|
src={image}
|
|
alt={name}
|
|
class="h-full w-full object-cover object-center"
|
|
onerror={handleImageError}
|
|
/>
|
|
{:else}
|
|
<span class="text-ecsess-150 text-4xl font-bold sm:text-5xl" aria-hidden="true">
|
|
{getInitials(name)}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
<div
|
|
class="flex flex-col items-center justify-center gap-2 px-2 py-3 text-center sm:px-3 sm:py-4"
|
|
>
|
|
<h3 class="text-ecsess-50 line-clamp-2 w-full text-base leading-tight font-bold sm:text-lg">
|
|
{name}
|
|
</h3>
|
|
<p class="text-ecsess-200 line-clamp-2 w-full text-xs italic sm:text-sm">{position}</p>
|
|
<button
|
|
type="button"
|
|
onclick={onViewProfile}
|
|
class="bg-ecsess-500 text-ecsess-950 hover:bg-ecsess-400 hover:text-ecsess-50 focus:ring-ecsess-300 focus:ring-offset-ecsess-800 mt-1 w-full rounded-lg px-3 py-2 text-xs font-semibold shadow-md transition focus:ring-2 focus:ring-offset-2 focus:outline-none sm:text-sm"
|
|
>
|
|
View profile
|
|
</button>
|
|
</div>
|
|
</article>
|