/
githubmirror
/
tabler
Обзор
Документация
Войти
/
githubmirror
/
tabler
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
shared/components/cards/GalleryPhoto.astro
57 строк
2 KB
codecalm
Fix Prettier formatting regression and Astro type-check errors
03 авг 2026, 02:26
03 авг 2026, 02:26
f27c70a
Код
Авторство
О чём код?
--- // `photo` and `index` are passed explicitly from the parent loop. import Avatar from '@ui/Avatar.astro' import Icon from '@ui/Icon.astro' import { randomNumber, timeagoLabel } from '@shared/lib/pseudo-random' interface Photo { file: string [key: string]: unknown } interface Person { full_name?: string photo?: string [key: string]: unknown } interface Props { photo: Photo person: Person /** 1-based loop index — seeds the deterministic pseudo-random values */ index: number hideLikes?: boolean } const { photo, person, index, hideLikes } = Astro.props // Heart filled when (index > 2 && index < 9) || index === 10. const heartClass = (index > 2 && index < 9) || index === 10 ? 'icon-filled text-red' : undefined --- <div class="card card-sm"> <a href="#" class="d-block"><img src={`./static/photos/${photo.file}`} class="card-img-top" /></a> <div class="card-body"> <div class="d-flex align-items-center"> <Avatar person={person} class="me-3 rounded" /> <div> <div>{person.full_name}</div> <div class="text-secondary">{timeagoLabel(index, 10)}</div> </div> { !hideLikes && ( <div class="ms-auto"> <a href="#" class="text-secondary"> <Icon name="eye" /> {randomNumber(index, 300, 600)} </a> <a href="#" class="ms-3 text-secondary"> <Icon name="heart" class={heartClass} /> {randomNumber(index, 20, 100)} </a> </div> ) } </div> </div> </div>