function MainComponent({ logo, tablesData }) { const [activeTab, setActiveTab] = React.useState('new'); const [showMenu, setShowMenu] = React.useState(false); const [selectedTable, setSelectedTable] = React.useState(null); const TableButton = ({ table, peopleCount, onClick })=>{ let statusClass = "text-sm"; let statusText = peopleCount || 'Нет людей'; if (peopleCount === 'Vip' || peopleCount === 'Летник' || peopleCount?.includes('😠')) { statusClass = "text-red-500 font-semibold"; } return /*#__PURE__*/ React.createElement("button", { className: `border border-gray-300 rounded-lg p-2 w-full flex flex-col justify-center items-center bg-white ${selectedTable === table ? 'ring-2 ring-blue-400' : ''}`, onClick: ()=>onClick(table), __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, table), /*#__PURE__*/ React.createElement("span", { className: statusClass, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, statusText)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 w-full", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md sticky top-0 z-10", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logo, alt: "Restaurant app logo", className: "h-8 my-2", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-2 mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `p-1 px-4 border-b-2 ${activeTab === 'new' ? 'border-black' : 'border-transparent'}`, onClick: ()=>setActiveTab('new'), __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Создать новый чек"), /*#__PURE__*/ React.createElement("button", { className: `p-1 px-4 border-b-2 ${activeTab === 'open' ? 'border-black' : 'border-transparent'}`, onClick: ()=>setActiveTab('open'), __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Открытые чеки"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 w-full mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, tablesData.map((tableData)=>/*#__PURE__*/ React.createElement(TableButton, { key: tableData.table, table: tableData.table, peopleCount: tableData.peopleCount, onClick: ()=>{ setSelectedTable(tableData.table); setShowMenu(true); }, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }))), showMenu && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", onClick: ()=>setShowMenu(false), __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, `Выберите количество человек за столом: ${selectedTable}`), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 justify-center", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, Array.from({ length: 10 }, (_, i)=>/*#__PURE__*/ React.createElement("button", { key: i + 1, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>setShowMenu(false), __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, i + 1)))))); } function StoryComponent() { const logo = "/path/to/logo.png"; const tablesData = [ { table: 'Стол 1' }, { table: 'Стол 2' }, { table: 'Стол 3' }, { table: 'Стол 4' }, { table: 'Стол 5' }, { table: 'Стол 6', peopleCount: 'Vip' }, { table: 'Стол 7', peopleCount: 'Летник' }, { table: 'Стол 8', peopleCount: 'Летник' }, { table: 'Стол 9', peopleCount: 'Летник' }, { table: 'Стол 10', peopleCount: 'Ст 1😠' } ]; return /*#__PURE__*/ React.createElement(MainComponent, { logo: logo, tablesData: tablesData, __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }); }