Skip to content

Commit ab87c65

Browse files
Anish-SarawgiAnish-Sarawgi
authored
feat(guide): create Health and Emergency Info page (#298)
* feat(guide): create Health and Emergency Info page * chore: remove space
1 parent 3b68fb3 commit ab87c65

File tree

5 files changed

+454
-2
lines changed

5 files changed

+454
-2
lines changed

‎client/src/assets/placeholder/healthAndEmergencyInfo.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/* eslint-disable */
2+
export const INFO = Object.freeze({
3+
dropdown: [
4+
{
5+
title: 'Specialists',
6+
content: [
7+
{
8+
name: 'DR. C.BHATTACHARYA',
9+
room: 'D/4,NIT CAMPUS',
10+
phone: '8895298094',
11+
},
12+
{
13+
// year: 'Second Year',
14+
name: 'DR. S.R. BEHERA',
15+
room: 'VK Hall, B/103',
16+
phone: '7008485946',
17+
},
18+
{
19+
name: 'DR. S. SAHU',
20+
room: 'VK Hall, B/106',
21+
phone: '7008297921',
22+
},
23+
{
24+
name: 'DR. I. KHATUA',
25+
room: 'VK Hall, B/107',
26+
phone: '7978206455',
27+
},
28+
{
29+
name: 'DR. SOUMYA R. BEHERA',
30+
room: 'VK Hall, A/106',
31+
phone: '7904996232',
32+
},
33+
],
34+
},
35+
{
36+
title: 'Doctors',
37+
content: [
38+
{
39+
name: 'DR. S.N. MOHAPATRA',
40+
designation: 'Sr. Consultant(Medicine)',
41+
day: 'Tuesday',
42+
},
43+
{
44+
name: 'DR. R.C. NANDA',
45+
designation: 'Sr. Consultant(Medicine)',
46+
day: 'Wednesday',
47+
},
48+
{
49+
name: 'DR. R. BISWAL',
50+
designation: 'Consultant(G.O)',
51+
day: 'Saturday',
52+
},
53+
],
54+
},
55+
{
56+
title: 'Hospitals',
57+
content: [
58+
{
59+
name: 'CWS Hospital',
60+
phone: '6612473931',
61+
},
62+
{
63+
name: 'HI-TECH',
64+
phone: '6612400751',
65+
},
66+
{
67+
name: 'Lifeline Hsopital',
68+
phone: '9437079322',
69+
},
70+
],
71+
},
72+
{
73+
title: 'Ambulance',
74+
content: [
75+
{
76+
name: 'NIT Ambulance',
77+
phone: '8280468609',
78+
},
79+
],
80+
},
81+
],
82+
83+
location: [
84+
{
85+
title: 'Health Centre',
86+
location1: 'NIT Rourkela ',
87+
location2: 'Sector-1, Rourkela ',
88+
location3: 'Odisha, India',
89+
pin: ' PIN: 769008',
90+
},
91+
{
92+
title: 'CWS Hospital',
93+
location1: 'Northern Ave, ',
94+
location2: 'NIT Rourkela ',
95+
location3: 'Jagda, Rourkela ',
96+
location4: 'Odisha, India',
97+
pin: ' PIN: 769042',
98+
},
99+
],
100+
});

‎client/src/components/healthAndEmergencyInfo/Info.js

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
import React from 'react';
2+
import Image from 'next/dist/client/image';
3+
4+
// libraries
5+
import { Grid, Typography } from '@mui/material';
6+
import CallIcon from '@mui/icons-material/Call';
7+
import makeStyles from '@mui/styles/makeStyles';
8+
9+
//placeholder
10+
import { INFO } from '../../assets/placeholder/healthAndEmergencyInfo';
11+
12+
//image
13+
import map from '../../assets/images/contact/map.png';
14+
import DropDownCard from '../widgets/DropDownCard';
15+
16+
const Info = () => {
17+
const classes = useStyles();
18+
19+
return (
20+
<div className={classes.wrapper}>
21+
<div className={classes.dropdownWrapper}>
22+
{INFO.dropdown.map((item1, key) => (
23+
<DropDownCard title={item1.title} key={key}>
24+
<Grid container>
25+
{item1.content.map((item, key) => (
26+
<Grid
27+
item
28+
xs={12}
29+
md={3}
30+
key={key}
31+
className={classes.dropdownDetails}
32+
>
33+
{item.name && (
34+
<Typography
35+
variant='body1'
36+
className={classes.dropdownTypography}
37+
>
38+
Name: {item.name}
39+
</Typography>
40+
)}
41+
{item.room && (
42+
<Typography
43+
variant='body1'
44+
className={classes.dropdownTypography}
45+
>
46+
Room: {item.room}
47+
</Typography>
48+
)}
49+
{item.day && (
50+
<Typography
51+
variant='body1'
52+
className={classes.dropdownTypography}
53+
>
54+
Visiting Day: {item.day}
55+
</Typography>
56+
)}
57+
{item.designation && (
58+
<Typography
59+
variant='body1'
60+
className={classes.dropdownTypography}
61+
>
62+
Designation: {item.designation}
63+
</Typography>
64+
)}
65+
{item.phone && (
66+
<Typography
67+
variant='body1'
68+
className={classes.dropdownTypography}
69+
>
70+
<CallIcon className={classes.phoneIcon} />
71+
{item.phone}
72+
</Typography>
73+
)}
74+
</Grid>
75+
))}
76+
</Grid>
77+
</DropDownCard>
78+
))}
79+
</div>
80+
<Grid container spacing={4}>
81+
{INFO.location.map((place, key) => (
82+
<Grid item xs={12} md={6} key={key}>
83+
<div className={classes.locationWrapper}>
84+
<Grid container justifyContent='center'>
85+
<Grid item xs={6}>
86+
<Typography variant='h3' className={classes.locationTitle}>
87+
{place.title}
88+
</Typography>
89+
<Typography variant='body1' className={classes.location}>
90+
{place.location1}
91+
</Typography>
92+
<Typography variant='body1' className={classes.location}>
93+
{place.location2}
94+
</Typography>
95+
<Typography variant='body1' className={classes.location}>
96+
{place.location3}
97+
</Typography>
98+
<Typography variant='body1' className={classes.location}>
99+
{place.location4}
100+
</Typography>
101+
<Typography variant='body1' className={classes.location}>
102+
{place.pin}
103+
</Typography>
104+
</Grid>
105+
<Grid item xs={6} className={classes.mapWrapper}>
106+
<Image
107+
src={map}
108+
alt='Monday Morning'
109+
className={classes.map}
110+
/>
111+
<a
112+
href='https://goo.gl/maps/EKwq5J2x1djPHwVB9'
113+
target='_blank'
114+
rel='noreferrer'
115+
>
116+
<Typography variant='body2' className={classes.mapText}>
117+
See on map
118+
</Typography>
119+
</a>
120+
</Grid>
121+
</Grid>
122+
</div>
123+
</Grid>
124+
))}
125+
</Grid>
126+
</div>
127+
);
128+
};
129+
130+
export default Info;
131+
132+
const useStyles = makeStyles((theme) => ({
133+
wrapper: {
134+
maxWidth: '1200px',
135+
margin: '40px auto 0px auto',
136+
[theme.breakpoints.down('lg')]: {
137+
marginTop: '24px',
138+
padding: '0px 24px 0px 24px',
139+
},
140+
},
141+
dropdownWrapper: {
142+
marginBottom: '20px',
143+
},
144+
145+
// caption: {
146+
// color: theme.palette.secondary.neutral60,
147+
// lineHeight: '24px',
148+
// },
149+
150+
dropdownDetails: {
151+
paddingTop: '18px',
152+
paddingBottom: '18px',
153+
},
154+
155+
dropdownTypography: {
156+
fontSize: '18px',
157+
[theme.breakpoints.down('md')]: {
158+
fontSize: '15px',
159+
},
160+
},
161+
162+
phoneIcon: {
163+
marginRight: '8px',
164+
fontSize: '1.3rem',
165+
verticalAlign: 'middle',
166+
[theme.breakpoints.down('md')]: {
167+
fontSize: '1rem',
168+
marginRight: '4px',
169+
},
170+
},
171+
172+
locationWrapper: {
173+
marginTop: '18px',
174+
padding: '18px 0px 24px 24px',
175+
boxShadow: theme.shadows[0],
176+
borderRadius: '8px',
177+
},
178+
locationTitle: {
179+
paddingBottom: '12px',
180+
fontSize: '22px',
181+
[theme.breakpoints.up('xs')]: {
182+
fontSize: '22px',
183+
},
184+
[theme.breakpoints.up('md')]: {
185+
fontSize: '15px',
186+
},
187+
[theme.breakpoints.up('lg')]: {
188+
fontSize: '22px',
189+
},
190+
},
191+
mapWrapper: {
192+
justifyItems: 'center',
193+
[theme.breakpoints.down('lg')]: {
194+
paddingTop: '16px',
195+
},
196+
},
197+
map: {
198+
width: '174px',
199+
height: '155px',
200+
paddingTop: '4px',
201+
marginLeft: '16px',
202+
[theme.breakpoints.down('lg')]: {
203+
width: '114px',
204+
height: '101px',
205+
},
206+
},
207+
mapText: {
208+
color: theme.palette.common.black,
209+
paddingTop: '12px',
210+
paddingRight: '16px',
211+
textDecorationLine: 'underline',
212+
textAlign: 'center',
213+
fontSize: '18px',
214+
[theme.breakpoints.up('sm')]: {
215+
fontSize: '18px',
216+
},
217+
[theme.breakpoints.up('md')]: {
218+
fontSize: '13px',
219+
},
220+
[theme.breakpoints.up('lg')]: {
221+
fontSize: '18px',
222+
},
223+
[theme.breakpoints.down('sm')]: {
224+
paddingTop: '8px',
225+
paddingRight: '4px',
226+
},
227+
},
228+
location: {
229+
fontFamily: theme.typography.fontFamily,
230+
[theme.breakpoints.down('sm')]: {
231+
fontSize: '12px',
232+
},
233+
},
234+
}));

‎client/src/components/widgets/DropDownCard.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,11 @@ const useStyles = makeStyles((theme) => ({
3535
boxShadow:
3636
'0px 0px 1px rgba(0, 0, 0, 0.24), 0px 1px 3px rgba(0, 0, 0, 0.12)',
3737
padding: '20px',
38-
marginTop: '32px',
38+
marginTop: '22px',
39+
borderRadius: '8px',
3940
cursor: 'pointer',
4041
[theme.breakpoints.down('md')]: {
41-
flexWrap: 'wrap-reverse',
42+
flexDirection: 'row-reverse',
4243
},
4344
},
4445
DropDownIcon: {

0 commit comments

Comments
 (0)