76 lines
2.4 KiB
Text
76 lines
2.4 KiB
Text
---
|
|
import { Image } from '@astrojs/image/components';
|
|
|
|
import Button from '@/components/button.astro';
|
|
import IconButton from '@/components/icon-button.astro';
|
|
import SectionCard from '@/components/section-card.astro';
|
|
import TagsList from '@/components/tags-list.astro';
|
|
import Typography from '@/components/typography.astro';
|
|
import type { SectionKey } from '@/types/data';
|
|
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;
|
|
|
|
const section: SectionKey = 'main';
|
|
---
|
|
|
|
<SectionCard section={section}>
|
|
<div class="flex flex-col items-start gap-6 sm:flex-row">
|
|
<div class="flex items-center gap-4 sm:flex-col">
|
|
<Image
|
|
src={image}
|
|
alt={fullName}
|
|
class="w-24 h-24 sm:w-36 sm:h-36 md:w-52 md:h-52 rounded-lg max-w-none"
|
|
format="webp"
|
|
aspectRatio={1}
|
|
/>
|
|
<Button href={url} download={downloadedFileName}>{label}</Button>
|
|
</div>
|
|
<div class="flex w-full flex-col gap-5">
|
|
<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
|
|
<div class="w-full">
|
|
<Typography variant="main-title" id={`${section}-heading`}>{fullName}</Typography>
|
|
<Typography variant="main-subtitle">{role}</Typography>
|
|
</div>
|
|
{
|
|
socials.length > 0 && (
|
|
<div class="flex flex-wrap gap-3 sm:flex-nowrap">
|
|
{socials.map(({ icon, url: iconUrl, name }) => (
|
|
<IconButton href={iconUrl} icon={icon} size="small" target="_blank" aria-label={name} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
<div class="flex flex-col gap-6">
|
|
<div class="inline-grid xl:grid-cols-[auto_auto]">
|
|
{
|
|
details.map(({ label: detailLabel, value }) => (
|
|
<div class="w-fit">
|
|
<Typography variant="paragraph">
|
|
<span class="text-gray-700 dark:text-gray-300">{detailLabel}: </span>
|
|
<span class="break-all dark:text-gray-400">{value}</span>
|
|
</Typography>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<Typography variant="paragraph">{description}</Typography>
|
|
<TagsList tags={tags} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SectionCard>
|