mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
Paweł KunaandStarDev
575d68572f
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
43 lines
1.1 KiB
Plaintext
43 lines
1.1 KiB
Plaintext
---
|
|
// person = people[person-id]; the cover photo is photos[person-id].file.
|
|
// Base card-cover already carries `card-cover-blurred`; `blurred` adds it a 2nd time
|
|
// Base card-cover already carries `card-cover-blurred`; `blurred` adds it a second time.
|
|
import Avatar from '@ui/Avatar.astro';
|
|
import people from '@data/people.json';
|
|
import photos from '@data/photos.json';
|
|
|
|
interface Person {
|
|
full_name?: string;
|
|
job_title?: string;
|
|
photo?: string;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
interface Photo {
|
|
file?: string;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
interface Props {
|
|
personId?: number;
|
|
blurred?: boolean;
|
|
}
|
|
|
|
const { personId = 0, blurred } = Astro.props;
|
|
const person = (people as Person[])[personId];
|
|
const photo = (photos as Photo[])[personId];
|
|
---
|
|
|
|
<a class="card card-link" href="#">
|
|
<div
|
|
class={`card-cover card-cover-blurred text-center${blurred ? ' card-cover-blurred' : ''}`}
|
|
style={`background-image: url(./static/photos/${photo.file})`}
|
|
>
|
|
<Avatar size="xl" person={person} thumb />
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="card-title mb-1">{person.full_name}</div>
|
|
<div class="text-secondary">{person.job_title}</div>
|
|
</div>
|
|
</a>
|