Untitled

<script setup>
import { ref, reactive } from "vue";
import HideIcon from "./icons/HideIcon.vue";

const hbData = ref([]);

const hb = reactive([
  { id: 1, name: "Haemoglobin", unit: "g/dL", range: "12-16.5" },
  { id: 2, name: "PCV", unit: "%", range: "34-48" },
  { id: 3, name: "Total WBC Count", unit: "cells/cmm", range: "4000-11000" },
  {
    id: 4,
    name: "Total RBC Count",
    unit: "x10^6/uL",
    range: "M4.5-6.0, F3.8-5.8",
  },
  { id: 5, name: "Neutrophils", unit: "%", range: "40-70" },
  { id: 6, name: "Lymphocytes", unit: "%", range: "20-45" },
  { id: 7, name: "Monocytes", unit: "%", range: "01-06" },
  { id: 8, name: "Eosinophils", unit: "%", range: "01-06" },
  { id: 9, name: "Basophils", unit: "%", range: "0-1" },
  { id: 10, name: "Platelets Count", unit: "/cmm", range: "150-400" },
  { id: 11, name: "MCV", unit: "fL", range: "79-94" },
  { id: 12, name: "MCH", unit: "Pg", range: "27-32" },
  { id: 13, name: "MCHC", unit: "g/dL", range: "32-35" },
  { id: 14, name: "ESR", unit: "mm/hr", range: "M0-15, F0-12" },
  { id: 15, name: "AEC", unit: "cells/cu mm", range: "40-444" },
  { id: 16, name: "Blood Group & RH", unit: "", range: "" },
]);

let show = ref(false);

const toggleHide = () => {
  show.value = !show.value;
};
</script>

<template>
  <main>
    <div class="mx-auto container">
      <div class="mx-4 mt-2 p-2 border border-gray-400">
        <div class="flex justify-between">
          <h1 class="font-heading tracking-wider text-[15px] text-gray-800">
            Haemotology
          </h1>
          <HideIcon @click="toggleHide" />
        </div>
        <TransitionExpand>
          <div class="mx-auto container" v-if="show">
            <div class="flex justify-between my-2 items-center">
              <ul class="font-body text-xs space-y-3">
                <li v-for="item in hb" :key="hb.id">
                  <p>{{ item.name }}</p>
                </li>
              </ul>
              <div class="flex flex-col space-y-1">
                <div v-for="item in hb" :key="hb.id">
                  <input class="input-secondary" type="text" /><span
                    class="font-body text-xs"
                  >
                    {{ item.unit }}</span
                  >
                </div>
              </div>
              <ul class="font-body text-xs space-y-3 pr-64">
                <li v-for="item in hb" :key="hb.id">
                  <p>{{ item.range }}</p>
                </li>
              </ul>
            </div>
          </div>
        </TransitionExpand>
      </div>
    </div>
  </main>
</template>

<style scoped></style>