tabler/shared/ui/Timeline.astro

---
// 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'
import { requireIndex } from '@shared/lib/array'

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 }[]
const timelinePhoto = (i: number) => requireIndex(timelinePhotos, i)
---

<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" statusLabel="Online" />)}
        </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/${timelinePhoto(6).file}`} class="rounded" alt={timelinePhoto(6).title} />
            </div>
            <div class="col-4">
              <!-- Photo -->
              <img src={`./static/photos/${timelinePhoto(7).file}`} class="rounded" alt={timelinePhoto(7).title} />
            </div>
            <div class="col-4">
              <!-- Photo -->
              <img src={`./static/photos/${timelinePhoto(8).file}`} class="rounded" alt={timelinePhoto(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>