Merge pull request #44 from pheralb/next

🛠️ Add cmd+k to input search + fixed get /folders source code

Author: pheralb

website/app/components/card/copyIcon.tsx

@@ -52,7 +52,9 @@ const CopyIconActions = ({ itemName, isFolder, ItemIcon }: CopyIconProps) => {
   const handleCopySource = async () => {
     setLoading(true);
     const itemNameLower = itemName.charAt(0).toLowerCase() + itemName.slice(1);
-    const jsonUrl = `${appConfig.registryUrl}${itemNameLower}.json`;
+    const jsonUrl = !isFolder
+      ? `${appConfig.registryUrl}${itemNameLower}.json`
+      : `${appConfig.registryUrl}folders/${itemNameLower}.json`;
 
     try {
       const response = await axios.get(jsonUrl);

website/app/components/navbar/search.tsx

@@ -2,6 +2,8 @@ import { useSearchParams } from "react-router";
 
 import { Input } from "@/ui/input";
 import { searchParamKey } from "@/data/searchParams";
+import { useEffect, useRef, useState, type ChangeEvent } from "react";
+import { CommandIcon } from "lucide-react";
 
 interface iSearchProps {
   className?: string;
@@ -11,8 +13,23 @@ interface iSearchProps {
 const Search = (props: iSearchProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const search = searchParams.get(searchParamKey) ?? "";
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const newSearchParams = new URLSearchParams(searchParams);
     if (!e.target.value) {
       newSearchParams.delete(searchParamKey);
@@ -23,15 +40,26 @@ const Search = (props: iSearchProps) => {
   };
 
   return (
-    <Input
-      className={props.className}
-      type="search"
-      name={searchParamKey}
-      placeholder={props.placeholder}
-      defaultValue={search}
-      autoComplete="off"
-      onChange={(e) => handleChange(e)}
-    />
+    <div className="relative">
+      <Input
+        ref={inputRef}
+        className={props.className}
+        type="search"
+        name={searchParamKey}
+        placeholder={props.placeholder}
+        defaultValue={search}
+        autoComplete="off"
+        onChange={(e) => handleChange(e)}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
+      {!isFocused && !search && (
+        <kbd className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1 rounded bg-zinc-200 p-1 font-mono text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400">
+          <CommandIcon size={14} />
+          <span>K</span>
+        </kbd>
+      )}
+    </div>
   );
 };
 

website/app/components/notFound.tsx

@@ -1,6 +1,6 @@
 import { buttonVariants } from "@/ui/button";
 import { containerClasses } from "@/ui/container";
-import { BoxIcon } from "lucide-react";
+import { BoxIcon, FolderSearchIcon } from "lucide-react";
 import { cn } from "@/utils";
 import { Link } from "react-router";
 
@@ -33,7 +33,10 @@ const NotFound = (props: NotFoundProps) => {
             variant: "outline",
           })}
         >
-          Show all {props.isFolder ? "folders icons" : "files icons"}
+          <FolderSearchIcon size={18} strokeWidth={1.5} />
+          <span>
+            Show all {props.isFolder ? "folders icons" : "files icons"}
+          </span>
         </Link>
       </div>
     </div>

website/app/root.tsx

@@ -38,6 +38,7 @@ import {
 import { themeSessionResolver } from "./sessions.server";
 import clsx from "clsx";
 
+
 // Links:
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: tailwind },