diff --git a/src/components/HospitalCard.js b/src/components/HospitalCard.js index 03856cd..f4a3d23 100644 --- a/src/components/HospitalCard.js +++ b/src/components/HospitalCard.js @@ -1,13 +1,32 @@ import useSWR from 'swr'; import { useRouter } from 'next/router'; -import { Button, ButtonGroup, Heading, Stack, Text } from '@chakra-ui/react'; +import { + Box, + Button, + ButtonGroup, + Divider, + Heading, + Stack, + Text, + useColorModeValue, +} from '@chakra-ui/react'; import { FaArrowRight, FaMapMarkerAlt, FaPhone } from 'react-icons/fa'; const fetcher = (...args) => fetch(...args).then((res) => res.json()); const HospitalCard = ({ hosp, type }) => { - const { address, bed_availability: bed, id, info, name, phone, queue } = hosp; + const { + address, + available_beds: beds, + bed_availability: bed, + id, + info, + name, + phone, + queue, + } = hosp; const router = useRouter(); + const bgCard = useColorModeValue('gray.50', 'gray.700'); const { data } = useSWR( `${process.env.NEXT_PUBLIC_API_URL}/get-hospital-map?hospitalid=${id}`, @@ -28,29 +47,61 @@ const HospitalCard = ({ hosp, type }) => { {name} {address} - {info} + {+type === 1 && {info}} - - {bed === 0 ? ( - Penuh! - ) : ( - - Tersedia : {bed} - - {queue || 'Tanpa'} antrean + {+type === 1 && ( + + {bed === 0 ? ( + Penuh! + ) : ( + + Tersedia : {bed} + + {queue || 'Tanpa'} antrean + + + )} + + )} + + {beds && ( + + {beds.map((be) => ( + + + {be.available} - - )} + {be.bed_class} + + {be.room_name} + + + {be.info} + + ))} - + )} { Pilih Tempat Tidur : Covid 19 - - Non-Covid 19 (API dalam perbaikan) - + Non-Covid 19