Merge pull request #9 from pheralb/next

🚀 v2.1.3
pheralb · Dec 26, 2022 · 14a0d41 · 14a0d41 · vercel · Dec 26, 2022
2 parents aa6709f + 5514960
commit 14a0d41
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -12,46 +12,46 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
-    "@headlessui/react": "1.7.4",
+    "@headlessui/react": "1.7.7",
     "@next-auth/prisma-adapter": "1.0.5",
-    "@prisma/client": "4.6.1",
-    "@tanstack/react-query": "4.16.1",
-    "@trpc/client": "10.1.0",
-    "@trpc/next": "10.1.0",
-    "@trpc/react-query": "10.1.0",
-    "@trpc/server": "10.1.0",
+    "@prisma/client": "4.8.0",
+    "@tanstack/react-query": "4.20.4",
+    "@trpc/client": "10.7.0",
+    "@trpc/next": "10.7.0",
+    "@trpc/react-query": "10.7.0",
+    "@trpc/server": "10.7.0",
     "@uiball/loaders": "1.2.6",
-    "@vercel/analytics": "0.1.5",
-    "framer-motion": "7.6.10",
+    "@vercel/analytics": "0.1.6",
+    "framer-motion": "8.0.2",
     "nanoid": "4.0.0",
-    "next": "13.0.5",
-    "next-auth": "4.17.0",
-    "next-seo": "5.14.1",
+    "next": "13.1.1",
+    "next-auth": "4.18.7",
+    "next-seo": "5.15.0",
     "nextjs-progressbar": "0.0.16",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.39.5",
+    "react-hook-form": "7.41.1",
     "react-hot-toast": "2.4.0",
