83 lines
2.8 KiB
Text
83 lines
2.8 KiB
Text
---
|
|
import { Image } from '@astrojs/image/components';
|
|
|
|
import Button from '@/atoms/button.astro';
|
|
import IconButton from '@/atoms/icon-button.astro';
|
|
import SectionCard from '@/atoms/section-card.astro';
|
|
import Tag from '@/atoms/tag.astro';
|
|
import Typography from '@/atoms/typography.astro';
|
|
import type { MainSection } from '@/types/main-section';
|
|
|
|
export interface Props extends MainSection {}
|
|
|
|
const {
|
|
image,
|
|
fullName,
|
|
role,
|
|
socials,
|
|
details,
|
|
description,
|
|
action: { label, url, downloadedFileName },
|
|
tags,
|
|
} = Astro.props;
|
|
---
|
|
|
|
<SectionCard>
|
|
<div class:list={['flex', 'gap-6', 'flex-col', 'sm:flex-row', 'items-start']}>
|
|
<div class:list={['flex', 'sm:flex-col', 'gap-4', 'items-center']}>
|
|
<Image
|
|
src={image}
|
|
alt={fullName}
|
|
class:list={['w-24', 'h-24', 'sm:w-36', 'sm:h-36', 'md:w-52', 'md:h-52', 'rounded-lg', 'max-w-none']}
|
|
/>
|
|
<Button href={url} download={downloadedFileName}>{label}</Button>
|
|
</div>
|
|
<div class:list={['w-full', 'flex', 'flex-col', 'gap-5']}>
|
|
<div class:list={['w-full', 'flex', 'flex-col', 'sm:flex-row', 'justify-between', 'gap-2']}>
|
|
<div class:list={['w-full']}>
|
|
<Typography variant="main-title">{fullName}</Typography>
|
|
<Typography variant="main-subtitle">{role}</Typography>
|
|
</div>
|
|
{
|
|
socials.length > 0 && (
|
|
<div class:list={['flex', 'gap-3', 'flex-wrap', 'sm:flex-nowrap']}>
|
|
{socials.map(({ icon, url: iconUrl }) => (
|
|
<IconButton href={iconUrl} icon={icon} size="small" target="_blank" />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
<div class:list={['flex', 'flex-col', 'gap-6']}>
|
|
<div class:list={['inline-grid', 'xl:grid-cols-[auto_auto]']}>
|
|
{
|
|
details.map(({ label: detailLabel, value }) => (
|
|
<div class="w-fit">
|
|
<Typography variant="paragraph">
|
|
<span class="text-gray-700">{detailLabel}: </span>
|
|
<span class="break-all">{value}</span>
|
|
</Typography>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div class:list={['flex', 'flex-col', 'gap-4']}>
|
|
<Typography variant="paragraph">{description}</Typography>
|
|
<div class:list={['flex', 'flex-wrap', 'gap-3']}>
|
|
{
|
|
tags.map(({ icon, iconColor, name, url: tagUrl }) =>
|
|
tagUrl ? (
|
|
<a href={tagUrl} target="_blank" rel="noopener noreferrer">
|
|
<Tag icon={icon ? { name: icon, color: iconColor } : undefined}>{name}</Tag>
|
|
</a>
|
|
) : (
|
|
<Tag icon={icon ? { name: icon, color: iconColor } : undefined}>{name}</Tag>
|
|
)
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SectionCard>
|