feat(docs): add search button to landing page (#6447)

refinedev · Nov 5, 2024 · b609ab3 · b609ab3
1 parent e5107a9
commit b609ab3
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 77 deletions.
diff --git a/documentation/src/refine-theme/common-header.tsx b/documentation/src/refine-theme/common-header.tsx
@@ -13,6 +13,7 @@ import { CommonThemeToggle } from "./common-theme-toggle";
 import { TopAnnouncement } from "./top-announcement";
 
 import { LandingGithubStarButton } from "./landing-github-star-button";
+import SearchBar from "../theme/SearchBar";
 
 type Props = {
   hasSticky?: boolean;
@@ -109,11 +110,11 @@ export const CommonHeader = ({
                 "hidden landing-md:flex",
                 "items-center",
                 "justify-end",
-                "gap-4",
-                "w-[130px]",
-                "landing-lg:w-[200px]",
+                "gap-2",
+                "w-[314px]",
               )}
             >
+              <SearchBar variant="landing" />
               <LandingGithubStarButton />
               <CommonThemeToggle />
             </div>

diff --git a/documentation/src/refine-theme/common-header/navbar-popover-item.tsx b/documentation/src/refine-theme/common-header/navbar-popover-item.tsx
@@ -47,6 +47,7 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
               "inline-flex items-center",
               "text-sm leading-6",
               "font-normal",
+              "whitespace-nowrap",
             )}
           >
             <span

diff --git a/documentation/src/refine-theme/doc-search-button.tsx b/documentation/src/refine-theme/doc-search-button.tsx
@@ -2,79 +2,97 @@ import clsx from "clsx";
 import React from "react";
 import { MagnifierIcon } from "./icons/magnifier";
 
