richytong / arche Goto Github PK

    H1('Compare Values'),
    Div([
      DocsEq(props),
      DocsGt(props),
      DocsLt(props),
      DocsGte(props),
      DocsLte(props),
    ]),

    H1('Compare Values'),
    Div([Arche.all([
      DocsEq,
      DocsGt,
      DocsLt,
      DocsGte,
      DocsLte,
   ])(props)]))

    H1('Compare Values'),
    Div.all([DocsEq, DocsGt, DocsLt, DocsGte, DocsLte])(props),

    Div([DocsEq, DocsGt, DocsLt, DocsGte, DocsLte])(props),

const { useState, useEffect, useReducer, createContext, useContext } = React
const ReactElement = Arche(React)
const {
  A, P, B, Q, I, Ul, Ol, Li,
  H1, H2, H3, H4, H5, H6, Hr, Br,
  Script, Html, Body, Nav, Section, Footer, Span, Div, Img, Video,
  Form, Fieldset, Input, Label, Textarea, Select, Option,
  Button, Iframe, Blockquote, Code, Pre,
} = ReactElement

const themes = ['light', 'dark', 'pink']

// error: not a function
const ThemeContext = React.createContext({
  theme: themes[0],
  changeTheme: () => {},
})

const ThemeSwitcher = () => {
  const { theme, changeTheme } = React.useContext(ThemeContext)

  const handleThemeChange = (e) => {
    changeTheme(e.target.value)
  }

  return Div({ class: 'themeSwitcher', id: '' }, [
    P('Select theme:'),
    Select(
      {
        value: theme,
        onChange(e) {
          handleThemeChange(e)
        },
      },
      [
        themes.map((themeOption) => {
          return Option({ value: themeOption, key: themeOption }, themeOption)
        }),
      ]
    ),
  ])
}

const Article = () => {
  const { theme } = React.useContext(ThemeContext)

  return Div({ class: `article ${theme}`, id: '' }, [
    H2({ class: '', id: '' }, 'Fun facts about sloths'),
    P(`Sloths are tropical mammals that live in Central and South America.`),
    P(`There are six species of sloth`),
  ])
}

// how do I do ThemeContext.Provider?
const ArticleWrapper = () => {
  const [theme, setTheme] = React.useState(themes[0])

  return ThemeContext({}, [ThemeSwitcher(), Article()])
}

export default ArticleWrapper