diff --git a/src/components/home/ThemeIcon.tsx b/src/components/home/ThemeIcon.tsx new file mode 100644 index 0000000..1b5710f --- /dev/null +++ b/src/components/home/ThemeIcon.tsx @@ -0,0 +1,31 @@ +import { useContext } from "react"; +import { ThemeContext } from "@/context/Theme"; +import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react"; + +function ThemeIcon() { + const { theme, setTheme } = useContext(ThemeContext); + + const onClick = () => { + const nextTheme = theme === "light" ? "dark" : theme === "dark" ? "system" : "light"; + setTheme(nextTheme); + }; + + const getIcon = () => { + switch (theme) { + case "light": + return ; + case "dark": + return ; + case "system": + return ; + } + }; + + return ( + + ); +} + +export default ThemeIcon; diff --git a/src/pages/IndexPage.tsx b/src/pages/IndexPage.tsx index ccdb44c..f175dbc 100644 --- a/src/pages/IndexPage.tsx +++ b/src/pages/IndexPage.tsx @@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button"; import BlockmaticLogo from "@/assets/blockmatic.svg?react"; import GithubIcon from "@/assets/github.svg?react"; +import ThemeIcon from "@/components/home/ThemeIcon"; import AppPreview from "@/components/home/AppPreview"; import ImageComparison from "@/components/home/ImageComparison"; @@ -15,13 +16,15 @@ function IndexPage() {
-
- - + + +