summaryrefslogtreecommitdiff
path: root/examples/docs/src/components
diff options
context:
space:
mode:
authorGravatar matthewp <matthewp@users.noreply.github.com> 2022-05-12 20:21:02 +0000
committerGravatar github-actions[bot] <github-actions[bot]@users.noreply.github.com> 2022-05-12 20:21:02 +0000
commit29e7260a4e484947931398ef9e10b7efa8e361eb (patch)
tree2bc99e3b943110dd72b49ee22f581ce982e7fe4d /examples/docs/src/components
parent17da2b1611703773f06536142991a871d372e153 (diff)
downloadastro-29e7260a4e484947931398ef9e10b7efa8e361eb.tar.gz
astro-29e7260a4e484947931398ef9e10b7efa8e361eb.tar.zst
astro-29e7260a4e484947931398ef9e10b7efa8e361eb.zip
[ci] format
Diffstat (limited to 'examples/docs/src/components')
-rw-r--r--examples/docs/src/components/Header/Search.tsx163
1 files changed, 78 insertions, 85 deletions
diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx
index 5b1056d14..b8a4292da 100644
--- a/examples/docs/src/components/Header/Search.tsx
+++ b/examples/docs/src/components/Header/Search.tsx
@@ -1,104 +1,97 @@
/* jsxImportSource: react */
-import { useState, useCallback, useRef } from "react";
-import * as CONFIG from "../../config";
-import "@docsearch/css/dist/style.css";
-import "./Search.css";
+import { useState, useCallback, useRef } from 'react';
+import * as CONFIG from '../../config';
+import '@docsearch/css/dist/style.css';
+import './Search.css';
// @ts-ignore
-import * as docSearchReact from "@docsearch/react";
+import * as docSearchReact from '@docsearch/react';
// @ts-ignore
-import { createPortal } from "react-dom";
+import { createPortal } from 'react-dom';
export default function Search() {
- const DocSearchModal =
- docSearchReact.DocSearchModal || docSearchReact.default.DocSearchModal;
+ const DocSearchModal = docSearchReact.DocSearchModal || docSearchReact.default.DocSearchModal;
- const useDocSearchKeyboardEvents =
- docSearchReact.useDocSearchKeyboardEvents ||
- docSearchReact.default.useDocSearchKeyboardEvents;
+ const useDocSearchKeyboardEvents =
+ docSearchReact.useDocSearchKeyboardEvents || docSearchReact.default.useDocSearchKeyboardEvents;
- const [isOpen, setIsOpen] = useState(false);
- const searchButtonRef = useRef();
- const [initialQuery, setInitialQuery] = useState(null);
+ const [isOpen, setIsOpen] = useState(false);
+ const searchButtonRef = useRef();
+ const [initialQuery, setInitialQuery] = useState(null);
- const onOpen = useCallback(() => {
- setIsOpen(true);
- }, [setIsOpen]);
+ const onOpen = useCallback(() => {
+ setIsOpen(true);
+ }, [setIsOpen]);
- const onClose = useCallback(() => {
- setIsOpen(false);
- }, [setIsOpen]);
+ const onClose = useCallback(() => {
+ setIsOpen(false);
+ }, [setIsOpen]);
- const onInput = useCallback(
- (e) => {
- setIsOpen(true);
- setInitialQuery(e.key);
- },
- [setIsOpen, setInitialQuery]
- );
+ const onInput = useCallback(
+ (e) => {
+ setIsOpen(true);
+ setInitialQuery(e.key);
+ },
+ [setIsOpen, setInitialQuery]
+ );
- useDocSearchKeyboardEvents({
- isOpen,
- onOpen,
- onClose,
- onInput,
- searchButtonRef,
- });
+ useDocSearchKeyboardEvents({
+ isOpen,
+ onOpen,
+ onClose,
+ onInput,
+ searchButtonRef,
+ });
- return (
- <>
- <button
- type="button"
- ref={searchButtonRef}
- onClick={onOpen}
- className="search-input"
- >
- <svg width="24" height="24" fill="none">
- <path
- d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- </svg>
+ return (
+ <>
+ <button type="button" ref={searchButtonRef} onClick={onOpen} className="search-input">
+ <svg width="24" height="24" fill="none">
+ <path
+ d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
- <span>Search</span>
+ <span>Search</span>
- <span className="search-hint">
- <span className="sr-only">Press </span>
+ <span className="search-hint">
+ <span className="sr-only">Press </span>
- <kbd>/</kbd>
+ <kbd>/</kbd>
- <span className="sr-only"> to search</span>
- </span>
- </button>
+ <span className="sr-only"> to search</span>
+ </span>
+ </button>
- {isOpen &&
- createPortal(
- <DocSearchModal
- initialQuery={initialQuery}
- initialScrollY={window.scrollY}
- onClose={onClose}
- indexName={(CONFIG as any).ALGOLIA.indexName}
- appId={(CONFIG as any).ALGOLIA.appId}
- apiKey={(CONFIG as any).ALGOLIA.apiKey}
- transformItems={(items) => {
- return items.map((item) => {
- // We transform the absolute URL into a relative URL to
- // work better on localhost, preview URLS.
- const a = document.createElement("a");
- a.href = item.url;
- const hash = a.hash === "#overview" ? "" : a.hash;
- return {
- ...item,
- url: `${a.pathname}${hash}`,
- };
- });
- }}
- />,
- document.body
- )}
- </>
- );
+ {isOpen &&
+ createPortal(
+ <DocSearchModal
+ initialQuery={initialQuery}
+ initialScrollY={window.scrollY}
+ onClose={onClose}
+ indexName={(CONFIG as any).ALGOLIA.indexName}
+ appId={(CONFIG as any).ALGOLIA.appId}
+ apiKey={(CONFIG as any).ALGOLIA.apiKey}
+ transformItems={(items) => {
+ return items.map((item) => {
+ // We transform the absolute URL into a relative URL to
+ // work better on localhost, preview URLS.
+ const a = document.createElement('a');
+ a.href = item.url;
+ const hash = a.hash === '#overview' ? '' : a.hash;
+ return {
+ ...item,
+ url: `${a.pathname}${hash}`,
+ };
+ });
+ }}
+ />,
+ document.body
+ )}
+ </>
+ );
}