function MainComponent({ projects }) { const [selectedProject, setSelectedProject] = React.useState(null); const [tickets, setTickets] = React.useState([]); const [ticketTitle, setTicketTitle] = React.useState(""); const [ticketDescription, setTicketDescription] = React.useState(""); const handleSelectProject = (project)=>{ setSelectedProject(project); setTickets(project.tickets || []); }; const handleAddTicket = ()=>{ const newTicket = { id: Date.now(), title: ticketTitle, description: ticketDescription }; setTickets([ ...tickets, newTicket ]); setTicketTitle(""); setTicketDescription(""); }; const handleDeleteTicket = (ticketId)=>{ const updatedTickets = tickets.filter((ticket)=>ticket.id !== ticketId); setTickets(updatedTickets); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#2d2d30] text-[#ffffff] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Project Management"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#007acc] text-[#ffffff] px-4 py-2 rounded", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "New Project")), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[300px]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, projects.map((project)=>/*#__PURE__*/ React.createElement("div", { key: project.id, className: "bg-[#f4f4f4] p-4 my-2 rounded shadow-sm cursor-pointer", onClick: ()=>handleSelectProject(project), __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, project.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, project.description), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#007acc] text-[#ffffff] px-2 py-1 text-sm rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, project.status))))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, selectedProject && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, selectedProject.name, " Tickets"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, tickets.map((ticket)=>/*#__PURE__*/ React.createElement("li", { key: ticket.id, className: "bg-[#f9f9f9] p-2 my-2 rounded flex justify-between", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 54, columnNumber: 23 }, __self: this }, ticket.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 23 }, __self: this }, ticket.description)), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white px-2 rounded", onClick: ()=>handleDeleteTicket(ticket.id), __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }, "Delete")))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "ticketTitle", placeholder: "Ticket Title", className: "border p-2 w-full mt-2", value: ticketTitle, onChange: (e)=>setTicketTitle(e.target.value), __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "ticketDescription", placeholder: "Ticket Description", className: "border p-2 w-full mt-2", value: ticketDescription, onChange: (e)=>setTicketDescription(e.target.value), __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 mt-2 rounded", onClick: handleAddTicket, __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "Add Ticket")))))); } function StoryComponent() { const sampleProjects = [ { id: 1, name: "Project Alpha", description: "First project description.", status: "Active", tickets: [ { id: 1, title: "Ticket 1", description: "Issue with feature A." }, { id: 2, title: "Ticket 2", description: "Issue with feature B." } ] }, { id: 2, name: "Project Beta", description: "Second project description.", status: "Closed", tickets: [ { id: 3, title: "Ticket 3", description: "Issue with feature C." }, { id: 4, title: "Ticket 4", description: "Issue with feature D." } ] } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { projects: sampleProjects, __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this })); }