feat(visualizer): create theme toggler

Create theme toggler

Author: BOCOVO

packages/json-table-schema-visualizer/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "eventemitter3": "^5.0.1",
     "konva": "^9.3.6",
+    "lucide-react": "^0.365.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-konva": "^18.2.10",

packages/json-table-schema-visualizer/src/components/ThemeToggler/ThemeToggler.stories.tsx

@@ -0,0 +1,23 @@
+import ThemeToggler from "./ThemeToggler";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Theme } from "@/types/theme";
+
+const meta: Meta = {
+  component: ThemeToggler,
+  title: "components/ThemeToggler",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ThemeToggler>;
+
+export const TableStory: Story = {
+  render: () => (
+    <div>
+      <ThemeToggler />
+    </div>
+  ),
+  args: { theme: Theme.dark },
+};

packages/json-table-schema-visualizer/src/components/ThemeToggler/ThemeToggler.tsx

@@ -0,0 +1,29 @@
+import { Moon, Sun } from "lucide-react";
+
+import { Theme } from "@/types/theme";
+import { useThemeContext } from "@/hooks/theme";
+
+const ThemeToggler = () => {
+  const { setTheme, theme } = useThemeContext();
+
+  const handleThemeToggle = () => {
+    setTheme(Theme.light === theme ? Theme.dark : Theme.light);
+  };
+
+  return (
+    <button
+      onClick={handleThemeToggle}
+      aria-label="Change theme mode"
+      title="Change theme mode"
+      className="w-10 p-2 border rounded-lg shadow-lg dark:border-gray-300 active:scale-95 group hover:bg-gray-100 dark:hover:bg-gray-900 bg-gray-50 dark:bg-black"
+    >
+      <div className="cursor-pointer">
+        <Sun className="text-gray-600 dark:hidden group-hover:text-black dark:text-gray-300 group-hover:dark:text-white" />
+
+        <Moon className="hidden text-gray-600 dark:block group-hover:text-black dark:text-gray-300 group-hover:dark:text-white" />
+      </div>
+    </button>
+  );
+};
+
+export default ThemeToggler;