ArticleModal.svelte

<script lang="ts">
  import Icon from "@iconify/svelte"
  import type {
    Reference,
    ScaleParameter,
    ValueParameter,
  } from "@openfisca/json-model"
  import {
    Dialog,
    DialogDescription,
    DialogOverlay,
    DialogTitle,
    Transition,
    TransitionChild,
  } from "@rgossiaux/svelte-headlessui"
  import { each } from "svelte/internal"

  import { session } from "$app/stores"

  export let billLegalReferences: Reference[] | undefined
  export let billParameter: ValueParameter | ScaleParameter
  export let isOpen = false

  const dateFormatter = new Intl.DateTimeFormat("fr-FR", {
    dateStyle: "medium",
  })

  $: firstLegalReference = billLegalReferences?.[0]

  $: articlePromise =
    !isOpen || firstLegalReference === undefined
      ? undefined
      : retrieveLegalArticle(firstLegalReference.href)

  function closeModal() {
    isOpen = false
  }

  async function retrieveLegalArticle(url: string) {
    const response = await fetch(
      new URL(`recherche?q=${decodeURIComponent(url)}`, $session.legalUrl),
      { headers: { Accept: "application/json" } },
    )
    const { articles } = await response.json()
    return articles?.[0]
  }
</script>

<Transition appear show={isOpen}>
  <Dialog
    as="div"
    class="fixed inset-0 z-20 overflow-y-auto"
    on:close={closeModal}
  >
    <div class="min-h-screen px-4 text-center">
      <TransitionChild
        enter="ease-out duration-300"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="ease-in duration-200"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        <DialogOverlay
          class="fixed inset-0 bg-gray-500 opacity-50 transition-opacity"
        />
      </TransitionChild>

      <!-- This element is to trick the browser into centering the modal contents. -->
      <span class="inline-block h-[10vh]" aria-hidden="true"> &#8203; </span>