Untitled

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

const hbData = ref([]);

const hbName = ref([
  "Haemoglobin",
  "PCV",
  "Total WBC Count",
  "Total RBC Count",
  "Neutrophils",
  "Lymphocytes",
  "Monocytes",
  "Eosinophils",
  "Basophil",
  "Platelets Count",
  "MCV",
  "MCH",
  "MCHC",
  "ESR",
  "AEC (Absolute Eosinophils Count)",
  "Blood Group & RH",
]);

const hbUnit = ref([
  "g/dL",
  "%",
  "cells/cmm",
  "x10^6/uL",
  "%",
  "%",
  "%",
  "%",
  "%",
  "/cmm",
  "fL",
  "Pg",
  "g/dL",
  "mm/hr",
  "cells/cu mm",
  "",
]);
const hbRange = ref([
  "12-16.5",
  "34-48%",
  "4000-11000",
  "M4.5-6.0, F3.8-5.8 mill",
  "40-70",
  "20-45",
  "01-06",
  "01-06",
  "0-1",
  "150-400",
  "79-94",
  "27-32",
  "32-35",
  "M 0-15, F 0-20",
  "40-444",
  "",
]);

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="name in hbName" :key="name.id">
                  <p>{{ name }}</p>
                </li>
              </ul>
              <div class="flex flex-col space-y-1">
                <div v-for="unit in hbUnit" :key="unit.id">
                  <input
                    class="input-secondary"
                    type="text"
                    v-model="hbData"
                  /><span class="font-body text-xs"> {{ unit }}</span>
                </div>
              </div>
              <ul class="font-body text-xs space-y-3 pr-64">
                <li v-for="range in hbRange" :key="range.id">
                  <p>{{ range }}</p>
                </li>
              </ul>
            </div>
          </div>
        </TransitionExpand>
      </div>
    </div>
  </main>
</template>

<style scoped></style>