From 2df5496b463a0dfd5e3e97f1b32a40e5f4bba198 Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Thu, 2 Jan 2025 20:59:42 +0000
Subject: [PATCH] fix: add theme icon to index page

---
 src/components/home/ThemeIcon.tsx | 31 +++++++++++++++++++++++++++++++
 src/pages/IndexPage.tsx           |  9 ++++++---
 2 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 src/components/home/ThemeIcon.tsx

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 <SunIcon size={30} />;
+			case "dark":
+				return <MoonIcon size={30} />;
+			case "system":
+				return <SunMoonIcon size={30} />;
+		}
+	};
+
+	return (
+		<button onClick={onClick} title={theme} className="text-white">
+			{getIcon()}
+		</button>
+	);
+}
+
+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() {
 			<header className="w-full flex justify-evenly p-8">
 				<BlockmaticLogo className="h-16 w-max" fill={"white"} />
 
-				<div className="flex items-center gap-8">
-					<Button variant="link" asChild>
+				<div className="flex items-center gap-2">
+					<Button className="bg-white text-black hover:bg-zinc-50/90 mr-4" asChild>
 						<Link to={{ pathname: "/app" }}>Go to app</Link>
 					</Button>
-					<a href="https://github.com/trafficlunar/blockmatic" className="w-6">
+
+					<a href="https://github.com/trafficlunar/blockmatic" className="w-8">
 						<GithubIcon fill="white" />
 					</a>
+					<ThemeIcon />
 				</div>
 			</header>