You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.1 KiB
Plaintext
45 lines
1.1 KiB
Plaintext
---
|
|
import PhosphorIcon from './PhosphorIcon.astro'
|
|
|
|
const ICONS_MAP: Record<string, string> = {
|
|
github: 'github-logo',
|
|
linkedin: 'linkedin-logo',
|
|
website: 'globe',
|
|
mail: 'mailbox',
|
|
}
|
|
|
|
type Props = {
|
|
image: ImageMetadata
|
|
fullName: string
|
|
entranceDate: number
|
|
exitDate?: number
|
|
description: string
|
|
social?: {
|
|
github?: string
|
|
linkedin?: string
|
|
website?: string
|
|
mail?: string
|
|
}
|
|
}
|
|
|
|
const { image, fullName, entranceDate, exitDate, description, social } = Astro.props
|
|
---
|
|
|
|
<div class="bubble">
|
|
<img src={image.src} alt={fullName.toLowerCase()} />
|
|
<div class="title">{fullName}</div>
|
|
<div class="date">{entranceDate}—{exitDate ?? 'Presente'}</div>
|
|
<div class="description">{description}</div>
|
|
{
|
|
social && (
|
|
<div class="social">
|
|
{Object.entries(social).map(([key, value]) => (
|
|
<a href={value} target="_blank" rel="noopener noreferrer">
|
|
<PhosphorIcon name={ICONS_MAP[key] ?? 'question-mark'} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|