feat: add hotkeys for get-started & theme-toggle

Author: pheralb

apps/website/src/components/get-started-link.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useHotkeys } from "react-hotkeys-hook";
+
+import { ChevronRightIcon } from "lucide-react";
+import { buttonVariants } from "@/components/ui/button";
+
+const GetStartedLink = () => {
+  const navigate = useRouter();
+  useHotkeys("c", () => navigate.push("/docs"));
+  return (
+    <Link
+      href="/docs/getting-started/prerequisites"
+      className={buttonVariants({
+        size: "default",
+        className: "group w-full md:w-auto",
+      })}
+    >
+      <span>Get Started</span>
+      <span className="rounded-sm bg-neutral-600/60 px-0.5 font-mono text-neutral-300 dark:bg-neutral-700/60">
+        c
+      </span>
+      <ChevronRightIcon
+        size={16}
+        className="transition-transform group-hover:translate-x-0.5"
+      />
+    </Link>
+  );
+};
+
+export default GetStartedLink;

apps/website/src/components/hero.tsx

@@ -1,11 +1,11 @@
-import Link from "next/link";
-import { ArrowUpRightIcon, ChevronRightIcon } from "lucide-react";
+import { ArrowUpRightIcon } from "lucide-react";
 
 import { cn } from "@/utils/cn";
 import { globals } from "@/globals";
 
 import { GitHub } from "@/components/ui/svgs/github";
 import { buttonVariants } from "@/components/ui/button";
+import GetStartedLink from "@/components/get-started-link";
 import { ExternalLink } from "@/components/ui/external-link";
 
 const Hero = () => {
@@ -32,19 +32,7 @@ const Hero = () => {
           "animate-in fill-mode-backwards fade-in slide-in-from-bottom-4 delay-100 duration-500",
         )}
       >
-        <Link
-          href="/docs/getting-started/prerequisites"
-          className={buttonVariants({
-            size: "default",
-            className: "group w-full md:w-auto",
-          })}
-        >
-          <span>Get Started</span>
-          <ChevronRightIcon
-            size={16}
-            className="transition-transform group-hover:translate-x-0.5"
-          />
-        </Link>
+        <GetStartedLink />
         <ExternalLink
           title="View on GitHub"
           href={globals.githubUrl}

apps/website/src/components/theme-toggle.tsx

@@ -10,12 +10,17 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { buttonVariants } from "@/components/ui/button";
+import { useHotkeys } from "react-hotkeys-hook";
 
 const ThemeToggle = () => {
   const { setTheme } = useTheme();
+  useHotkeys("t", () =>
+    setTheme((prev) => (prev === "light" ? "dark" : "light")),
+  );
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
+        title="Toggle theme (t)"
         className={buttonVariants({ variant: "ghost", size: "icon" })}
       >
         <SunIcon
@@ -26,7 +31,7 @@ const ThemeToggle = () => {
           size={20}
           className="absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
         />
-        <span className="sr-only">Toggle theme</span>
+        <span className="sr-only">Toggle theme (t)</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => setTheme("light")}>