Command thing

src/app/page.tsx

@@ -2,7 +2,7 @@ export default function Home() {
   return (
     <>
       <section id="about" className="min-h-screen">
-        <h1>Hello, I am a </h1>
+        <h1 className="text-2xl">Hello, I am a </h1>
       </section>
     </>
   );

src/components/layout/header.tsx

@@ -30,9 +30,10 @@ const Header = () => (
         <ThemeButton className="w-4 h-4 hidden sm:block" />
         <NavCommand />
         <ul className="flex-row space-x-2 w-fit h-full items-center hidden sm:flex">
-          {NavLinks.map((link) => (
+          {NavLinks.map((link, index) => (
             <li>
               <Link
+                key={index}
                 href={link.href}
                 target={link.href.match("http") ? "_blank" : "_self"}
                 className="flex flex-row items-center"
@@ -42,7 +43,7 @@ const Header = () => (
                   size="icon"
                   className="transition-opacity hover:bg-transparent hover:opacity-75"
                 >
-                  {link.icon}
+                  <link.icon className="h-5 w-5" />
                 </Button>
               </Link>
             </li>

src/components/layout/nav.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useState } from "react";
-
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
@@ -18,17 +16,13 @@ import { GalleryHorizontalEnd, Home, SunMoon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useActionCommand } from "@/hooks/useActionCommand";
 import { useTheme } from "next-themes";
+import NavLinks from "../navlinks";
 
 type NavCommandProps = {
   className?: string;
 };
 
-const NavCommand: React.FC<NavCommandProps> = ({
+const NavCommand: React.FC<NavCommandProps> = ({ className, ...props }) => {
-  className,
-  ...props
-}) => {
-  const [value, setValue] = useState("");
-
   const router = useRouter();
   const { open: actionOpen, setOpen: setActionOpen } = useActionCommand();
   const { theme, setTheme } = useTheme();
@@ -61,12 +55,7 @@ const NavCommand: React.FC<NavCommandProps> = ({
       </Button>
 
       <CommandDialog open={actionOpen} onOpenChange={setActionOpen}>
-        <CommandInput
+        <CommandInput placeholder="Type a command or search..." />
-          placeholder="Type a command or search..."
-          onValueChange={(search) => {
-            setValue(search);
-          }}
-        />
         <CommandList>
           <CommandGroup heading="Navigation">
             <CommandItem
@@ -102,6 +91,20 @@ const NavCommand: React.FC<NavCommandProps> = ({
               <CommandShortcut>⌘L</CommandShortcut>
             </CommandItem>
           </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="External links">
+            {NavLinks.map((link) => (
+              <CommandItem
+                key={link.href}
+                onSelect={action(() => {
+                  router.push(link.href);
+                })}
+              >
+                <link.icon className="mr-2 w-4 h-4" />
+                <span>{link.label}</span>
+              </CommandItem>
+            ))}
+          </CommandGroup>
         </CommandList>
       </CommandDialog>
     </>

src/components/navlinks.tsx

@@ -6,27 +6,25 @@ import { FaXTwitter } from "react-icons/fa6";
 
 type NavLink = {
   label: string;
-  icon: React.ReactNode;
+  icon: React.FC<{ className?: string }>;
   href: string;
 };
 
-const IconClassname = "w-5 h-5";
-
 const NavLinks: NavLink[] = [
   {
     label: "GitHub",
     href: "https://github.com/almqv",
-    icon: <GitHub className={IconClassname} />,
+    icon: GitHub,
   },
   {
     label: "LinkedIn",
     href: "https://www.linkedin.com/in/almqv/",
-    icon: <LinkedInLogoIcon className={IconClassname} />,
+    icon: LinkedInLogoIcon,
   },
   {
     label: "X",
     href: "https://x.com/fcvprzhfgsybj",
-    icon: <FaXTwitter className={IconClassname} />,
+    icon: FaXTwitter,
   },
 ];