-    "react-icons": "4.6.0",
-    "superjson": "1.11.0",
-    "superkey": "0.1.0-rc.9",
-    "zod": "3.19.1"
+    "react-icons": "4.7.1",
+    "superjson": "1.12.1",
+    "superkey": "0.1.3",
+    "zod": "3.20.2"
   },
   "devDependencies": {
-    "@types/node": "18.11.9",
-    "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.9",
-    "@typescript-eslint/eslint-plugin": "5.44.0",
-    "@typescript-eslint/parser": "5.44.0",
+    "@types/node": "18.11.17",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@typescript-eslint/eslint-plugin": "5.47.1",
+    "@typescript-eslint/parser": "5.47.1",
     "autoprefixer": "10.4.13",
-    "eslint": "8.28.0",
-    "eslint-config-next": "13.0.5",
-    "postcss": "8.4.19",
-    "prettier": "2.8.0",
-    "prettier-plugin-tailwindcss": "0.1.13",
-    "prisma": "4.6.1",
+    "eslint": "8.30.0",
+    "eslint-config-next": "13.1.1",
+    "postcss": "8.4.20",
+    "prettier": "2.8.1",
+    "prettier-plugin-tailwindcss": "0.2.1",
+    "prisma": "4.8.0",
     "tailwindcss": "3.2.4",
-    "typescript": "4.9.3"
+    "typescript": "4.9.4"
   },
   "ct3aMetadata": {
     "initVersion": "6.10.2"

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -1,12 +1,10 @@
 generator client {
-    provider        = "prisma-client-js"
-    previewFeatures = ["referentialIntegrity"]
+    provider = "prisma-client-js"
 }
 
 datasource db {
-    provider             = "mysql"
-    url                  = env("DATABASE_URL")
-    referentialIntegrity = "prisma"
+    provider = "mysql"
+    url      = env("DATABASE_URL")
 }
 
 model link {

diff --git a/src/components/command/index.tsx b/src/components/command/index.tsx
@@ -1,64 +1,102 @@
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { BiCommand, BiPlus } from "react-icons/bi";
+import { useState, useEffect } from "react";
+import { BiBox, BiCommand, BiMessageSquareEdit, BiPlus } from "react-icons/bi";
+import { BsGithub, BsTwitter } from "react-icons/bs";
 import { Command, CommandInput, CommandList, CommandOption } from "superkey";
 
 const data = [
   {
     id: 1,
     name: "Create new link",
-    description: "Description 1",
     href: "/dash/create",
     icon: <BiPlus />,
   },
   {
     id: 2,
-    name: "My links",
-    description: "",
-    href: "/dash/create",
-    icon: <BiPlus />,
-  }
+    name: "Dashboard",
+    href: "/dash",
+    icon: <BiBox />,
+  },
+  {
+    id: 3,
+    name: "Report a bug",
+    href: "https://github.com/pheralb/slug/issues/new",
+    icon: <BiMessageSquareEdit />,
+  },
+  {
+    id: 4,
+    name: "Repository",
+    href: "https://github.com/pheralb/slug",
+    icon: <BsGithub />,
+  },
+  {
+    id: 5,
+    name: "Twitter",
+    href: "https://twitter.com/pheralb_",
+    icon: <BsTwitter />,
+  },
 ];
 
 const CommandMenu = () => {
   const [value, setValue] = useState("");
   const [open, setOpen] = useState(false);
   const router = useRouter();
 
-  const filteredData = value
-    ? data.filter((example) =>
-        example.name.toLowerCase().includes(value.toLowerCase())
-      )
-    : data;
+  useEffect(() => {
+    function handleKeyDown(event?: KeyboardEvent) {
+      if (event?.key === "k" && (event?.metaKey || event?.ctrlKey)) {
+        event?.preventDefault();
+        setOpen(!open);
+      }
+    }
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [open]);
+
+  const filteredData = data.filter((doc) => {
+    return doc.name?.toLowerCase().includes(value.toLowerCase());
+  });
 
   return (
     <>
       <BiCommand
         size={22}
-        className="hover:transform text-gray-400 mr-4 cursor-pointer hover:text-gray-100 hover:scale-110 transition duration-200 ease-in-out"
+        className="mr-4 cursor-pointer text-gray-400 transition duration-200 ease-in-out hover:scale-110 hover:transform hover:text-gray-100"
         onClick={() => setOpen(true)}
       />
       <Command
         open={open}
+        onClose={() => {
+          setOpen(!open);
+        }}
         commandFunction={(action) => {
           setOpen(false);
           router.push(`${action}`);
         }}
-        className="bg-midnight text-white border-none"
-        overlayClassName="bg-midnight/50 text-white"
+        className="border border-neutral-800 bg-midnight text-white"
+        overlayClassName="bg-midnight/50"
       >
         <CommandInput
           placeholder="Search..."
           onChange={(e) => {
             setValue(e.target.value);
           }}
-          className="bg-midnight text-white border-b border-zinc-800"
+          className="border-b border-neutral-800 bg-midnight text-white"
         />
-        <CommandList>
+        <CommandList className="border-none">
           {filteredData.map((action) => (
-            <CommandOption key={action.id} value={action.href}>
-              <div className="flex items-center space-x-2 hover:bg-slate-800">
-                <div className="flex-shrink-0 icon-size-8">{action.icon}</div>
+            <CommandOption
+              key={action.id}
+              value={action.href || ""}
+              activeClassName="hover:bg-neutral-900"
+            >
+              <div className="flex items-center space-x-3 py-1">
+                <div className="icon-size-8 flex-shrink-0">{action.icon}</div>
                 <h1 className="text-gray-100">{action.name}</h1>
               </div>
             </CommandOption>

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { BsGithub } from "react-icons/bs";
 import Auth from "@/components/auth";
 import IconButton from "@/ui/iconButton";
+import CommandMenu from "../command";
 
 const Header = () => {
   return (
@@ -13,8 +14,9 @@ const Header = () => {
             <h1 className="text-xl ml-2 mr-2">slug</h1>
           </div>
         </Link>
-        <div className="flex items-center space-x-4">
+        <div className="flex items-center space-x-6">
           <Auth />
+          <CommandMenu />
           <a
             href="https://github.com/pheralb/slug"
             rel="noreferrer"