GBS-33 | feat: kmenu integration

package.json

@@ -34,6 +34,7 @@
     "axios": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "kmenu": "^2.0.0",
     "lucide-react": "^0.376.0",
     "next": "^13.5.6",
     "next-auth": "^4.23.2",

src/app/layout.tsx

@@ -1,3 +1,5 @@
+import "@/styles/variables/kmenu.css";
+import "kmenu/dist/cmdk.css";
 import "./globals.css";
 
 import type { Metadata } from "next";

src/app/provider.tsx

@@ -1,3 +1,7 @@
+"use client";
+import { MenuProvider } from "kmenu";
+
+import CommandPalette from "@/components/layout/header/command-palette";
 import AuthProvider from "@/providers/auth-provider";
 import ReactQueryProvider from "@/providers/react-query-provider";
 
@@ -8,7 +12,12 @@ interface Properties {
 export default function Providers({ children }: Properties): JSX.Element {
   return (
     <AuthProvider>
-      <ReactQueryProvider>{children}</ReactQueryProvider>
+      <MenuProvider>
+        <ReactQueryProvider>
+          {children}
+          <CommandPalette />
+        </ReactQueryProvider>
+      </MenuProvider>
     </AuthProvider>
   );
 }

src/components/layout/header/command-palette.tsx

@@ -0,0 +1,101 @@
+"use client";
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import {
+  type Command,
+  CommandMenu,
+  CommandWrapper,
+  type InnerCommand,
+  useCommands,
+  useKmenu,
+} from "kmenu";
+import { Github, Instagram, Search, Twitter, Youtube } from "lucide-react";
+import { type FC, useState } from "react";
+
+import { defaultPostsConstants } from "../../../constants/post.constants.ts";
+
+const CommandPalette: FC = () => {
+  const [postSearchResults, setPostSearchResults] = useState<InnerCommand[]>(
+    [],
+  );
+  const { setOpen, open } = useKmenu();
+
+  const getPostsWithQuery = (query?: string): InnerCommand[] => {
+
+    const filteredPosts = defaultPostsConstants.filter(
+      (defaultPostsConstant) =>
+        defaultPostsConstant.header
+          .toLowerCase()
+          .includes(query?.toLowerCase() ?? "") ||
+        defaultPostsConstant.content
+          .toLowerCase()
+          .includes(query?.toLowerCase() ?? ""),
+    );
+    const commands = filteredPosts.map((post) => ({
+      icon: <Search />,
+      text: post.header,
+      perform: () => {
+        // handleSearch(post.header);
+      },
+    }));
+    setPostSearchResults(commands);
+    return commands;
+  };
+
+  const main: Command[] = [
+    {
+      category: "Search",
+      commands: [
+        {
+          icon: <Search />,
+          text: "Search",
+          perform: () => {
+            setOpen(2);
+          },
+        },
+      ],
+    },
+    {
+      category: "Social",
+      commands: [
+        {
+          icon: <Twitter />,
+          text: "Twitter",
+          perform: () => window.open('https://x.com/gelecekbilimde', '_blank'),
+        },
+        {
+          icon: <Instagram />,
+          text: "Instagram",
+          perform: () => window.open('https://www.instagram.com/gelecekbilimde/', '_blank'),
+        },
+        {
+          icon: <Youtube />,
+          text: "Youtube",
+          perform: () => window.open('https://www.youtube.com/gelecekbilimde', '_blank'),
+        },
+      ],
+    },
+  ];
+
+  const posts: Command[] = [
+    {
+      category: "Posts",
+      commands: postSearchResults,
+    },
+  ];
+
+  const [mainCommands] = useCommands(main);
+  const [postsCommands] = useCommands(posts);
+
+  return (
+    <CommandWrapper>
+      <CommandMenu commands={mainCommands} crumbs={["Home"]} index={open} />
+      <CommandMenu
+        commands={postsCommands}
+        crumbs={["Home", "Posts"]}
+        index={2}
+      />
+    </CommandWrapper>
+  );
+};
+
+export default CommandPalette;

src/components/layout/header/index.tsx

@@ -2,6 +2,7 @@
 
 import "react-modern-drawer/dist/index.css";
 
+import { useKmenu } from "kmenu";
 import { MenuIcon, SearchIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";