30:T54f,// radio = ({ name, label, options, value, ...props }) => ({ // state, // setState // }) => { // useEffect(() => { // setState({ ...state, [name]: value || options[0] }); // }, [value]); // return jsx` //

// ${label || name} //

// ${options.map( // ( // value, // index // ) => jsx` // // setState({ ...state, [name]: value })} checked=${value === // state[name]} ...${props}/> // ${value} // ` // )} //

`; // } radio = ({ name, label, options, value, state, setState, ...props }) => { return jsx`

${label || name}

${options.map( ( value, index ) => jsx` setState({ ...state, [name]: value })} checked=${value === state[name]} ...${props}/> ${value} ` )}

`; }31:T41e,// input = ({ name, label, placeholder, value, ...props }) => ({ // state, // setState // }) => { // useEffect(() => { // setState({ ...state, [name]: value || '' }); // }, [value]); // return jsx` // // ${label || name} // { // setState({ ...state, [name]: event.target.value }); // }} // value=${state[name]} ...${props} /> // `; // } input = ({ name, label, placeholder, value, state, setState, ...props }) => { return jsx` ${label || name} { setState({ ...state, [name]: event.target.value }); }} value=${state[name]} ...${props} /> `; }32:[] 2e:{"title":"Tailwind Components","cells":[{"id":0,"value":"md`# Tailwind Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`## Demo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof test = render(({ useSetter }) => {\n const [state, setState] = useState({\n title: '',\n type: 'Percentage',\n amount: 0.1,\n limit: 'None'\n });\n useSetter(state);\n return form(null, [\n input({\n name: 'title',\n label: 'Discount code',\n placeholder: 'FIRSTNAMELASTNAME',\n state,\n setState\n }),\n radio({\n name: 'type',\n label: 'Discount type',\n options: ['Percentage', 'Fixed'],\n value: 'Percentage',\n state,\n setState\n }),\n input({\n name: 'amount',\n label: 'Amount',\n placeholder: 0.1,\n value: 0.1,\n type: 'number',\n state,\n setState\n }),\n radio({\n name: 'limit',\n label: 'Usage limit',\n options: ['None', '1'],\n value: 'None',\n state,\n setState\n }),\n button({\n label: 'Create',\n onClick: () => {\n console.log(state);\n },\n disabled: !state.title || state.title === ''\n })\n ]);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"test","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"// viewof test = form(null, [\n// input({\n// name: 'title',\n// label: 'Discount code',\n// placeholder: 'FIRSTNAMELASTNAME'\n// }),\n// radio({\n// name: 'type',\n// label: 'Discount type',\n// options: ['Percentage', 'Fixed'],\n// value: 'Percentage'\n// }),\n// input({\n// name: 'amount',\n// label: 'Amount',\n// placeholder: 0.1,\n// value: 0.1,\n// type: 'number'\n// }),\n// radio({\n// name: 'limit',\n// label: 'Usage limit',\n// options: ['None', '1', '2', '3', '4'],\n// value: 'None'\n// }),\n// button(state => ({\n// label: 'Create',\n// onClick: () => {\n// console.log(state);\n// },\n// disabled: !state.title || state.title === ''\n// }))\n// ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`## Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"// button = arg => ({ state, setState }) => {\n// if (typeof arg === 'function') {\n// return jsx`\n//

\n// \n//

`;\n// }\n// const { name, label, ...props } = arg;\n// return jsx`\n//

\n// \n//

`;\n// }\nbutton = ({ state, setState, ...props }) => {\n return jsx`\n

\n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"// form = (props = {}, children) =>\n// render(({ useSetter }) => {\n// const [state, setState] = useState({});\n// useSetter(state);\n// return jsx`\n//

\n// ${children.map(\n// (child, key) => jsx`<${child} ...${{ state, setState, key }} />`\n// )}\n//

\n// `;\n// })\nform = (props, children) => jsx`\n

\n ${children}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`## Thanks\n\nThanks to https://observablehq.com/@hastebrot/hello-tailwind-css for providing a convenient way to scope Tailwind CSS in Observable 🙏`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"styles","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { render, useState, useEffect, jsx } from '@j-f1/react'","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { tailwindStyles as styles } from '@hastebrot/hello-tailwind-css'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}