"use client"; function MainComponent({ markdown }) { const [textInput, setTextInput] = useState(""); const [checkboxInput, setCheckboxInput] = useState(false); const [dropdownInput, setDropdownInput] = useState(""); const handleSubmit = (event)=>{ event.preventDefault(); console.log("Form submitted:", textInput, checkboxInput, dropdownInput); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#121212] text-white", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#a0aec0]", title: "Enter some text here", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Text Input:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "textInput", value: textInput, onChange: (event)=>setTextInput(event.target.value), className: "w-full p-2 bg-[#2d3748] text-white border border-[#4a5568] rounded", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#a0aec0]", title: "Check the box if you agree", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Checkbox:"), /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center mt-2", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "checkboxInput", checked: checkboxInput, onChange: (event)=>setCheckboxInput(event.target.checked), className: "form-checkbox h-5 w-5 text-[#4299e1] bg-[#2d3748] border-[#4a5568] rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-[#cbd5e0]", title: "A checkbox option", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Check me out"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#a0aec0]", title: "Choose an option from the dropdown", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Dropdown:"), /*#__PURE__*/ React.createElement("select", { name: "dropdownInput", value: dropdownInput, onChange: (event)=>setDropdownInput(event.target.value), className: "w-full p-2 mt-2 bg-[#2d3748] text-white border border-[#4a5568] rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", className: "text-black", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Select an option"), /*#__PURE__*/ React.createElement("option", { value: "option1", className: "text-black", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Option 1"), /*#__PURE__*/ React.createElement("option", { value: "option2", className: "text-black", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Option 2"), /*#__PURE__*/ React.createElement("option", { value: "option3", className: "text-black", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Option 3"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4299e1] text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Submit"))); } function StoryComponent() { const exampleMarkdown = `# Hello there ### Who are you? **I'm an AI Assistant** [Click here](https://example.com) to visit an example site. * Lists * [ ] Task to do * [x] Task done A table: | Column 1 | Column 2 | | -------- | -------- | | Item 1 | Item 2 | `; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { markdown: exampleMarkdown, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this })); } function handler({}) { return; }