From ab87c6581bc0fe1dd525013492e23d04ac1bc653 Mon Sep 17 00:00:00 2001 From: Anish Sarawgi <98693953+Anish-Sarawgi@users.noreply.github.com> Date: Sat, 5 Nov 2022 19:17:40 +0530 Subject: [PATCH] feat(guide): create Health and Emergency Info page (#298) * feat(guide): create Health and Emergency Info page * chore: remove space --- .../placeholder/healthAndEmergencyInfo.js | 100 ++++++++ .../components/healthAndEmergencyInfo/Info.js | 234 ++++++++++++++++++ client/src/components/widgets/DropDownCard.js | 5 +- client/src/pages/healthAndEmergencyInfo.jsx | 83 +++++++ client/src/screens/HealthAndEmergency.js | 34 +++ 5 files changed, 454 insertions(+), 2 deletions(-) create mode 100644 client/src/assets/placeholder/healthAndEmergencyInfo.js create mode 100644 client/src/components/healthAndEmergencyInfo/Info.js create mode 100644 client/src/pages/healthAndEmergencyInfo.jsx create mode 100644 client/src/screens/HealthAndEmergency.js diff --git a/client/src/assets/placeholder/healthAndEmergencyInfo.js b/client/src/assets/placeholder/healthAndEmergencyInfo.js new file mode 100644 index 00000000..6847147d --- /dev/null +++ b/client/src/assets/placeholder/healthAndEmergencyInfo.js @@ -0,0 +1,100 @@ +/* eslint-disable */ +export const INFO = Object.freeze({ + dropdown: [ + { + title: 'Specialists', + content: [ + { + name: 'DR. C.BHATTACHARYA', + room: 'D/4,NIT CAMPUS', + phone: '8895298094', + }, + { + // year: 'Second Year', + name: 'DR. S.R. BEHERA', + room: 'VK Hall, B/103', + phone: '7008485946', + }, + { + name: 'DR. S. SAHU', + room: 'VK Hall, B/106', + phone: '7008297921', + }, + { + name: 'DR. I. KHATUA', + room: 'VK Hall, B/107', + phone: '7978206455', + }, + { + name: 'DR. SOUMYA R. BEHERA', + room: 'VK Hall, A/106', + phone: '7904996232', + }, + ], + }, + { + title: 'Doctors', + content: [ + { + name: 'DR. S.N. MOHAPATRA', + designation: 'Sr. Consultant(Medicine)', + day: 'Tuesday', + }, + { + name: 'DR. R.C. NANDA', + designation: 'Sr. Consultant(Medicine)', + day: 'Wednesday', + }, + { + name: 'DR. R. BISWAL', + designation: 'Consultant(G.O)', + day: 'Saturday', + }, + ], + }, + { + title: 'Hospitals', + content: [ + { + name: 'CWS Hospital', + phone: '6612473931', + }, + { + name: 'HI-TECH', + phone: '6612400751', + }, + { + name: 'Lifeline Hsopital', + phone: '9437079322', + }, + ], + }, + { + title: 'Ambulance', + content: [ + { + name: 'NIT Ambulance', + phone: '8280468609', + }, + ], + }, + ], + + location: [ + { + title: 'Health Centre', + location1: 'NIT Rourkela ', + location2: 'Sector-1, Rourkela ', + location3: 'Odisha, India', + pin: ' PIN: 769008', + }, + { + title: 'CWS Hospital', + location1: 'Northern Ave, ', + location2: 'NIT Rourkela ', + location3: 'Jagda, Rourkela ', + location4: 'Odisha, India', + pin: ' PIN: 769042', + }, + ], +}); diff --git a/client/src/components/healthAndEmergencyInfo/Info.js b/client/src/components/healthAndEmergencyInfo/Info.js new file mode 100644 index 00000000..273f5425 --- /dev/null +++ b/client/src/components/healthAndEmergencyInfo/Info.js @@ -0,0 +1,234 @@ +import React from 'react'; +import Image from 'next/dist/client/image'; + +// libraries +import { Grid, Typography } from '@mui/material'; +import CallIcon from '@mui/icons-material/Call'; +import makeStyles from '@mui/styles/makeStyles'; + +//placeholder +import { INFO } from '../../assets/placeholder/healthAndEmergencyInfo'; + +//image +import map from '../../assets/images/contact/map.png'; +import DropDownCard from '../widgets/DropDownCard'; + +const Info = () => { + const classes = useStyles(); + + return ( +
+
+ {INFO.dropdown.map((item1, key) => ( + + + {item1.content.map((item, key) => ( + + {item.name && ( + + Name: {item.name} + + )} + {item.room && ( + + Room: {item.room} + + )} + {item.day && ( + + Visiting Day: {item.day} + + )} + {item.designation && ( + + Designation: {item.designation} + + )} + {item.phone && ( + + + {item.phone} + + )} + + ))} + + + ))} +
+ + {INFO.location.map((place, key) => ( + +
+ + + + {place.title} + + + {place.location1} + + + {place.location2} + + + {place.location3} + + + {place.location4} + + + {place.pin} + + + + Monday Morning + + + See on map + + + + +
+ + ))} + +
+ ); +}; + +export default Info; + +const useStyles = makeStyles((theme) => ({ + wrapper: { + maxWidth: '1200px', + margin: '40px auto 0px auto', + [theme.breakpoints.down('lg')]: { + marginTop: '24px', + padding: '0px 24px 0px 24px', + }, + }, + dropdownWrapper: { + marginBottom: '20px', + }, + + // caption: { + // color: theme.palette.secondary.neutral60, + // lineHeight: '24px', + // }, + + dropdownDetails: { + paddingTop: '18px', + paddingBottom: '18px', + }, + + dropdownTypography: { + fontSize: '18px', + [theme.breakpoints.down('md')]: { + fontSize: '15px', + }, + }, + + phoneIcon: { + marginRight: '8px', + fontSize: '1.3rem', + verticalAlign: 'middle', + [theme.breakpoints.down('md')]: { + fontSize: '1rem', + marginRight: '4px', + }, + }, + + locationWrapper: { + marginTop: '18px', + padding: '18px 0px 24px 24px', + boxShadow: theme.shadows[0], + borderRadius: '8px', + }, + locationTitle: { + paddingBottom: '12px', + fontSize: '22px', + [theme.breakpoints.up('xs')]: { + fontSize: '22px', + }, + [theme.breakpoints.up('md')]: { + fontSize: '15px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '22px', + }, + }, + mapWrapper: { + justifyItems: 'center', + [theme.breakpoints.down('lg')]: { + paddingTop: '16px', + }, + }, + map: { + width: '174px', + height: '155px', + paddingTop: '4px', + marginLeft: '16px', + [theme.breakpoints.down('lg')]: { + width: '114px', + height: '101px', + }, + }, + mapText: { + color: theme.palette.common.black, + paddingTop: '12px', + paddingRight: '16px', + textDecorationLine: 'underline', + textAlign: 'center', + fontSize: '18px', + [theme.breakpoints.up('sm')]: { + fontSize: '18px', + }, + [theme.breakpoints.up('md')]: { + fontSize: '13px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '18px', + }, + [theme.breakpoints.down('sm')]: { + paddingTop: '8px', + paddingRight: '4px', + }, + }, + location: { + fontFamily: theme.typography.fontFamily, + [theme.breakpoints.down('sm')]: { + fontSize: '12px', + }, + }, +})); diff --git a/client/src/components/widgets/DropDownCard.js b/client/src/components/widgets/DropDownCard.js index 235fd652..d02d8ace 100644 --- a/client/src/components/widgets/DropDownCard.js +++ b/client/src/components/widgets/DropDownCard.js @@ -35,10 +35,11 @@ const useStyles = makeStyles((theme) => ({ boxShadow: '0px 0px 1px rgba(0, 0, 0, 0.24), 0px 1px 3px rgba(0, 0, 0, 0.12)', padding: '20px', - marginTop: '32px', + marginTop: '22px', + borderRadius: '8px', cursor: 'pointer', [theme.breakpoints.down('md')]: { - flexWrap: 'wrap-reverse', + flexDirection: 'row-reverse', }, }, DropDownIcon: { diff --git a/client/src/pages/healthAndEmergencyInfo.jsx b/client/src/pages/healthAndEmergencyInfo.jsx new file mode 100644 index 00000000..db94d533 --- /dev/null +++ b/client/src/pages/healthAndEmergencyInfo.jsx @@ -0,0 +1,83 @@ +import React from 'react'; +import Head from 'next/head'; + +// Components +import Marginals from '../components/marginals/Marginals'; +import HealthAndEmergency from '../screens/HealthAndEmergency'; + +function HealthAndEmergencyInfo() { + return ( + <> + + {/* */} + Health-and-Emergency-info | Monday Morning + + + + + {/* */} + + + + + + + + + + + {/* */} + + + + + + + + + + + ); +} + +export default HealthAndEmergencyInfo; diff --git a/client/src/screens/HealthAndEmergency.js b/client/src/screens/HealthAndEmergency.js new file mode 100644 index 00000000..416bbb86 --- /dev/null +++ b/client/src/screens/HealthAndEmergency.js @@ -0,0 +1,34 @@ +import React from 'react'; + +// libraries +import { Container, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; + +// Components +import BackButton from '../components/shared/button/BackButton'; +import Info from '../components/healthAndEmergencyInfo/Info'; + +function Contact() { + const classes = useStyles(); + return ( +
+ + + + Health and Emergency Info + + + +
+ ); +} + +export default Contact; + +const useStyles = makeStyles((theme) => ({ + head: { + color: theme.palette.primary.blue60, + lineHeight: '2rem', + margin: '2.7rem 0 2rem 0.7rem', + }, +}));