function CircularElementsDisplay({ items }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-row flex-wrap justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-[150px] h-[150px] bg-[${item.bgColor}] border-4 border-[${item.borderColor}] m-2 rounded-full flex items-center justify-center`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-[${item.textColor}] text-lg font-crimson-text`, __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, item.number)))); } function CircularElementsDisplayStory() { const items = [ { bgColor: "#fde9df", borderColor: "#e2af71", textColor: "#b7573a", number: 1 }, { bgColor: "#eaab89", borderColor: "#ae6323", textColor: "#935932", number: 2 }, { bgColor: "#9e8b58", borderColor: "#d9d8d1", textColor: "#f3f3f1", number: 3 }, { bgColor: "#b76459", borderColor: "#912f24", textColor: "#45221c", number: 4 }, { bgColor: "#6c7b8c", borderColor: "#b6b7ac", textColor: "#d6dccd", number: 5 } ]; return /*#__PURE__*/ React.createElement(CircularElementsDisplay, { items: items, __source: { fileName: "", lineNumber: 25, columnNumber: 10 }, __self: this }); } function CircularElementDesign({ number }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[150px] h-[150px] bg-[#eaab89] border-4 border-[#ae6323] m-2 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#935932] text-lg font-crimson-text", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, number)); } function CircularElementDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CircularElementDesign, { number: 2, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CircularElementDesign, { number: 5, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CircularElementDesign, { number: 8, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function MainComponent() { const palette = [ { bgColor: "#faefe8", borderColor: "#deb371", textColor: "#b8542d", number: 1 }, { bgColor: "#ec9a71", borderColor: "#a96518", textColor: "#692f16", number: 2 }, { bgColor: "#c46751", borderColor: "#8a3b1a", textColor: "#3b190d", number: 3 }, { bgColor: "#877b54", borderColor: "#64593b", textColor: "#fbf8ef", number: 4 }, { bgColor: "#ac4840", borderColor: "#7c2924", textColor: "#fae5da", number: 5 }, { bgColor: "#6b7d99", borderColor: "#8e9bb3", textColor: "#e4eef3", number: 6 }, { bgColor: "#8b2727", borderColor: "#641b1b", textColor: "#ffefed", number: 7 }, { bgColor: "#e4e3dc", borderColor: "#c8c6bd", textColor: "#6d6657", number: 8 } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#faefe8]", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-[#8b2727] text-4xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Aniversário de 1 Ano de Maria Luiza"), /*#__PURE__*/ React.createElement("h2", { className: "text-center text-[#8b2727] text-2xl font-crimson-text mb-6", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Tema: Meus Primeiros 365 Laços"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(CircularElementsDisplay, { items: palette, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(CircularElementDesign, { number: 1, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(CircularElementDesign, { number: 2, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(CircularElementDesign, { number: 3, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }))); }