function TopicCard({ title, imageUrl, onClick }) { return /*#__PURE__*/ React.createElement("div", { onClick: onClick, className: "bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer overflow-hidden w-[280px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[160px] w-full", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl || '/placeholder-topic.jpg', alt: `Topic: ${title}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#2B2B2B] text-lg font-medium", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, title || 'Untitled Topic'))); } function TopicCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TopicCard, { title: "Learn English Grammar", imageUrl: "/english-grammar.jpg", onClick: ()=>console.log('Grammar clicked'), __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TopicCard, { title: "Vocabulary Builder", imageUrl: "/vocabulary.jpg", onClick: ()=>console.log('Vocabulary clicked'), __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TopicCard, { title: "Conversation Practice", imageUrl: "/conversation.jpg", onClick: ()=>console.log('Conversation clicked'), __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function MainComponent() { const topics = [ { title: "Travel Conversation", imageUrl: "/travel-conversation.jpg", onClick: ()=>window.location.href = '/conversation' }, { title: "Business English", imageUrl: "/business-english.jpg", onClick: ()=>window.location.href = '/conversation' }, { title: "Daily Small Talk", imageUrl: "/daily-smalltalk.jpg", onClick: ()=>window.location.href = '/conversation' }, { title: "Academic Writing", imageUrl: "/academic-writing.jpg", onClick: ()=>window.location.href = '/conversation' }, { title: "Job Interviews", imageUrl: "/job-interviews.jpg", onClick: ()=>window.location.href = '/conversation' }, { title: "Social Media English", imageUrl: "/social-media.jpg", onClick: ()=>window.location.href = '/conversation' } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#0088cc] px-6 py-4 shadow-md", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-white font-medium", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Language Topics")), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 justify-items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, topics.map((topic, index)=>/*#__PURE__*/ React.createElement(TopicCard, { key: index, title: topic.title, imageUrl: topic.imageUrl, onClick: topic.onClick, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }))))); }