linting
This commit is contained in:
parent
ab06e6456b
commit
8ad35ea5b4
|
@ -2,7 +2,7 @@ import { FC } from 'react';
|
||||||
import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react';
|
import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react';
|
||||||
import NextLink from 'next/link';
|
import NextLink from 'next/link';
|
||||||
|
|
||||||
import { Search } from '../UI'
|
import { Search } from '../UI';
|
||||||
import { MoonIcon, SunIcon } from '../UI/icons';
|
import { MoonIcon, SunIcon } from '../UI/icons';
|
||||||
|
|
||||||
import { HeaderButtons } from './';
|
import { HeaderButtons } from './';
|
||||||
|
|
|
@ -3,16 +3,12 @@ import { DocSearch } from '@docsearch/react';
|
||||||
import '@docsearch/css';
|
import '@docsearch/css';
|
||||||
|
|
||||||
export const Search: React.FC = () => {
|
export const Search: React.FC = () => {
|
||||||
const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || ''
|
const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || '';
|
||||||
const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || ''
|
const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '';
|
||||||
const indexName = process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || ''
|
const indexName = process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || '';
|
||||||
|
|
||||||
// TODO: Replace Algolia test keys with above env vars when ready
|
// TODO: Replace Algolia test keys with above env vars when ready
|
||||||
return (
|
return (
|
||||||
<DocSearch
|
<DocSearch appId='R2IYF7ETH7' apiKey='599cec31baffa4868cae4e79f180729b' indexName='docsearch' />
|
||||||
appId="R2IYF7ETH7"
|
|
||||||
apiKey="599cec31baffa4868cae4e79f180729b"
|
|
||||||
indexName="docsearch"
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
|
@ -1,4 +1,12 @@
|
||||||
import { Box, Flex, Modal, ModalContent, ModalOverlay, Stack, useDisclosure } from '@chakra-ui/react';
|
import {
|
||||||
|
Box,
|
||||||
|
Flex,
|
||||||
|
Modal,
|
||||||
|
ModalContent,
|
||||||
|
ModalOverlay,
|
||||||
|
Stack,
|
||||||
|
useDisclosure
|
||||||
|
} from '@chakra-ui/react';
|
||||||
import { CloseIcon } from '@chakra-ui/icons';
|
import { CloseIcon } from '@chakra-ui/icons';
|
||||||
|
|
||||||
import { HamburgerIcon } from '../UI/icons';
|
import { HamburgerIcon } from '../UI/icons';
|
||||||
|
|
|
@ -76,7 +76,7 @@
|
||||||
background: var(--chakra-colors-bg);
|
background: var(--chakra-colors-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
svg[aria-label="Algolia"] * {
|
svg[aria-label='Algolia'] * {
|
||||||
fill: var(--chakra-colors-body);
|
fill: var(--chakra-colors-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -86,16 +86,16 @@ svg[aria-label="Algolia"] * {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Hit[aria-selected="true"] a {
|
.DocSearch-Hit[aria-selected='true'] a {
|
||||||
background: var(--chakra-colors-secondary);
|
background: var(--chakra-colors-secondary);
|
||||||
color: var(--chakra-colors-button-bg);
|
color: var(--chakra-colors-button-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Hit[aria-selected="false"] a {
|
.DocSearch-Hit[aria-selected='false'] a {
|
||||||
background: var(--chakra-colors-button-bg);
|
background: var(--chakra-colors-button-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Hit[aria-selected="false"] > a > div > div.DocSearch-Hit-icon > svg > path {
|
.DocSearch-Hit[aria-selected='false'] > a > div > div.DocSearch-Hit-icon > svg > path {
|
||||||
color: var(--chakra-colors-body);
|
color: var(--chakra-colors-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -120,8 +120,8 @@ svg[aria-label="Algolia"] * {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper svg,
|
.DocSearch-Hit[aria-selected='true'] > a > div > div.DocSearch-Hit-content-wrapper svg,
|
||||||
.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper span,
|
.DocSearch-Hit[aria-selected='true'] > a > div > div.DocSearch-Hit-content-wrapper span,
|
||||||
.DocSearch-Hit-title mark,
|
.DocSearch-Hit-title mark,
|
||||||
.DocSearch-Hit-path mark,
|
.DocSearch-Hit-path mark,
|
||||||
.DocSearch-Prefill {
|
.DocSearch-Prefill {
|
||||||
|
@ -137,7 +137,7 @@ svg[aria-label="Algolia"] * {
|
||||||
|
|
||||||
.DocSearch-Input::placeholder {
|
.DocSearch-Input::placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: var(--chakra-fontSizes-md)
|
font-size: var(--chakra-fontSizes-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
|
.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
|
||||||
|
@ -155,7 +155,7 @@ svg[aria-label="Algolia"] * {
|
||||||
|
|
||||||
.DocSearch-Button::before {
|
.DocSearch-Button::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "search";
|
content: 'search';
|
||||||
font-size: var(--chakra-fontSizes-md);
|
font-size: var(--chakra-fontSizes-md);
|
||||||
color: var(--chakra-colors-bg);
|
color: var(--chakra-colors-bg);
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
@ -168,7 +168,8 @@ svg[aria-label="Algolia"] * {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile modal styling */
|
/* Mobile modal styling */
|
||||||
.DocSearch-Container, .DocSearch-Modal {
|
.DocSearch-Container,
|
||||||
|
.DocSearch-Modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 1rem;
|
inset: 1rem;
|
||||||
max-width: calc(100vw - 2rem);
|
max-width: calc(100vw - 2rem);
|
||||||
|
|
Loading…
Reference in New Issue