import React from "react"; import Table from "../../component/Table.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: ( <Table className={"risk-table"} head={thead1} contents={content1} contentKey={key1} /> ), }, { id: 2, title: "복약 관리", description: ( <Table className={"risk-table"} head={thead2} contents={content2} contentKey={key2} /> ), }, { id: 3, title: "배터리 관리", description: ( <Table 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"> {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> ); }