linting

src/components/UI/Header.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react';
 import NextLink from 'next/link';
 
-import { Search } from '../UI'
+import { Search } from '../UI';
 import { MoonIcon, SunIcon } from '../UI/icons';
 
 import { HeaderButtons } from './';

src/components/UI/Search.tsx

@@ -3,16 +3,12 @@ import { DocSearch } from '@docsearch/react';
 import '@docsearch/css';
 
 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
   return (
-    <DocSearch
+    <DocSearch appId='R2IYF7ETH7' apiKey='599cec31baffa4868cae4e79f180729b' indexName='docsearch' />
-      appId="R2IYF7ETH7"
-      apiKey="599cec31baffa4868cae4e79f180729b"
-      indexName="docsearch"
-    />
   );
-}
+};

src/components/layouts/MobileMenu.tsx

@@ -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 { HamburgerIcon } from '../UI/icons';

src/theme/search.css

@@ -76,7 +76,7 @@
   background: var(--chakra-colors-bg);
 }
 
-svg[aria-label="Algolia"] * {
+svg[aria-label='Algolia'] * {
   fill: var(--chakra-colors-body);
 }
 
@@ -86,16 +86,16 @@ svg[aria-label="Algolia"] * {
   border-radius: 0;
 }
 
-.DocSearch-Hit[aria-selected="true"] a {
+.DocSearch-Hit[aria-selected='true'] a {
   background: var(--chakra-colors-secondary);
   color: var(--chakra-colors-button-bg);
 }
 
-.DocSearch-Hit[aria-selected="false"] a {
+.DocSearch-Hit[aria-selected='false'] a {
   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);
 }
 
@@ -120,8 +120,8 @@ svg[aria-label="Algolia"] * {
   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-path mark,
 .DocSearch-Prefill {
@@ -137,7 +137,7 @@ svg[aria-label="Algolia"] * {
 
 .DocSearch-Input::placeholder {
   font-style: italic;
-  font-size: var(--chakra-fontSizes-md)
+  font-size: var(--chakra-fontSizes-md);
 }
 
 .DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
@@ -155,7 +155,7 @@ svg[aria-label="Algolia"] * {
 
   .DocSearch-Button::before {
     position: absolute;
-    content: "search";
+    content: 'search';
     font-size: var(--chakra-fontSizes-md);
     color: var(--chakra-colors-bg);
     inset: 0;
@@ -168,7 +168,8 @@ svg[aria-label="Algolia"] * {
   }
 
   /* Mobile modal styling */
-  .DocSearch-Container, .DocSearch-Modal {
+  .DocSearch-Container,
+  .DocSearch-Modal {
     position: fixed;
     inset: 1rem;
     max-width: calc(100vw - 2rem);
@@ -177,5 +178,5 @@ svg[aria-label="Algolia"] * {
 
   .DocSearch-Cancel {
     color: var(--chakra-colors-primary);
-  }  
+  }
 }