FUJI/src/layouts/Tile.astro
2024-09-22 19:52:29 +08:00

57 lines
1.3 KiB
Text

---
import { formatDate } from "../utils"
const { title, href, cover, tags, date, level } = Astro.props
const dateFormatted = formatDate(date)
const type = tags[0]
const label = `${title} - ${type} - 发表时间 ${dateFormatted}`
const image = cover?.url ?? cover ?? "https://oss.nbtca.space/CA-logo.svg";
// level 1: hero
// level 2: 2up
// level 3: 3up
---
<li
role="listitem"
class:list={[
"tile-item",
"nr-scroll-animation",
{
"item-hero": level === "1",
"item-2up": level === "2",
"item-3up": level === "3",
},
]}
style="--nr-animation-transform-y:20%;"
>
<a
href={href}
class:list={[
"tile",
"large-load",
"medium-load",
"small-load",
{
"tile-hero": level === "1",
"tile-2up": level === "2",
"tile-3up": level === "3",
},
]}
aria-label={label}
>
<div class="tile__media" aria-hidden="true">
<img class="cover image" src={image} alt="lt" />
</div>
<div class="tile__description" aria-hidden="true">
<div class="tile__head">
<div class="tile__category">{type}</div>
<div class="tile__headline">{title}</div>
</div>
<div class="tile__timestamp icon-hide icon icon-before icon-clock">
{dateFormatted}
</div>
</div>
</a>
</li>