Themes: init

src/components/FileSelector.js

@@ -1,10 +1,10 @@
 import { h } from 'preact'
 
-export default function ({ emitName, emitURL }) {
+export default function ({ setTargetName, setTargetUrl }) {
   const fileInputHandler = ({ target }) => {
     const file = target.files[0]
-    emitName(file.name)
-    emitURL(`${URL.createObjectURL(file)}#${file.name}`)
+    setTargetName(file.name)
+    setTargetUrl(`${URL.createObjectURL(file)}#${file.name}`)
     target.value = null
   }
 

src/components/ThemeSelector.js

@@ -0,0 +1,15 @@
+import { h } from 'preact'
+
+export default function ({ themeList, currentTheme, setTheme }) {
+  const options = themeList.map(theme => (
+    <option value={theme}>
+      {theme}
+    </option>))
+
+  return (
+    <select
+      value={currentTheme}
+      onChange={({ target }) => setTheme(target.value)}>
+      {options}
+    </select>)
+}

src/components/URLSelector.js

@@ -1,16 +1,16 @@
 import { h } from 'preact'
 
-export default function ({ emitName, emitURL }) {
-  const reURL = /^(http|https):\/\/[^ "]+$/
+export default function ({ setTargetName, setTargetUrl }) {
+  const urlRE = /^(http|https):\/\/[^ "]+$/
 
   const emit = url => {
-    emitName(url)
-    emitURL(url)
+    setTargetName(url)
+    setTargetUrl(url)
   }
 
   const urlInputHandler = ({ target }) => {
     const url = target.value
-    emit(reURL.test(url)
+    emit(urlRE.test(url)
       ? url
       : null)
   }