70 lines
2 KiB
Text
70 lines
2 KiB
Text
---
|
|
import IconButton from '@/atoms/icon-button.astro';
|
|
import Tag from '@/atoms/tag.astro';
|
|
import Timestamp from '@/atoms/timestamp.astro';
|
|
import Typography from '@/atoms/typography.astro';
|
|
import type { Job } from '@/types/experience-section';
|
|
import type { I18n } from '@/types/i18n';
|
|
|
|
export interface Props extends astroHTML.JSX.HTMLAttributes {
|
|
job: Job;
|
|
i18n: I18n;
|
|
}
|
|
const { job, i18n, ...props } = Astro.props;
|
|
const WorkTimelineItem = 'div';
|
|
---
|
|
|
|
<WorkTimelineItem class:list={['flex', 'flex-col', 'gap-2', 'md:gap-0', 'mb-4', props.class]}>
|
|
<div class:list={['flex', 'flex-row', 'justify-between', 'w-full']}>
|
|
<div>
|
|
<Typography variant="item-title"
|
|
>{job.role} <span class="font-medium"> — {job.company}</span>
|
|
</Typography>
|
|
</div>
|
|
<div class:list={['flex', 'flex-wrap', 'gap-2']}>
|
|
{
|
|
job.socials?.map(({ icon, url, name }) => (
|
|
<IconButton icon={icon} href={url} target="_blank" size="small" aria-label={name} />
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
<Timestamp
|
|
startDate={job.startDate}
|
|
endDate={job.endDate}
|
|
locale={i18n.locale}
|
|
translationForNow={i18n.translations.now}
|
|
/>
|
|
<ul class:list={['my-3']}>
|
|
{
|
|
Array.isArray(job.description) ? (
|
|
job.description.map((d) => (
|
|
<li>
|
|
<Typography variant="paragraph">• {d}</Typography>
|
|
</li>
|
|
))
|
|
) : (
|
|
<li>
|
|
<Typography variant="paragraph">• {job.description}</Typography>
|
|
</li>
|
|
)
|
|
}
|
|
</ul>
|
|
<div class:list={['flex', 'gap-3', 'flex-wrap', 'mt-3']}>
|
|
{
|
|
job.tags.map(({ icon, iconColor, name, url }) => {
|
|
return url ? (
|
|
<a href={url} target="_blank" rel="noopener noreferrer">
|
|
<Tag name={icon} color={iconColor}>
|
|
{name}
|
|
</Tag>
|
|
</a>
|
|
) : (
|
|
<Tag name={icon} color={iconColor}>
|
|
{name}
|
|
</Tag>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</WorkTimelineItem>
|