function FxSocialMediaTracker({ fetchResponses, buttonText }) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: fetchResponses, className: "mb-4 px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600 transition duration-300", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, buttonText)), /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function FxSocialMediaTrackerStory() { const fetchSocialMediaResponses = ()=>{ console.log("Fetching 100 social media responses related to 'fx'."); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FxSocialMediaTracker, { fetchResponses: fetchSocialMediaResponses, buttonText: "取得ボタン", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function MainComponent() { const [responses, setResponses] = React.useState([]); const fetchSocialMediaResponses = async ()=>{ const response = await fetch('/api/scrape-twitter', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'fx' }) }); const data = await response.json(); setResponses(data.responses); }; const renderResponseList = ()=>responses.map((response, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: response.link, className: "block hover:bg-gray-100 p-2 rounded", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, response.message)); return /*#__PURE__*/ React.createElement("div", { className: "flex", style: { minHeight: '100vh' }, __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(FxSocialMediaTracker, { fetchResponses: fetchSocialMediaResponses, buttonText: "取得ボタン", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto h-full", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, renderResponseList())), /*#__PURE__*/ React.createElement("div", { className: "mx-4 w-0 border border-gray-300", style: { resize: 'horizontal', overflow: 'auto' }, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(PieChart, { data: { negative: responses.filter((response)=>response.sentiment === 'negative').length, positive: responses.filter((response)=>response.sentiment === 'positive').length, neutral: responses.filter((response)=>response.sentiment === 'neutral').length }, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }))); } function PieChart({ data }) { const total = Object.values(data).reduce((acc, cur)=>acc + cur, 0); const calculatePercentage = (value)=>value / total * 100; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 32 32", className: "w-full h-full", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center mt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-4 h-4 inline-block bg-red-500", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), " Negative"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-4 h-4 inline-block bg-green-500", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), " Positive"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-4 h-4 inline-block bg-yellow-500", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), " Neutral"))); }