From 596340f811d144fcef3237003ac84798614bc3b4 Mon Sep 17 00:00:00 2001
From: Michal Sapka <michal@sapka.me>
Date: Tue, 6 Sep 2022 22:42:59 +0200
Subject: feat: theme switcher button

---
 components/toggle_theme_button.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 components/toggle_theme_button.tsx

(limited to 'components/toggle_theme_button.tsx')

diff --git a/components/toggle_theme_button.tsx b/components/toggle_theme_button.tsx
new file mode 100644
index 0000000..de16397
--- /dev/null
+++ b/components/toggle_theme_button.tsx
@@ -0,0 +1,28 @@
+import { AnimatePresence, motion } from 'framer-motion'
+import { IconButton, useColorMode, useColorModeValue } from '@chakra-ui/react'
+import { BsFillSunFill, BsMoonFill } from "react-icons/bs";
+const ThemeToggleButton = () => {
+  const { toggleColorMode } = useColorMode()
+
+  return (
+    <AnimatePresence exitBeforeEnter initial={false}>
+      <motion.div
+        style={{ display: 'inline-block' }}
+        key={useColorModeValue('light', 'dark')}
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        exit={{ y: 20, opacity: 0 }}
+        transition={{ duration: 0.2 }}
+      >
+        <IconButton
+          aria-label="Toggle theme"
+          colorScheme={useColorModeValue('purple', 'orange')}
+          icon={useColorModeValue(<BsMoonFill />, <BsFillSunFill />)}
+          onClick={toggleColorMode}
+        ></IconButton>
+      </motion.div>
+    </AnimatePresence>
+  )
+}
+
+export default ThemeToggleButton
-- 
cgit v1.2.3