ArticleModal.svelte

<script lang="ts">
  import Icon from "@iconify/svelte"
  import type { ScaleParameter, ValueParameter } from "@openfisca/json-model"

  import {
    Dialog,
    DialogDescription,
    DialogOverlay,
    DialogTitle,
    Transition,
    TransitionChild,
  } from "@rgossiaux/svelte-headlessui"
  import { each } from "svelte/internal"

  export let billParameter: ValueParameter | ScaleParameter
  export let isOpen = false

  function closeModal() {
    isOpen = false
  }
</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>

      <TransitionChild
        enter="ease-out duration-300"
        enterFrom="opacity-0 scale-95"
        enterTo="opacity-100 scale-100"
        leave="ease-in duration-200"
        leaveFrom="opacity-100 scale-100"
        leaveTo="opacity-0 scale-95"
      >
        <div
          class="my-8 inline-block w-full max-w-6xl transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all"
        >
          <div class="flex justify-between text-black">
            <DialogTitle
              as="h3"
              class="text-xl font-thin text-le-gris-dispositif-dark md:text-xl"
            >
              <span class="font-normal">Paramètre :</span>
              {billParameter.ux_name ?? billParameter.description}
            </DialogTitle>

            <button
              class="text-gray-400 hover:text-black"
              on:click={closeModal}
              type="button"
            >