import React from "react"; import Title from "../../component/Title.jsx"; import Table from "../../component/Table.jsx"; import Map from "../../component/chart/Map.jsx"; import Chart from "../../component/chart/Chart.jsx"; import Chart5_agency from "../../component/chart/Chart5_agency.jsx"; import Chart2_agency from "../../component/chart/Chart2_agency.jsx"; import AddCircleIcon from "@mui/icons-material/AddCircle"; import Calendar_agency from "../../component/Calendar_agency.jsx"; import tool from "../../../resources/files/images/tool.png"; import medicinebox from "../../../resources/files/images/medicinebox.png"; import box from "../../../resources/files/images/box.png"; import exchange from "../../../resources/files/images/exchange.png"; import error from "../../../resources/files/images/error.png"; import batteryAgency from "../../../resources/files/images/batteryAgency.png"; import medicineAgency from "../../../resources/files/images/medicineAgency.png"; import temperatureAgency from "../../../resources/files/images/temperatureAgency.png"; import TitleSmall from "../../component/TitleSmall.jsx"; export default function Main2() { const thead = ["No", "계약업체명", "구분", "담당자 연락처", "주소"]; const key = ["No", "agency", "division", "phone", "address",]; const content = [ { No: 1, agency: "A복지관", division: "교환", phone: "010-1234-5678", address: "경상북도 군위군 삼국유사면", }, ]; const data = [ { id: 1, title: "교환/수리 리스트", description: ( <Table className={"agency-visitlist"} head={thead} contents={content} contentKey={key} /> ), }, { id: 2, title: "장비 추가 리스트", description: ( <Table className={"agency-visitlist"} head={thead} contents={content} contentKey={key} /> ), }, ] const [index, setIndex] = React.useState(1); return ( <main> <div className="flex-start margin-bottom2"><img src={tool} alt="" /><TitleSmall title={"장비 및 업체 현황"} explanation={"2023.02.28 기준"} /></div> <div className="main-grid-agency margin-bottom2"> <ul className="content-box statistics-agency" background="#f7acba"> <li className="flex-start"> <img src={box} alt="" /> <div className="text"> <p>전체 장비 대여 수</p> <p className="equipcount">40</p> </div> </li> </ul> <ul className="content-box statistics-agency" background="#8ef3d1"> <li className="flex-start"> <img src={error} alt="" /> <div className="text"> <p>계약 업체 수</p> <p className="equipcount">40</p> </div> </li> </ul> <ul className="content-box statistics-agency" background="#ebe7b9" > <li className="flex-start"> <img src={exchange} alt="" /> <div className="text"> <p>교환/수리 요청 수</p> <p className="equipcount">40</p> </div> </li> </ul> <ul className="content-box statistics-agency" background="#5f9af3"> <li className="flex-start"> <img src={error} alt="" /> <div className="text"> <p>추가 요청 장비 수 </p> <p className="equipcount">40</p> </div> </li> </ul> </div> <div className="flex-start margin-bottom2"><img src={tool} alt="" /><TitleSmall title={"장비 관리 리스트"} /></div> <div className="main-grid-agency"> <div className="content-box combine-left-government3"> <ul className="tab-menu-agency flex-start"> {data.map((item) => ( <li key={item.id} className={index === item.id ? "active" : null} onClick={() => setIndex(item.id)} > {item.title} </li> ))} </ul> <div> <div className="margin-bottom2"> <Calendar_agency /> </div> <ul className="tab-content"> {data .filter((item) => index === item.id) .map((item) => ( <li>{item.description}</li> ))} </ul> </div> </div> </div> </main> ); }