diff --git a/src/components/search-card/index.tsx b/src/components/search-card/index.tsx
index e2a040729..ca821bdd1 100644
--- a/src/components/search-card/index.tsx
+++ b/src/components/search-card/index.tsx
@@ -1,6 +1,6 @@
import { Box, Flex, Text, IconCaret } from '@vtex/brand-ui'
import { IconComponent } from 'utils/typings/types'
-import type { SearchDataItemProps } from 'pages/search'
+import type { SearchDataItemProps } from 'components/search-results'
import { methodStyle } from './functions'
import styles from './styles'
diff --git a/src/components/search-results/index.tsx b/src/components/search-results/index.tsx
new file mode 100644
index 000000000..2388e9fa8
--- /dev/null
+++ b/src/components/search-results/index.tsx
@@ -0,0 +1,68 @@
+import { useRouter } from 'next/router'
+import { Box, Text } from '@vtex/brand-ui'
+
+import { MethodType } from 'utils/typings/unionTypes'
+
+import { getIcon } from 'utils/constants'
+import SearchCard from 'components/search-card'
+
+import { ActionType } from 'components/last-updates-card/functions'
+import styles from './styles'
+
+export interface SearchDataItemProps {
+ doc: string
+ title: string
+ description: string
+ filters?: string[]
+ http?: MethodType
+ actionType?: ActionType
+}
+
+const SearchResults = () => {
+ const router = useRouter()
+
+ const searchData: SearchDataItemProps[] = [
+ {
+ doc: 'API Guides',
+ title: 'SKU Selector',
+ description:
+ 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
+ filters: ['label', 'label', 'label'],
+ },
+ {
+ doc: 'API Reference',
+ title: 'GET SKU seller',
+ http: 'POST',
+ description:
+ 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
+ filters: ['label', 'label', 'label'],
+ },
+ {
+ doc: 'Release Notes',
+ title: 'SKU Selector',
+ description:
+ 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
+ actionType: 'removed',
+ },
+ ]
+ return (
+
+
+ Showing {searchData.length} results for "{router.query.keyword}" in all
+ results
+
+
+
+ {searchData.map((result, index) => (
+
+ ))}
+
+
+ )
+}
+
+export default SearchResults
diff --git a/src/components/search-results/styles.ts b/src/components/search-results/styles.ts
new file mode 100644
index 000000000..287db36ad
--- /dev/null
+++ b/src/components/search-results/styles.ts
@@ -0,0 +1,23 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+const resultContainer: SxStyleProp = {
+ width: '720px',
+ paddingTop: '64px',
+ hr: {
+ marginTop: '16px',
+ marginBottom: '32px',
+ borderTop: 'none',
+ borderColor: '#DDDDDD',
+ },
+}
+
+const resultText: SxStyleProp = {
+ mb: '16px',
+ fontSize: '16px',
+ lineHeight: '22px',
+}
+
+export default {
+ resultContainer,
+ resultText,
+}
diff --git a/src/components/search-section/index.tsx b/src/components/search-section/index.tsx
index fffaa6a17..184fd27e1 100644
--- a/src/components/search-section/index.tsx
+++ b/src/components/search-section/index.tsx
@@ -4,12 +4,21 @@ import type { DocDataElement, UpdatesDataElement } from 'utils/typings/types'
import styles from './styles'
interface SearchSectionProps {
- dataElement: DocDataElement | UpdatesDataElement
- index: number
+ dataElement: DocDataElement | UpdatesDataElement | null
+ index?: number
}
const SearchSection = ({ dataElement, index }: SearchSectionProps) => {
- return (
+ return !dataElement ? (
+
+
+ All results
+
+
+ 25
+
+
+ ) : (
{
return (
-
-
- All results
-
-
- 25
-
-
+
{documentationData.map((docsIcon, index) => (
))}
diff --git a/src/components/search-sections/styles.ts b/src/components/search-sections/styles.ts
index 9d19dc50a..34a6d1f47 100644
--- a/src/components/search-sections/styles.ts
+++ b/src/components/search-sections/styles.ts
@@ -19,45 +19,8 @@ const docsSection: SxStyleProp = {
borderBottom: '1px solid #E7E9EE',
}
-const allResultsContainer: SxStyleProp = {
- justifyContent: 'space-between',
- padding: '8px',
- mb: '8px',
- cursor: 'pointer',
- ':active, :hover': {
- backgroundColor: '#F8F7FC',
- '.search-section-title': {
- color: '#000711',
- },
- '.search-section-count': {
- background: '#E7E9EE',
- },
- },
-}
-
-const allResultsText: SxStyleProp = {
- fontSize: '12px',
- lineHeight: '16px',
- ml: '24px',
- fontWeight: 'bold',
- color: '#0C1522',
-}
-
-const sectionCount: SxStyleProp = {
- background: '#F8F7FC',
- borderRadius: '24px',
- width: 'auto',
- textAlign: 'center',
- px: '8px',
- fontSize: '12px',
- lineHeight: '16px',
-}
-
export default {
container,
notesSection,
docsSection,
- allResultsText,
- allResultsContainer,
- sectionCount,
}
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
index 23986f9f9..da802f841 100644
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -1,71 +1,19 @@
-import { useRouter } from 'next/router'
-import { Flex, Box, Text } from '@vtex/brand-ui'
+import { Flex } from '@vtex/brand-ui'
import styles from 'styles/search-page'
-
-import { getIcon } from 'utils/constants'
-import { MethodType } from 'utils/typings/unionTypes'
-import { ActionType } from 'components/last-updates-card/functions'
-
-import SideBar from 'components/sidebar'
-import SearchCard from 'components/search-card'
import SearchSections from 'components/search-sections'
-
-export interface SearchDataItemProps {
- doc: string
- title: string
- description: string
- filters?: string[]
- http?: MethodType
- actionType?: ActionType
-}
+import Sidebar from 'components/sidebar'
+import SearchContextProvider from 'utils/contexts/searchContext'
+import SearchResults from 'components/search-results'
const SearchPage = () => {
- const router = useRouter()
- const searchData: SearchDataItemProps[] = [
- {
- doc: 'API Guides',
- title: 'SKU Selector',
- description:
- 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
- filters: ['label', 'label', 'label'],
- },
- {
- doc: 'API Reference',
- title: 'GET SKU seller',
- http: 'POST',
- description:
- 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
- filters: ['label', 'label', 'label'],
- },
- {
- doc: 'Release Notes',
- title: 'SKU Selector',
- description:
- 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.',
- actionType: 'removed',
- },
- ]
return (
-
-
-
-
-
- Showing {searchData.length} results for "{router.query.keyword}" in
- all results
-
-
-
- {searchData.map((result, index) => (
-
- ))}
-
-
-
+
+
+
+
+
+
+
)
}
diff --git a/src/styles/search-page.ts b/src/styles/search-page.ts
index 6846c2648..aeba2ed81 100644
--- a/src/styles/search-page.ts
+++ b/src/styles/search-page.ts
@@ -5,25 +5,6 @@ const body: SxStyleProp = {
background: '#FFFFFF',
}
-const resultContainer: SxStyleProp = {
- width: '720px',
- paddingTop: '64px',
- hr: {
- marginTop: '16px',
- marginBottom: '32px',
- borderTop: 'none',
- borderColor: '#DDDDDD',
- },
-}
-
-const resultText: SxStyleProp = {
- mb: '16px',
- fontSize: '16px',
- lineHeight: '22px',
-}
-
export default {
body,
- resultContainer,
- resultText,
}
diff --git a/src/utils/contexts/searchContext.tsx b/src/utils/contexts/searchContext.tsx
new file mode 100644
index 000000000..fa3814be4
--- /dev/null
+++ b/src/utils/contexts/searchContext.tsx
@@ -0,0 +1,32 @@
+import { createContext, Dispatch, SetStateAction, useState } from 'react'
+import type { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes'
+
+type FilterType = DocumentationTitle | UpdatesTitle | ''
+
+type SearchContextType = {
+ filterSelectedSection: FilterType
+ changeFilterSelectedSection: Dispatch>
+}
+
+export const SearchContext = createContext({
+ filterSelectedSection: '',
+ changeFilterSelectedSection: () => undefined,
+})
+
+const SearchContextProvider: React.FC = ({ children }) => {
+ const [filterSelectedSection, changeFilterSelectedSection] =
+ useState('')
+
+ return (
+
+ {children}
+
+ )
+}
+
+export default SearchContextProvider
diff --git a/yarn.lock b/yarn.lock
index 34406607f..f44281a14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -414,9 +414,14 @@
dependencies:
"glob" "7.1.7"
-"@next/swc-win32-x64-msvc@12.1.0":
- "integrity" "sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg=="
- "resolved" "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz"
+"@next/swc-linux-x64-gnu@12.1.0":
+ "integrity" "sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A=="
+ "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.0.tgz"
+ "version" "12.1.0"
+
+"@next/swc-linux-x64-musl@12.1.0":
+ "integrity" "sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw=="
+ "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.0.tgz"
"version" "12.1.0"
"@nodelib/fs.scandir@2.1.5":