chore(react-sample): add home navigation

condorheroblog · Jan 5, 2024 · b9a6e9b · b9a6e9b
1 parent 8157b43
commit b9a6e9b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/packages/playground/react-sample/src/components/switch-appearance/index.tsx b/packages/playground/react-sample/src/components/switch-appearance/index.tsx
@@ -5,7 +5,7 @@ export function SwitchAppearance() {
 
 	return (
 		<button
-			className="cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md max-md:px-2 px-4"
+			className="cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md max-md:px-1 px-3"
 			onClick={() => changeMode(!mode)}
 		>
 			{mode ? (

diff --git a/packages/playground/react-sample/src/components/the-head/index.tsx b/packages/playground/react-sample/src/components/the-head/index.tsx
@@ -1,9 +1,12 @@
+import { useNavigate } from "react-router-dom";
+
 import { version } from "#/package.json";
 import { SwitchAppearance } from "#src/components";
 
 export function TheHead() {
+	const navigate = useNavigate();
 	return (
-		<header className="flex gap-4 py-4 pl-10 max-md:pl-3">
+		<header className="flex justify-between py-4 pl-10 max-md:pl-3">
 			<h1 className="max-md:text-lg text-3xl font-extraligh opacity-80">
 				<sup className="max-md:hidden">
 					<img src="https://img.shields.io/badge/-:green?logo=github" alt="GitHub" className="inline pr-2" />
@@ -14,7 +17,32 @@ export function TheHead() {
 				<sup className="opacity-50">v{version}</sup>
 			</h1>
 
-			<SwitchAppearance />
+			<div className="flex">
+				<SwitchAppearance />
+				<button
+					onClick={() => navigate("/")}
+					className="flex items-center cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md max-md:px-1 px-3 mr-4 max-md:mr-2"
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512">
+						<path
+							fill="none"
+							stroke="currentColor"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth="32"
+							d="M80 212v236a16 16 0 0 0 16 16h96V328a24 24 0 0 1 24-24h80a24 24 0 0 1 24 24v136h96a16 16 0 0 0 16-16V212"
+						/>
+						<path
+							fill="none"
+							stroke="currentColor"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth="32"
+							d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256m368-77V64h-48v69"
+						/>
+					</svg>
+				</button>
+			</div>
 		</header>
 	);
 }