laba-webgunea/front/src/views/ekintza/Ekintza.astro

---
import type { Ekintza } from "models/Ekintza";
import Footer from "views/_components/Footer.astro";
import Header from "views/_components/Header.astro";
import Layout from "../../layouts/Layout.astro";
import MarkdownParser from "views/_components/MarkdownParser.astro";
import ZigZagMarra from "views/_components/ZigZagMarra.astro";
import dayjs from "dayjs";
import { getUrl } from "models/Zikloa";
import { getImageData } from "models/ImageMedia";

import "dayjs/locale/eu";
import Elkarlana from "./_components/Elkarlana.astro";
import Sarrera from "./_components/Sarrera.astro";
dayjs.locale("eu");

interface Props {
  ekintza: Ekintza;
}

const { ekintza } = Astro.props;

const irudia = ekintza.mainMedia ? getImageData(ekintza.mainMedia) : null;
---

<Layout
  title={ekintza.izenburua}
  description={ekintza.titularra}
  ogImage=`${Astro.site}ekintzak/${ekintza.slug}/og.png`
>
  <Header />

  <main>
    <aside>
      {
        irudia && (
          <img
            class="irudia"
            alt={irudia.alt}
            src={irudia.src}
            width={irudia.width}
            height={irudia.height}
          />
        )
      }

      {
        ekintza.elkarlana && (
          <div class="elkarlana-wrapper-desktop">
            <Elkarlana elkarlana={ekintza.elkarlana} />
          </div>
        )
      }
    </aside>
    <article>
      <h1>{ekintza.izenburua}</h1>

      <div class="zigzag-wrapper">
        <ZigZagMarra />
      </div>

      <p class="hitzordua">
        {dayjs(ekintza.hitzordua).format("MMMM[k] D. H:mm")}
      </p>

      {
        ekintza.zikloa && (
          <a class="zikloa" href={getUrl(ekintza.zikloa)}>
            {ekintza.zikloa.izena}
          </a>
        )
      }

      <h2>{ekintza.titularra}</h2>

      {ekintza.sarrera && <Sarrera sarrera={ekintza.sarrera} />}

      {
        ekintza.deskribapena && (
          <div class="deskribapena">
            <MarkdownParser content={ekintza.deskribapena} />
          </div>
        )
      }

      {
        ekintza.elkarlana && (
          <div class="elkarlana-wrapper-mobile">
            <Elkarlana elkarlana={ekintza.elkarlana} />
          </div>
        )
      }
    </article>
  </main>

  <Footer />
</Layout>

<style lang="scss">
  @use "../../style/mixins/displayFonts.scss";
  @use "../../style/mixins/textFonts.scss";
  @use "../../style/mixins/grid12Columns.scss";
  @use "../../style/tools/toDVW.scss";
  @use "../../style/tools/mediaQueries.scss";

  main {
    gap: var(--space-05-mobile);
    padding: var(--space-05-mobile);

    @include grid12Columns.grid;
    @include mediaQueries.aboveTablet {
      padding: var(--space-07-desktop);
    }
  }

  aside {
    grid-column: 2 / span 10;
    margin-bottom: var(--space-04-mobile);

    @include mediaQueries.aboveTablet {
      grid-column: 1 / span 4;
      margin-bottom: 0;
    }
  }

  .irudia {
    border-radius: 50%;
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  article {
    grid-column: 1 / -1;

    @include mediaQueries.aboveTablet {
      grid-column: 5 / span 6;
    }
  }

  h1 {
    margin-bottom: var(--space-04-mobile);

    color: var(--gorria);

    @include displayFonts.display2;
    @include mediaQueries.aboveTablet {
      margin-bottom: var(--space-04-desktop);
    }
  }

  .zigzag-wrapper {
    margin-bottom: var(--space-04-mobile);

    @include mediaQueries.aboveTablet {
      margin-bottom: var(--space-04-desktop);
    }
  }

  .hitzordua {
    color: var(--gorria);
    text-transform: capitalize;
    @include displayFonts.display3;
  }

  .zikloa {
    display: inline-block;
    padding: var(--space-02-mobile) var(--space-03-mobile);
    margin-top: var(--space-04-mobile);

    color: var(--marroia);
    text-decoration: none;
    border-radius: var(--space-05-mobile);
    border: #{toDVW.toMobileDVW(1)} solid var(--marroia);

    &:hover {
      text-decoration: underline;
    }

    @include textFonts.captionFont;
    @include mediaQueries.aboveTablet {
      padding: var(--space-02-desktop) var(--space-04-desktop);
      margin-top: var(--space-05-desktop);

      border-radius: var(--space-06-desktop);
      border: #{toDVW.toDesktopDVW(1)} solid var(--marroia);
    }
  }

  h2 {
    margin-top: var(--space-04-mobile);

    color: var(--marroia);

    @include displayFonts.display4;
    @include mediaQueries.aboveTablet {
      margin-top: var(--space-05-desktop);
    }
  }

  .deskribapena {
    margin-top: var(--space-04-mobile);

    color: var(--marroia);

    @include mediaQueries.aboveTablet {
      margin-top: var(--space-05-desktop);
    }
  }

  .elkarlana-wrapper-desktop {
    margin-top: var(--space-07-desktop);

    @include mediaQueries.belowTablet {
      display: none;
    }
  }

  .elkarlana-wrapper-mobile {
    margin-top: var(--space-05-mobile);

    @include mediaQueries.aboveTablet {
      display: none;
    }
  }
</style>