feat: default content for search component

Author: alexcambose

apps/insights/src/components/Root/search-button.tsx

@@ -8,7 +8,6 @@ import { NoResults } from "@pythnetwork/component-library/NoResults";
 import { SearchButton as SearchButtonComponent } from "@pythnetwork/component-library/SearchButton";
 import { SearchInput } from "@pythnetwork/component-library/SearchInput";
 import { SingleToggleGroup } from "@pythnetwork/component-library/SingleToggleGroup";
-import { Skeleton } from "@pythnetwork/component-library/Skeleton";
 import {
   ListLayout,
   Virtualizer,
@@ -23,7 +22,7 @@ import { useLogger } from "@pythnetwork/component-library/useLogger";
 import { matchSorter } from "match-sorter";
 import type { ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useCollator, useFilter, useIsSSR } from "react-aria";
+import { useCollator, useFilter } from "react-aria";
 
 import { Cluster, ClusterToName } from "../../services/pyth";
 import { AssetClassBadge } from "../AssetClassBadge";
@@ -74,14 +73,7 @@ const ResolvedSearchButton = (props: ResolvedSearchButtonProps) => {
 
 const SearchButtonImpl = (
   props: Omit<ButtonProps<typeof UnstyledButton>, "children">,
-) => (
-  <SearchButtonComponent
-    size="sm"
-    {...props}
-    smallScreenContent={<SearchShortcutText />}
-    largeScreenContent={<SearchShortcutText />}
-  />
-);
+) => <SearchButtonComponent size="sm" {...props} />;
 
 const useSearchDrawer = ({ feeds, publishers }: ResolvedSearchButtonProps) => {
   const drawer = useDrawer();
@@ -135,16 +127,6 @@ const useSearchHotkey = (openSearchDrawer: () => void) => {
   }, [handleKeyDown]);
 };
 
-const SearchShortcutText = () => {
-  const isSSR = useIsSSR();
-  return isSSR ? <Skeleton width={7} /> : <SearchTextImpl />;
-};
-
-const SearchTextImpl = () => {
-  const isMac = useMemo(() => navigator.userAgent.includes("Mac"), []);
-  return isMac ? "⌘ K" : "Ctrl K";
-};
-
 type SearchDialogContentsProps = ResolvedSearchButtonProps;
 
 const SearchDialogContents = ({

packages/component-library/src/SearchButton/index.tsx

@@ -3,10 +3,13 @@
 import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
 import clsx from "clsx";
 import type { ReactNode } from "react";
+import { useMemo } from "react";
+import { useIsSSR } from "react-aria";
 import { Button as BaseButton } from "react-aria-components";
 
 import type { Props as ButtonProps } from "../Button";
 import { Button } from "../Button";
+import { Skeleton } from "../Skeleton";
 import styles from "./index.module.scss";
 
 type OwnProps = {
@@ -20,6 +23,16 @@ type Props = Pick<
 > &
   OwnProps;
 
+const SearchShortcutText = () => {
+  const isSSR = useIsSSR();
+  return isSSR ? <Skeleton width={7} /> : <SearchTextImpl />;
+};
+
+const SearchTextImpl = () => {
+  const isMac = useMemo(() => navigator.userAgent.includes("Mac"), []);
+  return isMac ? "⌘ K" : "Ctrl K";
+};
+
 export const SearchButton = ({
   beforeIcon,
   largeScreenContent,
@@ -36,7 +49,7 @@ export const SearchButton = ({
         rounded
         {...props}
       >
-        {largeScreenContent}
+        {largeScreenContent ?? <SearchShortcutText />}
       </Button>
       <Button
         className={clsx(styles.smallScreenSearchButton, props.className)}
@@ -47,7 +60,7 @@ export const SearchButton = ({
         rounded
         {...props}
       >
-        {smallScreenContent}
+        {smallScreenContent ?? <SearchShortcutText />}
       </Button>
     </div>
   );