Untitled

<script>
  import att from "./data.json";
  const getRandomUser = async () => {
    const response = await fetch("https://randomuser.me/api/?results=10");
    const result = await response.json();
    return result;
  };

  const userPromise = getRandomUser();
</script>

<main>
  {#await userPromise}
    <h1>Loading....</h1>
  {:then users}
    <div class="p-5 h-screen bg-gray-100">
      <h1 class="text-xl mb-2">UX Class</h1>

      <table class="w-full">
        <thead class="bg-gray-50 border-b-2 border-gray-200">
          <tr class="">
            <th class="p-3 text-sm font-semibold tracking-wide text-left"
              >Name</th
            >
            <th class="p-3 text-sm font-semibold tracking-wide text-left"
              >Attendnace</th
            >
            <th class="p-3 text-sm font-semibold tracking-wide text-left"
              >Today</th
            >
          </tr>
        </thead>
        <tbody>
          {#each users.results as user}
            <tr class="bg-grey-100">
              <td class="p-3 text-sm text-gray-700 whitespace-nowrap"
                >{user.name.first}</td
              ><td class="p-3 text-sm text-gray-700 whitespace-nowrap">
                <span class="tracking-wider text-white bg-red-500  px-2 py-1"
                  >{att.absent}</span
                >
                <span class="tracking-wider text-white bg-red-500  px-2 py-1"
                  >{att.absent}</span
                >
                <span class="tracking-wider text-white bg-red-500  px-2 py-1"
                  >{att.absent}</span
                >
                <span class="tracking-wider text-white bg-green-500  px-2 py-1"
                  >{att.present}</span
                ></td
              >

              <td
                ><span class="m-1 tracking-wider text-white bg-red-500  px-2 py-1"
                  >A</span
                ><span class="m-1 tracking-wider text-white bg-blue-500  px-2 py-1"
                  >P</span
                ><span class="m-1 tracking-wider text-white bg-green-500  px-2 py-1"
                  >L</span
                ><span
                  class="m-1 tracking-wider text-white bg-yellow-500  px-2 py-1"
                  >O</span
                ></td
              >
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  {/await}
</main>