Merge pull request #11 from phucbm/search-darkmode

Search dark mode

Author: phucbm

app/layout.tsx

@@ -14,6 +14,7 @@ export const metadata: Metadata = {
 // const banner = <Banner storageKey="some-key">This template was created with 🩸 and 💦 by <Link href="https://github.com/phucbm">PHUCBM</Link> 🐧</Banner>
 const navbar = (
     <Navbar
+        projectLink="https://github.com/phucbm/nextra-docs-starter"
         logo={<img src="/images/general/logo.svg" alt="Logo" width={100} height={20}/>}
         // ... Your additional navbar options
     />

components/nextra-search-dialog.tsx

@@ -8,6 +8,7 @@ import {Command as CommandPrimitive} from "cmdk";
 import {cn} from "@/lib/utils";
 import {useRouter} from "next/navigation";
 import {PageItem} from "@/lib/getPagesFromPageMap";
+import {Kbd} from "@/components/ui/kbd";
 
 type Props = {
     placeholder?: string;
@@ -143,7 +144,7 @@ export function NextraSearchDialog({placeholder = "Search...", pages = []}: Prop
                            showCloseButton={false}
                            className="search-dialog !max-w-[800px] overflow-hidden !bg-transparent px-2 border-none [&_.bg-popover]:bg-transparent">
 
-                <div className="border-4 border-slate-200 rounded-2xl bg-white">
+                <div className="border-4 rounded-2xl bg-background">
                     <SearchInput
                         placeholder={placeholder}
                         query={query}
@@ -216,16 +217,16 @@ function SearchTrigger({placeholder, onClick}: { placeholder: string; onClick: (
     return (
         <button
             onClick={onClick}
-            className="inline-flex items-center gap-2 px-3 py-2 text-sm
-            bg-input text-foreground cursor-pointer
-            border border-gray-200 rounded-md hover:border-gray-300 hover:bg-gray-50 transition-colors"
+            className={cn(
+                "inline-flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:border-gray-300 dark:hover:border-white/40",
+                "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-all outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+                "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+            )}
         >
             <SearchIcon className="size-4"/>
             <span>{placeholder}</span>
-            <kbd
-                className="hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border border-gray-200 bg-gray-100 px-1.5 font-mono text-xs text-gray-600">
-                <span className="text-xs">⌘</span>K
-            </kbd>
+            <Kbd><span className="text-xs">⌘</span>K</Kbd>
         </button>
     );
 }
@@ -278,7 +279,7 @@ function SearchItem({url, title, description, onSelect, value, parent}: {
     value?: string;
 }) {
     return (
-        <CommandItem onSelect={() => onSelect(url)} value={value}>
+        <CommandItem onSelect={() => onSelect(url)} value={value} className="cursor-pointer">
             <div className="flex flex-col gap-1 w-full">
                 <div className="flex items-center gap-1">
                     {parent && (
@@ -289,7 +290,7 @@ function SearchItem({url, title, description, onSelect, value, parent}: {
                     )}
                     <div className="font-semibold">{title}</div>
                 </div>
-                <div className="text-xs text-gray-600">
+                <div className="text-xs text-muted-foreground">
                     {description}
                 </div>
             </div>
@@ -336,7 +337,7 @@ function highlightQuery(text: string, query: string) {
     const parts = text.split(regex);
 
     return parts.map((part, index) =>
-        regex.test(part) ? <mark key={index} className="bg-brand text-brand-foreground font-medium">{part}</mark> : part
+        regex.test(part) ? <mark key={index} className="bg-primary text-primary-foreground rounded-[3px] font-medium">{part}</mark> : part
     );
 }
 

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.