mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 03:42:27 +04:00
codecalm
f27c70ad38
`Render Modal as real markup` (#2742) reformatted ~140 files back to tabs/semicolons, breaking the Prettier config added by the Astro quality gates (#2749). Re-run prettier --write to restore it, and fix the type errors it had been masking: HTMLElement casts and `this` typing in ChangePasswordModalContent/ConfirmDeleteModalContent scripts, plain-JS syntax in the inline-injected progress.astro script, narrowed prop unions in Button/Check/Spinner, nullable icon svg casts in Icons/Rating, and a duplicate firstLetters/invalid `placeholder` attribute in Select.astro. Also fix shared/vitest.config.mts's stale `astro/lib/**/*.test.ts` include glob left over from the shared source restructure, which made `pnpm test` report zero test files.
107 lines
3.8 KiB
Plaintext
107 lines
3.8 KiB
Plaintext
---
|
||
// Friend Requests: first 3 people with status="success". New photos: photo ids 6/7/8.
|
||
import Icon from './Icon.astro'
|
||
import Avatar from './Avatar.astro'
|
||
import people from '@data/people.json'
|
||
import photos from '@data/photos.json'
|
||
|
||
interface Props {
|
||
simple?: boolean
|
||
}
|
||
|
||
const { simple } = Astro.props
|
||
|
||
const avatarPeople = (people as { full_name?: string; photo?: string }[]).slice(0, 3)
|
||
const timelinePhotos = photos as { file: string; title: string }[]
|
||
---
|
||
|
||
<ul class:list={['timeline', simple && 'timeline-simple']}>
|
||
<li class="timeline-event">
|
||
<div class="timeline-event-icon bg-x-lt"><Icon name="brand-x" /></div>
|
||
<div class="card timeline-event-card">
|
||
<div class="card-body">
|
||
<div class="text-secondary float-end">10 hrs ago</div>
|
||
<h4>+1150 Followers</h4>
|
||
<p class="text-secondary">You’re getting more and more followers, keep it up!</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-event">
|
||
<div class="timeline-event-icon"><Icon name="briefcase" /></div>
|
||
<div class="card timeline-event-card">
|
||
<div class="card-body">
|
||
<div class="text-secondary float-end">2 hrs ago</div>
|
||
<h4>+3 New Products were added!</h4>
|
||
<p class="text-secondary">Congratulations!</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-event">
|
||
<div class="timeline-event-icon"><Icon name="check" /></div>
|
||
<div class="card timeline-event-card">
|
||
<div class="card-body">
|
||
<div class="text-secondary float-end">1 day ago</div>
|
||
<h4>Database backup completed!</h4>
|
||
<p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-event">
|
||
<div class="timeline-event-icon bg-facebook-lt"><Icon name="brand-facebook" /></div>
|
||
<div class="card timeline-event-card">
|
||
<div class="card-body">
|
||
<div class="text-secondary float-end">1 day ago</div>
|
||
<h4>+290 Page Likes</h4>
|
||
<p class="text-secondary">This is great, keep it up!</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-event">
|
||
<div class="timeline-event-icon"><Icon name="user-plus" /></div>
|
||
<div class="card timeline-event-card">
|
||
<div class="card-body">
|
||
<div class="text-secondary float-end">2 days ago</div>
|
||
<h4>+3 Friend Requests</h4>
|
||
<div class="avatar-list mt-3">
|
||
{avatarPeople.map((person) => <Avatar person={person} status="success" />)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-event">
|
||
<div class="timeline-event-icon"><Icon name="photo" /></div>
|
||
<div class="card timeline-event-card">
|
||
<div class="card-body">
|
||
<div class="text-secondary float-end">3 days ago</div>
|
||
<h4>+3 New photos</h4>
|
||
<div class="mt-3">
|
||
<div class="row g-2">
|
||
<div class="col-4">
|
||
<!-- Photo -->
|
||
<img src={`./static/photos/${timelinePhotos[6].file}`} class="rounded" alt={timelinePhotos[6].title} />
|
||
</div>
|
||
<div class="col-4">
|
||
<!-- Photo -->
|
||
<img src={`./static/photos/${timelinePhotos[7].file}`} class="rounded" alt={timelinePhotos[7].title} />
|
||
</div>
|
||
<div class="col-4">
|
||
<!-- Photo -->
|
||
<img src={`./static/photos/${timelinePhotos[8].file}`} class="rounded" alt={timelinePhotos[8].title} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-event">
|
||
<div class="timeline-event-icon"><Icon name="settings" /></div>
|
||
<div class="card timeline-event-card">
|
||
<div class="card-body">
|
||
<div class="text-secondary float-end">2 weeks ago</div>
|
||
<h4>System updated to v2.02</h4>
|
||
<p class="text-secondary">Check the complete changelog at the <a href="#">activity page</a>.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|