fix: minor fixes

mehdibha · Oct 11, 2024 · 2a7055c · 2a7055c
1 parent f928ac0
commit 2a7055c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 41 deletions.
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -36,7 +36,6 @@
     "start": "node dist/index.js",
     "format": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache --log-level warn",
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache --log-level warn",
-    "typecheck": "tsc --noEmit",
     "release": "changeset version",
     "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
     "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",

diff --git a/www/src/app/page.tsx b/www/src/app/page.tsx
@@ -1,22 +1,12 @@
-"use client";
-
 import React from "react";
 import { TerminalSquareIcon } from "lucide-react";
-import { useCommandMenuInputRef } from "@/hooks/use-focus-command-menu";
-// import { Code } from "@/components/code";
+import { Code } from "@/components/code";
 import { SearchCommand } from "@/components/search-command";
 import { Link } from "@/registry/ui/default/core/link";
 import { cn } from "@/registry/ui/default/lib/cn";
 import { siteConfig } from "@/config";
 
 export default function HomePage() {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const { setInputRef } = useCommandMenuInputRef();
-
-  React.useEffect(() => {
-    setInputRef(inputRef);
-  }, [setInputRef]);
-
   return (
     <div className="absolute inset-0 h-full overflow-hidden">
       <div className="relative size-full">
@@ -34,15 +24,15 @@ export default function HomePage() {
                 <div className="z-[-1] h-[450px] w-[700px] bg-[radial-gradient(at_0%_0%,#0894ff_0,rgba(0,0,0,0)_40%),radial-gradient(at_50%_30%,#ff2e54_0,rgba(0,0,0,0)_60%),radial-gradient(at_100%_0%,#ff9004_0,rgba(0,0,0,0)_40%)] blur-[100px]" />
               </div>
               <SearchCommand
-                inputRef={inputRef}
+                context
                 animated
                 className="mt-6 h-64 w-full lg:min-w-[600px]"
               />
             </div>
           </div>
           {/* footer */}
           <div className="absolute bottom-5 left-0 right-0 z-0 flex flex-col items-center justify-center gap-6">
-            {/* <Terminal>{`npx dotui@latest init`}</Terminal> */}
+            <Terminal>{`npx dotui@latest init`}</Terminal>
             <p className="text-fg-muted px-4 text-xs">
               Built by{" "}
               <Link
@@ -68,27 +58,27 @@ export default function HomePage() {
   );
 }
 
-// const Terminal = ({
-//   children,
-//   className,
-// }: {
-//   children: React.ReactNode;
-//   className?: string;
-// }) => {
-//   return (
-//     <div className={cn("w-56 rounded-md border", className)}>
-//       <div className="bg-bg-muted rounded-t-[inherit] border-b p-1">
-//         <TerminalSquareIcon className="text-fg-muted size-3" />
-//       </div>
-//       <Code
-//         lang="bash"
-//         colorReplacements={{
-//           "#96d0ff": "#ffffff",
-//         }}
-//         className="rounded-t-none bg-black/20"
-//       >
-//         {children}
-//       </Code>
-//     </div>
-//   );
-// };
+const Terminal = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={cn("w-56 rounded-md border", className)}>
+      <div className="bg-bg-muted rounded-t-[inherit] border-b p-1">
+        <TerminalSquareIcon className="text-fg-muted size-3" />
+      </div>
+      <Code
+        lang="bash"
+        colorReplacements={{
+          "#96d0ff": "#ffffff",
+        }}
+        className="rounded-t-none bg-black/20"
+      >
+        {children}
+      </Code>
+    </div>
+  );
+};
diff --git a/www/src/components/search-command.tsx b/www/src/components/search-command.tsx
@@ -6,6 +6,7 @@ import { useDocsSearch } from "fumadocs-core/search/client";
 import { SortedResult } from "fumadocs-core/server";
 import { FileTextIcon, HashIcon, TextIcon } from "lucide-react";
 import { kekabCaseToTitle } from "@/lib/string";
+import { useCommandMenuInputRef } from "@/hooks/use-focus-command-menu";
 import {
   CommandEmpty,
   CommandGroup,
@@ -22,12 +23,12 @@ import { searchConfig } from "@/config";
 export const SearchCommand = ({
   className,
   animated,
-  inputRef,
   onRunCommand,
+  context,
   ...props
 }: CommandRootProps & {
   animated?: boolean;
-  inputRef?: React.RefObject<HTMLInputElement>;
+  context?: boolean;
   onRunCommand?: () => void;
 }) => {
   const { search, setSearch, query } = useDocsSearch();
@@ -57,6 +58,13 @@ export const SearchCommand = ({
     [onRunCommand]
   );
 
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const { setInputRef } = useCommandMenuInputRef();
+
+  React.useEffect(() => {
+    if (context) setInputRef(inputRef);
+  }, [context, setInputRef]);
+
   return (
     <CommandRoot
       shouldFilter={false}
@@ -72,7 +80,7 @@ export const SearchCommand = ({
       {...props}
     >
       <CommandInput
-        ref={inputRef}
+        ref={context ? inputRef : undefined}
         value={search}
         onValueChange={setSearch}
         autoFocus