function BlueHeaderLayout({ handleSubmit, selectedOption, handleOptionChange, optionAPercentage, optionBPercentage }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f2f2f2] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-4 px-8 bg-[#007bff] text-white font-roboto flex justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "エンピック"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "ml-6", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#aad8ff] text-xl", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, "ホーム")), /*#__PURE__*/ React.createElement("li", { className: "ml-6", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#aad8ff] text-xl", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, "お問い合わせ"))))), /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#333] text-3xl mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "トレンドトピックについてのご意見をお聞かせください"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-[#888] block mb-2 text-xl", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "あなたはどちらを選びますか？"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "option", value: "optionA", checked: selectedOption === "optionA", onChange: handleOptionChange, className: "mr-2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "font-roboto mr-4 text-xl", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "オプションA"), /*#__PURE__*/ React.createElement("input", { type: "radio", name: "option", value: "optionB", checked: selectedOption === "optionB", onChange: handleOptionChange, className: "mr-2", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "オプションB"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007bff] text-white font-roboto py-3 px-6 rounded hover:bg-[#0056b3] text-xl", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "送信")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mt-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px]", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 32 32", className: "w-full h-full", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "16", cy: "16", r: "16", fill: "#eee", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: `M16 0 A16 16 0 ${optionAPercentage >= 50 ? "1" : "0"} 1 16 ${(0.02 * optionAPercentage).toFixed(2)} L16 16 Z`, fill: "#007bff", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: `M16 ${(0.02 * optionAPercentage).toFixed(2)} A16 16 0 ${optionBPercentage >= 50 ? "1" : "0"} 0 16 0 Z`, fill: "#28a745", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }))))); } function BlueHeaderLayoutStory() { const handleSubmit = ()=>{}; const handleOptionChange = ()=>{}; const selectedOption = "optionA"; const optionAPercentage = 60; const optionBPercentage = 40; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlueHeaderLayout, { handleSubmit: handleSubmit, selectedOption: selectedOption, handleOptionChange: handleOptionChange, optionAPercentage: optionAPercentage, optionBPercentage: optionBPercentage, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedOption, setSelectedOption] = React.useState(""); const [feedback, setFeedback] = React.useState({ optionA: 0, optionB: 0 }); const handleOptionChange = (event)=>{ setSelectedOption(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); if (!selectedOption) return; setFeedback((prevFeedback)=>({ ...prevFeedback, [selectedOption]: prevFeedback[selectedOption] + 1 })); setSelectedOption(""); }; const totalVotes = feedback.optionA + feedback.optionB; const optionAPercentage = totalVotes === 0 ? 0 : feedback.optionA / totalVotes * 100; const optionBPercentage = totalVotes === 0 ? 0 : feedback.optionB / totalVotes * 100; const optionAEndAngle = optionAPercentage / 100 * 360; const optionBStartAngle = optionAEndAngle; const optionAPathD = describeArc(16, 16, 16, 0, optionAEndAngle); const optionBPathD = describeArc(16, 16, 16, optionBStartAngle, 360); function polarToCartesian(centerX, centerY, radius, angleInDegrees) { const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + radius * Math.cos(angleInRadians), y: centerY + radius * Math.sin(angleInRadians) }; } function describeArc(x, y, radius, startAngle, endAngle) { const start = polarToCartesian(x, y, radius, endAngle); const end = polarToCartesian(x, y, radius, startAngle); const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; return [ "M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y, "L", x, y, "Z" ].join(" "); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlueHeaderLayout, { handleSubmit: handleSubmit, selectedOption: selectedOption, handleOptionChange: handleOptionChange, optionAPercentage: optionAPercentage, optionBPercentage: optionBPercentage, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); }