function StolenPicturesCollection({ color, material, text, images }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-full flex flex-col items-center justify-center bg-no-repeat bg-center bg-cover", style: { backgroundColor: color.toLowerCase() }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: images[0], alt: "Emblem badge", className: "w-[60px] h-[60px] mt-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto mt-2", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, material), /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto mt-2", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, text)); } function StolenPicturesCollectionStory() { const stoleDetails = { color: '#CD212A', material: 'Sewable', text: 'Zayed Alblooshi', images: [ "./emblem-badge.png" ] }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StolenPicturesCollection, { ...stoleDetails, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function VerticallyAlignedContainer({ color, material, text, images }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-full flex flex-col items-center justify-center bg-no-repeat bg-center bg-cover", style: { backgroundColor: color.toLowerCase() }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: images[0], alt: "Emblem badge", className: "w-[60px] h-[60px] mt-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto mt-2", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, material), /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto mt-2", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, text)); } function VerticallyAlignedContainerStory() { const stoleDetails = { color: '#CD212A', material: 'Sewable', text: 'Zayed Ahmad Alblooshi', images: [ "./emblem-badge.png" ] }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StolenPicturesCollection, { ...stoleDetails, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function MainComponent() { const [color, setColor] = React.useState('Red'); const [material, setMaterial] = React.useState('Satin'); const [text, setText] = React.useState(''); const images = [ "./emblem-badge.png" ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto my-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "Design Your Graduation Stole"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-around w-full", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Customization Options"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", htmlFor: "color", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "Choose Color"), /*#__PURE__*/ React.createElement("select", { className: "block w-full mb-4 p-2 border border-gray-300", id: "color", name: "color", value: color, onChange: (e)=>setColor(e.target.value), __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "Red"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "Blue"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "Green"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "Gold"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "White")), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", htmlFor: "material", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Choose Material"), /*#__PURE__*/ React.createElement("select", { className: "block w-full mb-4 p-2 border border-gray-300", id: "material", name: "material", value: material, onChange: (e)=>setMaterial(e.target.value), __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Satin"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Silk"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Polyester")), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", htmlFor: "text", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Enter Text"), /*#__PURE__*/ React.createElement("input", { className: "block w-full mb-4 p-2 border border-gray-300", id: "text", name: "text", type: "text", placeholder: "Your Text Here", value: text, onChange: (e)=>setText(e.target.value), __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Stole Preview"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 p-4 w-full h-[400px] flex items-center justify-center", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(VerticallyAlignedContainer, { color: color, material: material, text: text, images: images, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }))))); }