function ReportViolationForm({ title, violationLabel, violationPlaceholder, audioSources }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md w-[25%]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg bg-blue-500 text-white p-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-gray-700", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, violationLabel), /*#__PURE__*/ React.createElement("input", { type: "text", name: "violationType", className: "w-full mb-4 p-2 border border-gray-300 rounded", placeholder: violationPlaceholder, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full mb-4 flex items-center justify-center p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone mr-2", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }), "Записать сообщение"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-700 mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "Сообщения"), audioSources.map((source, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between bg-gray-200 p-2 rounded mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("audio", { controls: true, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: source, type: "audio/mp3", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }), "Your browser does not support the audio element."), /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash text-gray-600 cursor-pointer", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Отправить")); } function ReportViolationFormStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ReportViolationForm, { title: "Сообщить о нарушении", violationLabel: "Тип нарушения", violationPlaceholder: "Placeholder", audioSources: [ "path/to/audio/file1.mp3", "path/to/audio/file2.mp3" ], __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tab, setTab] = React.useState("cameras"); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-200 font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md w-[70%]", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-l-lg ${tab === "cameras" ? "bg-blue-500 text-white" : "bg-gray-300 text-gray-700"}`, onClick: ()=>setTab("cameras"), __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Камеры"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-r-lg ${tab === "map" ? "bg-blue-500 text-white" : "bg-gray-300 text-gray-700"}`, onClick: ()=>setTab("map"), __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "Карта")), tab === "cameras" ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[400px] bg-gray-300 flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "Видео с камеры"), /*#__PURE__*/ React.createElement("select", { name: "camera", className: "p-2 bg-gray-200 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, "CAM 1"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, "CAM 2"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, "CAM 3"))) : /*#__PURE__*/ React.createElement("div", { className: "h-[400px] bg-gray-300 flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/map-placeholder.png", alt: "Map view", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement(ReportViolationForm, { title: "Сообщить о нарушении", violationLabel: "Тип нарушения", violationPlaceholder: "Placeholder", audioSources: [ "path/to/audio/file1.mp3", "path/to/audio/file2.mp3" ], __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }))); }