morten-olsen.github.io/src/layouts/frontpage/work/work.astro

---
import { Picture } from 'astro:assets';
import Time from '@/components/time/absolute.astro';
import { formatYearMonth } from '@/utils/time.js';
import { getCollection } from 'astro:content';

type Props = {
  class?: string;
};

const { class: className, ...rest } = Astro.props;
const allWork = await getCollection('work');
const work = allWork.sort((a, b) => {
  return new Date(b.data.startDate).getTime() - new Date(a.data.startDate).getTime();
});
---

<div class:list={[className]} {...rest}>
  <h2>Work</h2>
  <div class="list">
    {
      work.map((item) => (
        <div class="item">
          <div class="time">
            <Time format={formatYearMonth} datetime={item.data.endDate} />
            <br />
            <Time format={formatYearMonth} datetime={item.data.startDate} />
          </div>
          <div class="content">
            <div class="header">
              {item.data.logo && <Picture class="logo" src={item.data.logo} alt={item.data.name} />}
              <div class="info">
                <h3>{item.data.position}</h3>
                <h4>{item.data.name}</h4>
              </div>
            </div>
            <p>{item.data.summary}</p>
          </div>
        </div>
      ))
    }
  </div>
  <a href="/work-history">See full work history</a>
</div>

<style lang="less">
  h2 {
    font-size: var(--font-xl);
    margin-bottom: var(--space-lg);
  }

  h3 {
    font-weight: 400;
  }

  h4 {
    font-size: var(--font-lg);
    margin: 0;
  }

  .header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    align-items: center;
  }

  .item {
    display: contents;
  }

  .time {
    grid-column: 1;
    font-size: var(--font-xs);
    justify-self: center;
    text-align: center;
    position: relative;
    align-self: stretch;
    justify-self: stretch;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content {
    break-inside: avoid;
    grid-column: 2 / 5;
    border: 0.6px solid var(--color-border);
    padding: var(--space-md);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
</style>