42 lines
1.1 KiB
Svelte
42 lines
1.1 KiB
Svelte
<script>
|
|
let { name, position, email, positionDescription, yearProgram, image } = $props();
|
|
import placeholder from 'assets/placeholderAvatar.png';
|
|
</script>
|
|
|
|
<style lang="postcss">
|
|
@reference '../app.css';
|
|
|
|
.card {
|
|
@apply flex items-center gap-4 bg-transparent rounded-2xl p-6 text-ecsess-800 border-transparent max-w-[450px] h-[250px];
|
|
background-image: linear-gradient(to bottom right, #E8FFD9, #97C583);
|
|
}
|
|
|
|
.profile-img {
|
|
@apply w-32 h-32 shadow-md overflow-hidden rounded-lg;
|
|
}
|
|
|
|
.profile-img :global(img) {
|
|
@apply w-full h-full object-cover;
|
|
}
|
|
|
|
.name {
|
|
@apply text-xl font-bold;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="card">
|
|
<div class="avatar-container justify-left">
|
|
<div class="profile-img justify-center">
|
|
<img src={image || placeholder} alt={name} />
|
|
</div>
|
|
<span class="yearProgram text-sm justify-center"> {yearProgram} </span>
|
|
</div>
|
|
<div class="content">
|
|
<p class="name">{name} </p>
|
|
<p class="py-2 text-base">{position}</p>
|
|
<p class="pb-2 text-xs">{positionDescription}</p>
|
|
<a href="mailto:{email}" class="py-2 text-sm underline">{email}</a>
|
|
</div>
|
|
</div>
|