433f20d211
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <renovate[bot]@users.noreply.github.com> Co-authored-by: Konrad Szwarc <konrad.szwarc.dev@gmail.com>
56 lines
2 KiB
Text
56 lines
2 KiB
Text
---
|
|
import type { MainSection } from '@/types/sections/main-section.types';
|
|
import Description from '@/web/components/description.astro';
|
|
import DownloadButton from '@/web/components/download-button.astro';
|
|
import LinkButton from '@/web/components/link-button.astro';
|
|
import Photo from '@/components/photo.astro';
|
|
import SectionCard from '@/web/components/section-card.astro';
|
|
import TagsList from '@/web/components/tags-list.astro';
|
|
import Typography from '@/web/components/typography.astro';
|
|
import LabelledValue from '@/web/components/labelled-value.astro';
|
|
|
|
export interface Props extends MainSection {}
|
|
|
|
const { action, config, description, details, fullName, image, links, role, tags } = Astro.props;
|
|
---
|
|
|
|
<SectionCard {...config} hideTitle>
|
|
<div class="flex flex-col items-start gap-6 sm:flex-row">
|
|
<div class="flex items-center gap-4 sm:flex-col">
|
|
<Photo
|
|
src={image}
|
|
alt={fullName}
|
|
width={320}
|
|
height={320}
|
|
class="h-24 w-24 max-w-none rounded-lg sm:h-36 sm:w-36 md:h-52 md:w-52"
|
|
/>
|
|
<DownloadButton {...action} />
|
|
</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">{fullName}</Typography>
|
|
<Typography variant="main-subtitle">{role}</Typography>
|
|
</div>
|
|
{
|
|
links.length > 0 && (
|
|
<div class="flex flex-wrap gap-3 sm:flex-nowrap">
|
|
{links.map((link) => (
|
|
<LinkButton {...link} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
<div class="flex flex-col gap-6">
|
|
<div class="inline-grid xl:grid-cols-[auto_auto]">
|
|
{details.map((detail) => <LabelledValue {...detail} />)}
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<Description content={description} />
|
|
<TagsList tags={tags} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SectionCard>
|