function MainComponent() { const [selectedColor, setSelectedColor] = useState(null); const [colorScheme, setColorScheme] = useState("single"); const [palette, setPalette] = useState([]); const handleColorWheelClick = (e)=>{ const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left - rect.width / 2; const y = e.clientY - rect.top - rect.height / 2; const angle = Math.atan2(y, x); const hue = (angle * 180 / Math.PI + 360) % 360; const color = `hsl(${hue}, 100%, 50%)`; setSelectedColor(color); }; const calculateComplementary = (hue)=>{ return (hue + 180) % 360; }; const calculateAnalogous = (hue)=>{ return [ (hue - 30 + 360) % 360, (hue + 30) % 360 ]; }; const calculateTriadic = (hue)=>{ return [ (hue + 120) % 360, (hue + 240) % 360 ]; }; const calculateSplitComplementary = (hue)=>{ const comp = calculateComplementary(hue); return [ (comp - 30 + 360) % 360, (comp + 30) % 360 ]; }; const getColorPalette = (hue)=>{ const baseColor = `hsl(${hue}, 100%, 50%)`; let colors = [ baseColor ]; switch(colorScheme){ case "complementary": colors.push(`hsl(${calculateComplementary(hue)}, 100%, 50%)`); break; case "analogous": calculateAnalogous(hue).forEach((h)=>colors.push(`hsl(${h}, 100%, 50%)`)); break; case "triadic": calculateTriadic(hue).forEach((h)=>colors.push(`hsl(${h}, 100%, 50%)`)); break; case "split-complementary": calculateSplitComplementary(hue).forEach((h)=>colors.push(`hsl(${h}, 100%, 50%)`)); break; } setPalette(colors); }; const exportPalette = ()=>{ const hexColors = palette.map((color)=>{ const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 1; canvas.height = 1; ctx.fillStyle = color; ctx.fillRect(0, 0, 1, 1); const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data; return "#" + [ r, g, b ].map((x)=>{ const hex = x.toString(16); return hex.length === 1 ? "0" + hex : hex; }).join(""); }); const text = hexColors.join("\n"); navigator.clipboard.writeText(text); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-center mb-8", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Try our Color Wheel Tool"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md mb-8", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "How to Use"), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal pl-6 space-y-2", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Click anywhere on the color wheel to select your base color"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Choose a color scheme from the dropdown (Single, Complementary, etc.)"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "View your generated color palette below"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, 'Click "Export Hex Codes" to copy the colors to your clipboard'))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-8", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-48 p-2 rounded border", value: colorScheme, onChange: (e)=>setColorScheme(e.target.value), __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "single", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Single Color"), /*#__PURE__*/ React.createElement("option", { value: "complementary", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Complementary"), /*#__PURE__*/ React.createElement("option", { value: "analogous", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "Analogous"), /*#__PURE__*/ React.createElement("option", { value: "triadic", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Triadic"), /*#__PURE__*/ React.createElement("option", { value: "split-complementary", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Split Complementary")), /*#__PURE__*/ React.createElement("div", { className: "flex items-start justify-center gap-8", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[400px] h-[400px]", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-full rounded-full shadow-lg cursor-pointer", style: { background: "conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red)" }, onClick: (e)=>{ handleColorWheelClick(e); const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left - rect.width / 2; const y = e.clientY - rect.top - rect.height / 2; const angle = Math.atan2(y, x); const hue = (angle * 180 / Math.PI + 360) % 360; getColorPalette(hue); }, __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md w-[200px]", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, selectedColor ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[100px] rounded-lg mb-4", style: { backgroundColor: selectedColor }, __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-mono text-sm mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, selectedColor)) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-center", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, "Click the wheel to select a color"))), palette.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, "Color Palette"), /*#__PURE__*/ React.createElement("button", { onClick: exportPalette, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this }, "Export Hex Codes")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, palette.map((color, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex-1", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-20 rounded-lg mb-2", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-mono text-center", __source: { fileName: "", lineNumber: 167, columnNumber: 21 }, __self: this }, color)))))))); }