Add project base

components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,26 +1,28 @@
-import { ActionIcon, Group, useMantineColorScheme } from '@mantine/core';
-import { SunIcon, MoonIcon } from '@modulz/radix-icons';
+import { ActionIcon, useMantineColorScheme } from '@mantine/core';
+import { Sun, MoonStars } from 'tabler-icons-react';
+import { motion } from 'framer-motion';
 
 export function ColorSchemeToggle() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <Group position="center" mt="xl">
+    <motion.div
+      whileHover={{ scale: 1.2, rotate: 90 }}
+      whileTap={{
+        scale: 0.8,
+        rotate: -90,
+        borderRadius: '100%',
+      }}
+    >
       <ActionIcon
         onClick={() => toggleColorScheme()}
         size="xl"
         sx={(theme) => ({
-          backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
           color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
         })}
       >
-        {colorScheme === 'dark' ? (
-          <SunIcon width={20} height={20} />
-        ) : (
-          <MoonIcon width={20} height={20} />
-        )}
+        {colorScheme === 'dark' ? <Sun size={24} /> : <MoonStars size={24} />}
       </ActionIcon>
-    </Group>
+    </motion.div>
   );
 }