function MainComponent() { const comparisonTopics = [ { id: 'universal-studios', label: 'Universal Studios', type: 'Theme park in Singapore' }, { id: 'singapore-zoo', label: 'Singapore Zoo', type: 'Search term' }, { id: 'singapore-cable-car', label: 'Singapore Cable Car', type: 'Search term' } ]; const colorMap = { 'universal-studios': '#3B82F6', 'singapore-zoo': '#EF4444', 'singapore-cable-car': '#F59E0B' }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full px-4 py-6 bg-[#ffffff] shadow-md", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto flex flex-wrap items-center justify-between", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Trend Analysis"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#007bff] text-white px-4 py-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Add comparison"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto bg-white p-4 shadow rounded-md", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, comparisonTopics.map((topic)=>/*#__PURE__*/ React.createElement("div", { key: topic.id, className: "flex items-center p-2 bg-gray-100 rounded-md", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: colorMap[topic.id] }, className: "w-3 h-3 rounded-full mr-2", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, topic.label), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, " - ", topic.type)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center p-2 bg-blue-100 rounded-md cursor-pointer", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-blue-500 text-lg font-semibold mr-2", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("span", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "Add comparison"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Interest over time"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[300px]", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { height: '25%', width: '10%', backgroundColor: '#3B82F6', position: 'absolute', bottom: '0', left: '5%' }, __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { height: '50%', width: '10%', backgroundColor: '#EF4444', position: 'absolute', bottom: '0', left: '20%' }, __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { height: '75%', width: '10%', backgroundColor: '#F59E0B', position: 'absolute', bottom: '0', left: '35%' }, __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { height: '100%', width: '10%', backgroundColor: '#2563EB', position: 'absolute', bottom: '0', left: '50%' }, __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block text-xs font-roboto text-gray-700 mr-2", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "Average"), /*#__PURE__*/ React.createElement("span", { className: "inline-block h-3 w-3 bg-blue-600 rounded-full mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "inline-block h-3 w-3 bg-red-500 rounded-full mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "inline-block h-3 w-3 bg-yellow-500 rounded-full mr-2", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "inline-block h-3 w-3 bg-blue-500 rounded-full", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }))))))); }