mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
58 lines
1.5 KiB
Plaintext
58 lines
1.5 KiB
Plaintext
---
|
|
import { staticPath } from '@shared/lib/assets'
|
|
import Avatar from '@ui/Avatar.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import { randomNumber, timeagoLabel } from '@shared/lib/pseudo-random'
|
|
|
|
interface Photo {
|
|
title: string
|
|
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
|
|
|
|
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={staticPath(`photos/${photo.file}`)} class="card-img-top" alt={photo.title} /></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" inline />
|
|
{randomNumber(index, 300, 600)}
|
|
</a>
|
|
<a href="#" class="ms-3 text-secondary">
|
|
<Icon name="heart" inline class={heartClass} />
|
|
{randomNumber(index, 20, 100)}
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|