-type Props = React.ComponentProps<"button"> & {
+export type DocSearchButtonProps = React.ComponentProps<"button"> & {
   iconOnly?: boolean;
   iconClassName?: string;
   placeholder?: string;
   isPermanentDark?: boolean;
+  variant?: "landing" | "doc";
 };
 
-export const DocSearchButton = React.forwardRef<HTMLButtonElement, Props>(
-  function DocSearchButtonComponent(
-    {
-      iconOnly = false,
-      iconClassName,
-      className,
-      placeholder,
-      isPermanentDark,
-      ...props
-    },
-    ref,
-  ) {
-    return (
-      <button
-        ref={ref}
-        type="button"
-        {...props}
+export const DocSearchButton = React.forwardRef<
+  HTMLButtonElement,
+  DocSearchButtonProps
+>(function DocSearchButtonComponent(
+  {
+    variant = "doc",
+    iconOnly = false,
+    iconClassName,
+    className,
+    placeholder,
+    isPermanentDark,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      {...props}
+      className={clsx(
+        "flex items-center",
+        "gap-2",
+        "text-sm",
+        "transition-[filter]",
+        "duration-200",
+        "ease-in-out",
+        {
+          "bg-gray-200 dark:bg-gray-700": variant === "doc",
+          "rounded-full border border-solid border-gray-300 dark:border-gray-700":
+            variant === "landing",
+        },
+        {
+          "py-2.5 pr-2.5 pl-3": !iconOnly,
+          "py-2.5 px-2.5": iconOnly,
+          "text-gray-500 dark:text-gray-400": iconOnly,
+          "justify-center": iconOnly,
+          "hover:brightness-110": iconOnly,
+          "dark:text-gray-0 text-gray-500": !iconOnly,
+          "justify-between": !iconOnly,
+          "rounded-full": iconOnly,
+          "rounded-[32px]": !iconOnly,
+        },
+        className,
+      )}
+    >
+      <MagnifierIcon
         className={clsx(
-          "flex items-center",
-          "gap-2",
-          "text-sm",
-          "transition-[filter]",
-          "duration-200",
-          "ease-in-out",
-          "bg-gray-200 dark:bg-gray-700",
-
-          {
-            "py-2.5 pr-2.5 pl-3": !iconOnly,
-            "py-2.5 px-2.5": iconOnly,
-            "text-gray-500 dark:text-gray-400": iconOnly,
-            "justify-center": iconOnly,
-            "hover:brightness-110": iconOnly,
-            "dark:text-gray-0 text-gray-500": !iconOnly,
-            "justify-between": !iconOnly,
-            "rounded-full": iconOnly,
-            "rounded-[32px]": !iconOnly,
-          },
-          className,
+          "text-gray-500 dark:text-gray-400",
+          "w-3 h-3 landing-md:w-4 landing-md:h-4",
+          iconClassName,
         )}
-      >
-        <MagnifierIcon
-          className={clsx(
-            "text-gray-500 dark:text-gray-400",
-            "w-3 h-3 landing-md:w-4 landing-md:h-4",
-            iconClassName,
-          )}
-        />
-        {!iconOnly && (
-          <>
-            <span className="text-gray-500 dark:text-gray-400 w-[66px] text-left">
-              {placeholder ?? "Search"}
-            </span>
-            <div
-              className={clsx(
-                "bg-gray-0 dark:bg-gray-800",
-                "text-gray-500 dark:text-gray-400",
-                "py-0.5 px-1.5",
-                "rounded-2xl",
-                "text-xs",
-              )}
-            >
-              ⌘K
-            </div>
-          </>
-        )}
-      </button>
-    );
-  },
-);
+      />
+      {!iconOnly && (
+        <>
+          <span
+            className={clsx("text-gray-500 dark:text-gray-400 text-left", {
+              "w-[66px]": variant === "doc",
+              "pr-2.5 landing-lg:pr-0": variant === "landing",
+            })}
+          >
+            {placeholder ?? "Search"}
+          </span>
+          <div
+            className={clsx(
+              {
+                "hidden landing-lg:block": variant === "landing",
+                "bg-gray-100 dark:bg-gray-700": variant === "landing",
+                "text-gray-500 dark:text-gray-300": variant === "landing",
+              },
+              {
+                "bg-gray-0 dark:bg-gray-800": variant === "doc",
+                "text-gray-500 dark:text-gray-400": variant === "doc",
+              },
+              "py-0.5 px-1.5",
+              "rounded-2xl",
+              "text-xs",
+            )}
+          >
+            ⌘K
+          </div>
+        </>
+      )}
+    </button>
+  );
+});
diff --git a/documentation/src/refine-theme/landing-github-star-button.tsx b/documentation/src/refine-theme/landing-github-star-button.tsx
@@ -13,7 +13,7 @@ export const LandingGithubStarButton = () => {
       target="_blank"
       rel="noreferrer"
       className={clsx(
-        "flex gap-2 items-center",
+        "flex gap-2 items-center justify-center",
         "font-normal",
         "text-sm leading-6",
         "text-gray-500 dark:text-gray-400",
@@ -22,6 +22,11 @@ export const LandingGithubStarButton = () => {
         "transition-colors",
         "duration-200",
         "ease-in-out",
+        "w-[88px] h-10",
+        "border",
+        "rounded-full",
+        "border-solid",
+        "border-gray-300 dark:border-gray-700",
       )}
     >
       <GithubIcon className={clsx("w-5 h-5")} />

diff --git a/documentation/src/refine-theme/landing-hero-section.tsx b/documentation/src/refine-theme/landing-hero-section.tsx
@@ -94,9 +94,8 @@ export const LandingHeroSection = ({ className }: { className?: string }) => {
                 "ease-in-out",
                 "hover:brightness-110",
                 "py-3",
-                "pl-7 pr-8",
-                "landing-md:px-8",
-                "landing-lg:pl-7 landing-lg:pr-8",
+                "pl-3 pr-5",
+                "w-[200px] landing-sm:w-max",
                 "flex",
                 "items-center",
                 "justify-center",

diff --git a/documentation/src/theme/SearchBar/index.tsx b/documentation/src/theme/SearchBar/index.tsx
@@ -12,7 +12,10 @@ import {
 } from "@docusaurus/theme-search-algolia/client";
 import Translate from "@docusaurus/Translate";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { DocSearchButton } from "@site/src/refine-theme/doc-search-button";
+import {
+  DocSearchButton,
+  type DocSearchButtonProps,
+} from "@site/src/refine-theme/doc-search-button";
 import translations from "@theme/SearchTranslations";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -202,12 +205,16 @@ function DocSearch({
   );
 }
 
-export default function SearchBar({ CustomButton }: { CustomButton?: any }) {
+export default function SearchBar({
+  CustomButton,
+  variant,
+}: { CustomButton?: any; variant?: DocSearchButtonProps["variant"] }) {
   const { siteConfig } = useDocusaurusContext();
   return (
     <DocSearch
       {...(siteConfig.themeConfig.algolia as Record<string, any>)}
       CustomButton={CustomButton}
+      variant={variant}
     />
   );
 }