Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix front-end issue for footer and cards #72

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix front-end issue for footer and cards #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 56 additions & 34 deletions components/States/HospitalListCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@ const mapStatuses = (statuses, hospital) => {
return (
<div key={i} className="py-2 px-2 flex items-center space-x-2">
<span className={`${colorForIcon(hospital[item])}`}>
<svg width="30" height="30" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<svg
width="30"
height="30"
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
>
<path d={icons[item]} fill="currentColor" fillRule="nonzero" />
</svg>
</span>
Expand All @@ -21,8 +26,12 @@ const mapStatuses = (statuses, hospital) => {

const HospitalListCard = (hospital) => {
const getImageData = (hospital) => {
const hospitalPhoto = hospital.hospital_photos.filter((photo) => photo !== "");
const hospitalGallery = hospital.hospital_gallery.filter((photo) => photo !== "");
const hospitalPhoto = hospital.hospital_photos.filter(
(photo) => photo !== ""
);
const hospitalGallery = hospital.hospital_gallery.filter(
(photo) => photo !== ""
);
return [...hospitalPhoto, ...hospitalGallery];
};

Expand All @@ -34,7 +43,9 @@ const HospitalListCard = (hospital) => {
<div className="font-semibold text-lg md:text-2xl mb-2 mt-4 pr-2">
{hospital.hospital_name}
</div>
<div className="font-semibold text-base mb-2 mt-4 pr-2">{hospital.district} Dt.</div>
<div className="font-semibold text-base mb-2 mt-4 pr-2">
{hospital.district} Dt.
</div>
<div className="mt-4 flex justify-center md:justify-start">
<img
className="object-cover shadow-lg h-32 w-32 rounded-full"
Expand Down Expand Up @@ -83,7 +94,7 @@ const HospitalListCard = (hospital) => {
</div>
)}
</div>
<div className="border p-2 bg-primary-100 flex justify-between">
<div className="border p-2 bg-primary-100 flex flex-col md:flex-row justify-between">
<div className="font-semibold text-md">Hospital Status Details</div>
<div className="flex space-x-3">
<div className="flex items-center text-red-500 font-semibold text-sm">
Expand All @@ -101,46 +112,57 @@ const HospitalListCard = (hospital) => {
</div>
</div>
<div className="px-4">
<div className="grid md:grid-cols-3 uppercase mt-2 font-semibold text-gray-600">
<div>Site</div>
<div>Equipment</div>
<div>Technology</div>
</div>
<div className="grid md:grid-cols-3">
<div className="grid md:grid-cols-3 gap-2 uppercase mt-2 font-semibold text-gray-600">
<div>
{mapStatuses(
["site_space", "site_electrical", "site_internet", "site_oxygen"],
hospital
)}
<div>Site</div>
<div className="text-black">
{mapStatuses(
[
"site_space",
"site_electrical",
"site_internet",
"site_oxygen",
],
hospital
)}
</div>
</div>
<div>
{mapStatuses(
[
"equipment_ordered",
"equipment_delivered",
"equipment_installed",
"equipment_staff_trained",
],
hospital
)}
<div>Equipment</div>
<div className="text-black">
{mapStatuses(
[
"equipment_ordered",
"equipment_delivered",
"equipment_installed",
"equipment_staff_trained",
],
hospital
)}
</div>
</div>
<div>
{mapStatuses(
[
"tech_trained",
"tech_hospital_registration",
"tech_patient_management",
"tech_tele_icu_live",
],
hospital
)}
<div>Technology</div>
<div className="text-black">
{mapStatuses(
[
"tech_trained",
"tech_hospital_registration",
"tech_patient_management",
"tech_tele_icu_live",
],
hospital
)}
</div>
</div>
</div>
</div>
<div className="bg-primary-100">
<div className="px-6 py-4">
<span>Go Live on:</span>
<span className="text-xl ml-2 font-bold">{hospital.launch_date || "TBD"}</span>
<span className="text-xl ml-2 font-bold">
{hospital.launch_date || "TBD"}
</span>
</div>
</div>
</div>
Expand Down
78 changes: 53 additions & 25 deletions components/common/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,57 @@
import { FiFacebook, FiTwitter, FiYoutube } from 'react-icons/fi';
import { FiFacebook, FiTwitter, FiYoutube } from "react-icons/fi";

const Footer = () => {
return (
<footer className="flex flex-col items-center justify-center w-full border-t">
<div className="w-5/6 my-4 items-center lg:grid grid-cols-2">
<div className="text-center text-sm text-gray-500 lg:text-left">Copyright © 2021 10 Bed ICU - All Rights Reserved.</div>
<div className="flex justify-center space-x-4 pt-2 lg:justify-start lg:pt-0">
<div><a href="https://www.facebook.com/10bedICU/"><FiFacebook size={"1.5em"}/></a></div>
<div><a href="https://twitter.com/10BedICU"><FiTwitter size={"1.5em"}/></a></div>
<div><a href="https://www.youtube.com/channel/UCJwsY5kpy2cWDGEL05fWMeA"><FiYoutube size={"1.5em"}/></a></div>
</div>
</div>
return (
<footer className="flex flex-col items-center justify-center w-full border-t p-2">
<div className="my-4 items-center justify-between w-full flex flex-col md:flex-row">
<div className="">
<ul className="flex flex-wrap justify-center space-x-4 text-gray-600">
<li className="hover:text-blue-500">
<a href="https://10bedicu.org/">Home</a>
</li>
<li className="hover:text-blue-500">
<a href="https://10bedicu.org/tech-platform">Tech Platform</a>
</li>
<li className="hover:text-blue-500">
<a href="https://10bedicu.org/media">Media</a>
</li>
<li className="hover:text-blue-500">
<a href="https://10bedicu.org/donate-now">Donate Now</a>
</li>
<li className="hover:text-blue-500">
<a href="https://10bedicu.org/deployment">Deployment</a>
</li>
<li className="hover:text-blue-500">
<a href="https://10bedicu.org/our-team">Our Team</a>
</li>
</ul>
</div>
<div className="flex justify-center space-x-4 pt-2 lg:justify-start lg:pt-0">
<div>
<a href="https://www.facebook.com/10bedICU/">
<FiFacebook size={"1.5em"} />
</a>
</div>
<div>
<a href="https://twitter.com/10BedICU">
<FiTwitter size={"1.5em"} />
</a>
</div>
<div>
<a href="https://www.youtube.com/channel/UCJwsY5kpy2cWDGEL05fWMeA">
<FiYoutube size={"1.5em"} />
</a>
</div>
</div>
</div>

<div className="my-2 mb-6 lg:mt-2">
<ul className="flex justify-center space-x-4 text-gray-600">
<li className="hover:text-blue-500"><a href="https://10bedicu.org/">Home</a></li>
<li className="hover:text-blue-500"><a href="https://10bedicu.org/tech-platform">Tech Platform</a></li>
<li className="hover:text-blue-500"><a href="https://10bedicu.org/media">Media</a></li>
<li className="hover:text-blue-500"><a href="https://10bedicu.org/donate-now">Donate Now</a></li>
<li className="hover:text-blue-500"><a href="https://10bedicu.org/deployment">Deployment</a></li>
<li className="hover:text-blue-500"><a href="https://10bedicu.org/our-team">Our Team</a></li>
</ul>
</div>
</footer>
);
}
<div className="my-2 mb-6 lg:mt-2">
<div className="text-center text-sm text-gray-500 lg:text-left">
Copyright © 2021 10 Bed ICU - All Rights Reserved.
</div>
</div>
</footer>
);
};

export default Footer;
export default Footer;