Implement simple theme toggle component

1 files changed, 30 insertions, 0 deletions

diff --git a/src/components/theme-switcher.js b/src/components/theme-switcher.js
new file mode 100644
index 0000000..a24e634
--- /dev/null
+++ b/src/components/theme-switcher.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { css } from '@emotion/core'
+
+const buttonStyle = ({ margins, colours, radius }) => css`
+  border: none;
+  background: none;
+  margin: ${margins.sm}px;
+  font-size: 1.3em;
+`
+
+export const ThemeSwitcher = ({ themes, onClick, currentTheme }) => {
+  const nextTheme = themes.find(theme => theme.key !== currentTheme)
+  return (
+    <div
+      css={css`
+        top: 0;
+        right: 0;
+        position: absolute;
+      `}
+    >
+      <button
+        css={buttonStyle}
+        key={nextTheme}
+        onClick={e => onClick(nextTheme.key)}
+      >
+        {nextTheme.name}
+      </button>
+    </div>
+  )
+}