function NameNameLabelInRobotoFont({ label }) { return /*#__PURE__*/ React.createElement("label", { className: "block font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function NameNameLabelInRobotoFontStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NameNameLabelInRobotoFont, { label: "Name", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { const ticketsTabContent = /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Ticket Sales"), /*#__PURE__*/ React.createElement("form", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(NameNameLabelInRobotoFont, { label: "Name", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border w-full p-2", type: "text", name: "name", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(NameNameLabelInRobotoFont, { label: "Email", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border w-full p-2", type: "email", name: "email", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(NameNameLabelInRobotoFont, { label: "Number of Tickets", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border w-full p-2", type: "number", name: "number_of_tickets", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Buy Tickets"))); const newsTabContent = /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "News Updates"), /*#__PURE__*/ React.createElement("ul", { className: "mt-4 space-y-2 font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Update 1: New bus routes available from next week."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Update 2: Ticket prices will increase starting next month."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Update 3: Maintenance scheduled for the upcoming weekend."))); const [activeTab, setActiveTab] = React.useState('tickets'); const tabContent = activeTab === 'tickets' ? ticketsTabContent : newsTabContent; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around font-crimson-text text-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('tickets'), className: `p-2 ${activeTab === 'tickets' ? 'border-b-2 border-blue-500' : ''}`, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Tickets"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('news'), className: `p-2 ${activeTab === 'news' ? 'border-b-2 border-blue-500' : ''}`, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "News")), tabContent); }