Refactor CommandK component and update documentation links

pheralb · Mar 29, 2024 · 3677787 · 3677787
1 parent 11fe0bb
commit 3677787
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/src/components/commandK/index.tsx b/src/components/commandK/index.tsx
@@ -12,10 +12,12 @@ import { useEffect, useState } from "react";
 import { Button } from "@/ui/button";
 import { SearchIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { ChangeTheme, Documentation, Pages, SocialPages } from "./items";
 import { useTheme } from "next-themes";
 import { toast } from "sonner";
 
+// Pages:
+import { ChangeTheme, DocumentationPages, Pages, SocialPages } from "./items";
+
 const CommandK = () => {
   const [open, setOpen] = useState<boolean>(false);
   const router = useRouter();
@@ -52,7 +54,7 @@ const CommandK = () => {
   return (
     <>
       <Button variant="ghost" size="icon" onClick={() => setOpen(true)}>
-        <SearchIcon size={20} />
+        <SearchIcon size={20} strokeWidth={1.5} />
         <span className="sr-only">Open Command Search Dialog</span>
       </Button>
       <CommandDialog open={open} onOpenChange={setOpen}>
@@ -74,18 +76,20 @@ const CommandK = () => {
             {ChangeTheme.map((theme) => (
               <CommandItem
                 key={theme.param}
+                value={`Change Theme: ${theme.name}`}
                 onSelect={() => handleChangeTheme(theme.param)}
               >
                 <theme.icon size={22} strokeWidth={1.5} />
                 <span>{theme.name}</span>
               </CommandItem>
             ))}
           </CommandGroup>
-          <CommandGroup heading="Documentation">
-            {Documentation.map((doc) => (
+          <CommandGroup heading="Contribute">
+            {DocumentationPages.map((doc) => (
               <CommandItem
                 key={doc.href}
-                onSelect={() => handleRoutePush(doc.href)}
+                value={`Contribute: ${doc.name}`}
+                onSelect={() => handleExternalRoute(doc.href)}
               >
                 <doc.icon size={22} strokeWidth={1.5} />
                 <span>{doc.name}</span>
@@ -98,7 +102,7 @@ const CommandK = () => {
                 key={page.href}
                 onSelect={() => handleExternalRoute(page.href)}
               >
-                <page.icon width={20} />
+                <page.icon width={14} />
                 <span>{page.name}</span>
               </CommandItem>
             ))}

diff --git a/src/components/commandK/items.ts b/src/components/commandK/items.ts
@@ -1,11 +1,13 @@
 import {
+  HeartHandshakeIcon,
   HomeIcon,
   LayoutDashboardIcon,
   MonitorIcon,
   MoonIcon,
-  RocketIcon,
   SettingsIcon,
+  SproutIcon,
   SunIcon,
+  TelescopeIcon,
 } from "lucide-react";
 import { GithubLogo, XLogo } from "@/components/icons/logos";
 
@@ -27,14 +29,6 @@ export const Pages = [
   },
 ];
 
-export const Documentation = [
-  {
-    name: "Docs: Getting Started",
-    href: "/docs/getting-started",
-    icon: RocketIcon,
-  },
-];
-
 export const ChangeTheme = [
   {
     name: "Light Theme",
@@ -53,6 +47,24 @@ export const ChangeTheme = [
   },
 ];
 
+export const DocumentationPages = [
+  {
+    name: "Getting Started",
+    href: "https://github.com/pheralb/slug?tab=readme-ov-file#-getting-started",
+    icon: SproutIcon,
+  },
+  {
+    name: "Roadmap",
+    href: "https://github.com/pheralb/slug?tab=readme-ov-file#-roadmap",
+    icon: TelescopeIcon,
+  },
+  {
+    name: "Contributing",
+    href: "https://github.com/pheralb/slug?tab=readme-ov-file#%EF%B8%8F-contributing",
+    icon: HeartHandshakeIcon,
+  },
+];
+
 export const SocialPages = [
   {
     name: "X (Formerly Twitter)",