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">
Leave a Comment
Please, sign-in to leave a comment.