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

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

type Props = {
  class?: string
}

const { class: className, ...rest } = Astro.props
const allWork = await data.work.find()
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>