function MainComponent({ topics, onSelectTopic }) { const subProjects = { "Data Science": [ "Machine Learning", "Data Analysis", "Data Visualization", "Natural Language Processing", "Big Data", "Statistical Modeling" ], "Marketing": [ "Digital Marketing", "SEO", "Content Creation", "Market Research", "Brand Management", "Email Marketing" ], "Sustainability": [ "Green Energy", "Waste Management", "Sustainable Design", "Corporate Social Responsibility", "Climate Change", "Eco-friendly Products" ], "Engineering": [ "Software Development", "Systems Engineering", "Civil Engineering", "Mechanical Engineering", "Electrical Engineering", "Chemical Engineering" ], "Innovation": [ "Product Development", "Business Model Innovation", "Process Improvement", "Creative Thinking", "Tech Trends", "User Experience" ], "Operations": [ "Supply Chain Management", "Logistics", "Process Automation", "Quality Assurance", "Inventory Management", "Operational Efficiency" ], "Design": [ "Graphic Design", "UI/UX Design", "Product Design", "Web Design", "Interior Design", "Fashion Design" ], "Consulting": [ "Management Consulting", "Strategy Consulting", "IT Consulting", "Financial Consulting", "Risk Consulting", "HR Consulting" ] }; const [selectedTopic, setSelectedTopic] = React.useState(null); const handleSelectTopic = (topic)=>{ setSelectedTopic(topic === selectedTopic ? null : topic); onSelectTopic(topic === selectedTopic ? null : topic); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "Select Topics"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, topics.map((topic, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "p-4 border border-gray-300 rounded shadow-sm hover:bg-gray-100", name: topic, onClick: ()=>handleSelectTopic(topic), style: { backgroundColor: selectedTopic === topic ? '#e0e0e0' : 'white' }, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, topic))), selectedTopic && /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, selectedTopic, " Sub-Projects"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, subProjects[selectedTopic]?.map((subProject, index)=>/*#__PURE__*/ React.createElement("label", { key: index, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: subProject, className: "form-checkbox h-5 w-5", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, subProject)))))); } function StoryComponent() { const topics = [ "Data Science", "Marketing", "Sustainability", "Engineering", "Innovation", "Operations", "Design", "Consulting" ]; const handleSelectTopic = (topic)=>{ console.log("Selected topic:", topic); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { topics: topics, onSelectTopic: handleSelectTopic, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this })); }