File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import TableRisk from "../../component/TableRisk.jsx";
import Button from "../../component/Button.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import ContentTitle from "../../component/ContentTitle.jsx";
import Modal from "../../component/Modal.jsx";
import { useNavigate } from "react-router";
export default function RiskSet() {
const navigate = useNavigate();
const thead1 = [
"",
"",
"",
"",
"",
"",
];
const key1 = [
"text",
"date",
"text1",
"text4",
"temp",
"text3",];
const content1 = [
{
text: "최근 평균 온도가",
text4: (
<input type="number" />
),
temp: (
<select>
<option value="">이상</option>
<option value="">이하</option>
</select>
),
text3: "일 경우 위험알림으로 지정합니다.",
},
];
const thead2 = [
"",
"",
"",
];
const key2 = [
"text",
"date",
"text2",];
const content2 = [
{
text: "미복약 횟수가 누적",
date:(
<input type="number" />
),
text2: "회 이상일 경우 위험알림으로 지정합니다.",
},
];
const thead3 = [
"",
"",
"",
];
const key3 = [
"text",
"date",
"text2",];
const content3 = [
{
text: "배터리 잔량이 최근",
date: (
<input type="number" />
),
text2: "% 이하일 경우 위험알림으로 지정합니다.",
},
];
const data = [
{
id: 1,
title: "온도 관리",
description: (
<TableRisk
className={"risk-table"}
head={thead1}
contents={content1}
contentKey={key1}
/>
),
},
{
id: 2,
title: "복약 관리",
description: (
<TableRisk
className={"risk-table"}
head={thead2}
contents={content2}
contentKey={key2}
/>
),
},
{
id: 3,
title: "배터리 관리",
description: (
<TableRisk
className={"risk-table"}
head={thead3}
contents={content3}
contentKey={key3}
/>
),
},
];
const [index, setIndex] = React.useState(1);
return (
<main>
<ContentTitle contentTitle={"위험 기준 관리 "} />
<div className="tab-container">
<ul className="tab-menu flex-start">
{data.map((item) => (
<li
key={item.id}
className={index === item.id ? "active" : null}
onClick={() => setIndex(item.id)}
>
{item.title}
</li>
))}
</ul>
<div className="content-wrap">
<SubTitle
className="margin-bottom"
explanation={"지정한 기준에 따라 메인 화면에 위험 알림 대상자 수를 표시하여 줍니다."}
color={"#333333"}
/>
<div className="btn-wrap flex-end margin-bottom ">
<Button
className={"btn-small gray-btn"}
btnName={"저장"}
/>
</div>
<ul className="tab-content">
{data
.filter((item) => index === item.id)
.map((item) => (
<li>{item.description}</li>
))}
</ul>
</div>
</div>
</main>
);
}