feat: theme switcher button

1 files changed, 28 insertions, 0 deletions

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