File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-02-17
File name
Commit message
Commit date
import React from "react";
import Title from "../../component/Title.jsx";
import Table from "../../component/Table.jsx";
import Calendar from "../../component/Calendar.jsx";
import ClearIcon from '@mui/icons-material/Clear';
import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
import MedicationIcon from '@mui/icons-material/Medication';
import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import ErrorIcon from '@mui/icons-material/Error';
export default function Main_guardian() {
const tableHead1 = ["", "", "", "", "", ""];
const Key1 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
const content1 = [
{
morning: "아침",
morning2:(
<CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/>
),
lunch: "점심",
lunch2: (
<CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/>
),
dinner: "저녁",
dinner2: (
<CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/>
),
}
];
const tableHead2 = ["", "", "", "", "", ""];
const Key2 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
const content2 = [
{
morning: "아침",
morning2:(
<ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/>
),
lunch: "점심",
lunch2: (
<ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/>
),
dinner: "저녁",
dinner2: (
<ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/>
),
}
];
const tableHead3 = ["월", "화", "수", "목", "금", "토", "일"];
const Key3 = ["mon", "tue", "wed","thu", "fri","sat","sun"];
const content3 = [
{
mon: "24°C",
tue: "24°C",
wed: "24°C",
thu: "24°C",
fri: "24°C",
sat: "24°C",
sun: "24°C",
}
];
return (
<>
<main>
<div><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
<div className="main-grid-guardian">
<ul className="content-box statistics-guardian">
<li className="flex-start">
<p><AssignmentTurnedInIcon sx={{ width: "5rem", height: "5rem", color: "#bf0629", borderRadius: "50px" }} /></p>
<p>방문 체크</p>
<p>이번달 보호사님이 방문한 횟수는 총 4회 입니다.</p>
</li>
<Calendar />
</ul>
<ul className="content-box statistics-guardian">
<li className="flex-start">
<p><MedicationIcon sx={{ width: "5rem", height: "5rem", color: "#0dd390", borderRadius: "50px" }} /></p>
<p>복약 체크</p>
<p>약을 잘 복용하고 계신지 체크해주세요</p>
</li>
<li className="flex">
<p className="guardian-table-text">어제</p>
<p className="guardian-table-inner"><Table
className={"guardian-table"}
head={tableHead1}
contents={content1}
contentKey={Key1}
/></p>
</li>
<li className="flex">
<p className="guardian-table-text">2일 전</p>
<p className="guardian-table-inner"><Table
className={"guardian-table"}
head={tableHead2}
contents={content2}
contentKey={Key2}
/></p>
</li>
<li className="flex">
<p className="guardian-table-text">3일 전</p>
<p className="guardian-table-inner"><Table
className={"guardian-table"}
head={tableHead1}
contents={content1}
contentKey={Key1}
/></p>
</li>
</ul>
<ul className="content-box statistics-guardian">
<li className="flex-start">
<p><DeviceThermostatIcon sx={{ width: "5rem", height: "5rem", color: "#f1de05", borderRadius: "50px" }} /></p>
<p>온도 체크</p>
<p>댁내 온도가 적절한지 체크해보세요.</p>
</li>
<li className="flex">
<p className="guardian-table-inner"><Table
className={"guardian-table1"}
head={tableHead3}
contents={content3}
contentKey={Key3}
/></p>
</li>
</ul>
<ul className="content-box statistics-guardian">
<li className="flex-start">
<p><BatteryCharging20Icon sx={{ width: "5rem", height: "5rem", color: "#5f9af3", borderRadius: "50px" }} /></p>
<p>현재 스마트 약상자의 배터리가 40% 입니다.</p>
<p></p>
</li>
<li>
<p className="red"><ErrorIcon sx={{ width: "1rem", height: "1rem", color: "red", borderRadius: "50px" }}/>충전이 필요합니다.</p>
</li>
</ul>
<div className="content-box combine-left combine-all-government">
</div>
</div>
</main>
</>
);
}