minor fixes

Author: mehdibha

www/src/app/(home)/layout.tsx

@@ -10,8 +10,8 @@ export default function HomeLayout({
 }) {
   return (
     <div>
-      <Header className="hidden md:block" />
-      <MobileNav items={source.pageTree.children} className="md:hidden" />
+      <Header className="hidden lg:block" />
+      <MobileNav items={source.pageTree.children} className="lg:hidden" />
       <div className="mx-auto min-h-screen max-w-screen-2xl sm:grid sm:grid-cols-[20px_1fr_20px] md:grid-cols-[30px_1fr_30px]">
         <div className="diagonal-pattern hidden sm:block" />
         <div className="">

www/src/components/docs/breadcrumbs.tsx

@@ -3,13 +3,10 @@
 import { usePathname } from "next/navigation";
 import { useBreadcrumb } from "fumadocs-core/breadcrumb";
 import { PageTree } from "fumadocs-core/server";
-import { ChevronRightIcon } from "lucide-react";
-import { cn } from "@/lib/utils";
 import {
   Breadcrumbs as Breadcrumbs_,
-  BreadcrumbItem,
-  BreadcrumbLink,
   BreadcrumbsProps,
+  Breadcrumb,
 } from "@/components/core/breadcrumbs";
 
 export const Breadcrumbs = <T extends object>({
@@ -22,15 +19,7 @@ export const Breadcrumbs = <T extends object>({
   return (
     <Breadcrumbs_ {...props}>
       {breadcrumbs.map((elem, index) => (
-        <BreadcrumbItem key={index}>
-          <BreadcrumbLink
-            href={elem.url}
-            className={cn(!elem.url && "hover:text-fg-muted")}
-          >
-            {elem.name}
-          </BreadcrumbLink>
-          <ChevronRightIcon />
-        </BreadcrumbItem>
+        <Breadcrumb key={index}>{elem.name}</Breadcrumb>
       ))}
     </Breadcrumbs_>
   );

www/src/components/header.tsx

@@ -43,8 +43,13 @@ export function Header({ className }: { className?: string }) {
               size="sm"
               variant="outline"
               prefix={<SearchIcon />}
-              suffix={<Kbd className="text-xs">Ctrl+K</Kbd>}
-              className="bg-bg-inverse/5 gap-2 px-3"
+              suffix={
+                <div className="flex items-center gap-0.5 text-xs">
+                  <Kbd>Ctrl</Kbd>
+                  <Kbd>K</Kbd>
+                </div>
+              }
+              className="bg-bg-inverse/5 text-fg-muted gap-2 pl-3 pr-1"
             >
               <span className="mr-6 flex-1">Search docs...</span>
             </Button>

www/src/components/mobile-nav.tsx

@@ -6,6 +6,7 @@ import { AlignLeftIcon, PanelLeftCloseIcon, SearchIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/core/button";
 import { Dialog, DialogRoot } from "@/components/core/dialog";
+import { Kbd } from "@/components/core/kbd";
 import { ScrollArea } from "@/components/core/scroll-area";
 import { GitHubIcon, TwitterIcon } from "@/components/icons";
 import { siteConfig } from "@/config";
@@ -29,7 +30,7 @@ export const MobileNav = ({
         className
       )}
     >
-      <div className="max-w-(--breakpoint-2xl) container flex h-14 w-full items-center justify-between">
+      <div className="max-w-(--breakpoint-2xl) container flex h-14 w-full items-center justify-between gap-1 sm:gap-2">
         <DialogRoot isOpen={isOpen} onOpenChange={setOpen}>
           <Button variant="quiet" size="sm" shape="square">
             <AlignLeftIcon />
@@ -59,9 +60,9 @@ export const MobileNav = ({
                       <Button
                         prefix={<SearchIcon />}
                         variant="outline"
-                        className="bg-bg-inverse/5 w-full"
+                        className="bg-bg-inverse/5 text-fg-muted w-full"
                       >
-                        <span className="flex-1 text-left">Search </span>
+                        <span className="flex-1 text-left">Search docs...</span>
                       </Button>
                     </SearchCommand>
                   </div>
@@ -107,33 +108,47 @@ export const MobileNav = ({
             )}
           </Dialog>
         </DialogRoot>
-        <div className="flex items-center gap-1">
-          <SearchCommand>
-            <Button variant="quiet" size="sm" shape="square">
-              <SearchIcon />
-            </Button>
-          </SearchCommand>
+        <span className="hidden sm:block sm:flex-1" />
+        <SearchCommand
+          onAction={() => {
+            setOpen(false);
+          }}
+        >
           <Button
-            href={siteConfig.links.github}
-            target="_blank"
             size="sm"
-            shape="square"
-            variant="quiet"
-            aria-label="github"
-          >
-            <GitHubIcon />
-          </Button>
-          <Button
-            href={siteConfig.links.twitter}
-            target="_blank"
-            size="sm"
-            shape="square"
-            variant="quiet"
-            aria-label="twitter"
+            variant="outline"
+            prefix={<SearchIcon />}
+            suffix={
+              <div className="flex items-center gap-0.5 text-xs max-sm:hidden">
+                <Kbd>Ctrl</Kbd>
+                <Kbd>K</Kbd>
+              </div>
+            }
+            className="bg-bg-inverse/5 text-fg-muted gap-2 pl-3 pr-1 max-sm:flex-1"
           >
-            <TwitterIcon />
+            <span className="mr-6 flex-1 text-left">Search docs...</span>
           </Button>
-        </div>
+        </SearchCommand>
+        <Button
+          href={siteConfig.links.github}
+          target="_blank"
+          size="sm"
+          shape="square"
+          variant="quiet"
+          aria-label="github"
+        >
+          <GitHubIcon />
+        </Button>
+        <Button
+          href={siteConfig.links.twitter}
+          target="_blank"
+          size="sm"
+          shape="square"
+          variant="quiet"
+          aria-label="twitter"
+        >
+          <TwitterIcon />
+        </Button>
       </div>
     </header>
   );

www/src/components/sidebar.tsx

@@ -221,7 +221,7 @@ const SidebarSearchButton = ({ isCollapsed }: { isCollapsed: boolean }) => {
           <div className="flex items-center gap-2">
             Search{" "}
             <div className="flex items-center gap-0.5">
-              <Kbd>Ctrl</Kbd>
+              <Kbd>ctrl</Kbd>
               <Kbd>K</Kbd>
             </div>
           </div>

www/src/modules/themes/components/themes-overview.tsx

@@ -92,9 +92,9 @@ export const ThemesOverview = () => {
               className="text-fg-muted z-20 bg-[#f5f5f5] dark:bg-[#19191d] [&_svg]:size-3.5"
             >
               {copied ? (
-                <CheckIcon className="animate-in fade-in" />
+                <CheckIcon className="animate-in fade-in duration-75" />
               ) : (
-                <CopyIcon className="animate-in fade-in" />
+                <CopyIcon className="animate-in fade-in duration-75" />
               )}
             </Button>
           </motion.div>

www/src/registry/core/breadcrumbs_basic.tsx

@@ -18,7 +18,7 @@ const breadcrumbsStyles = tv({
     item: "inline-flex items-center gap-1",
     link: [
       focusRing(),
-      "hover:text-fg current:text-fg disabled:not-current:text-fg-disabled inline-flex items-center gap-1 rounded px-0.5 leading-none transition-colors disabled:cursor-default",
+      "current:text-fg hover:[&:is(a)]:text-fg disabled:not-current:text-fg-disabled inline-flex items-center gap-1 rounded px-0.5 leading-none transition-colors disabled:cursor-default",
     ],
   },
 });

www/src/registry/core/button_basic.tsx

@@ -109,7 +109,11 @@ const Button = React.forwardRef(
               />
             )}
             {prefix}
-            <span className="truncate">{children}</span>
+            {typeof children === "string" ? (
+              <span className="truncate">{children}</span>
+            ) : (
+              children
+            )}
             {suffix}
           </>
         ))}

www/src/registry/core/kbd_basic.tsx

@@ -4,7 +4,7 @@ import { Keyboard } from "react-aria-components";
 import { tv } from "tailwind-variants";
 
 const KbdStyles = tv({
-  base: "text-fg-muted bg-bg inline-flex min-w-5 items-center justify-center rounded-md border p-1 text-xs leading-none",
+  base: "text-fg-muted bg-bg inline-flex min-w-5 items-center justify-center rounded-sm border p-1 text-xs leading-none",
 });
 
 type KbdProps = React.HTMLAttributes<HTMLElement>;