Skip to content

Update Search Component #369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arghyaxcodes merged 3 commits into from
Oct 12, 2022
Merged

Update Search Component #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
59bf69c
Update Search.js
arghyaxcodes Oct 12, 2022
8a93149
Create SearchIcon.js
arghyaxcodes Oct 12, 2022
8c8f9cc
Update docsearch.css
arghyaxcodes Oct 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions src/components/Search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
import { SearchIcon } from '@heroicons/react/outline'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useCallback, useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import SearchIcon from '@/components/icons/SearchIcon'

const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control']
const ACTION_KEY_APPLE = ['⌘', 'Command']
Expand Down Expand Up @@ -69,16 +69,19 @@ export function Search() {
type="button"
ref={searchButtonRef}
onClick={onOpen}
className="group flex w-full items-center space-x-3 rounded-md border-2 border-gray-200 bg-gray-100 py-1.5 px-1.5 font-medium leading-6 text-gray-500 hover:text-gray-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 sm:space-x-4 sm:px-4 lg:px-4"
className="group flex w-full items-center justify-between rounded-full border-2 border-gray-200 py-1.5 px-1.5 font-medium leading-6 text-gray-500 shadow-inner hover:text-gray-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 sm:space-x-4 sm:rounded-md sm:px-4 lg:px-4"
>
<SearchIcon className="h-6 w-6 text-blue-400 transition-colors duration-200 group-hover:text-blue-500" />
<span>
<span className="md:hidden lg:hidden">Search</span>
<span className="hidden sm:inline">Quick search for anything</span>
</span>
<div className="flex items-center justify-start">
<SearchIcon className="h-6 w-6 text-blue-400 transition-colors duration-200 group-hover:text-blue-500" />
<span className={router.pathname === '/' ? 'sm:ml-2' : 'ml-2'}>
<span className="sm:hidden lg:hidden">{router.pathname === '/' ? '' : 'Search'}</span>
<span className="hidden sm:inline">Quick search for anything</span>
</span>
</div>

<span
style={{ opacity: browserDetected ? '1' : '0' }}
className="hidden rounded-md border border-gray-400 py-0.5 px-1.5 text-sm leading-5 text-gray-500 sm:block"
className="hidden justify-end rounded-md border border-gray-400 py-0.5 px-1.5 text-sm leading-5 text-gray-500 sm:block"
>
<span className="sr-only">Press </span>
<kbd className="font-sans">
Expand Down Expand Up @@ -107,6 +110,7 @@ export function Search() {
},
}}
hitComponent={Hit}
hitsPerPage={10}
transformItems={(items) => {
return items.map((item) => {
// We transform the absolute URL into a relative URL to
Expand Down
17 changes: 17 additions & 0 deletions src/components/icons/SearchIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export default function SearchIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
)
}
2 changes: 1 addition & 1 deletion src/css/docsearch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
flex: none;
width: 1.5rem;
height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDE5QzE1LjQxODMgMTkgMTkgMTUuNDE4MyAxOSAxMUMxOSA2LjU4MTcyIDE1LjQxODMgMyAxMSAzQzYuNTgxNzIgMyAzIDYuNTgxNzIgMyAxMUMzIDE1LjQxODMgNi41ODE3MiAxOSAxMSAxOVoiIHN0cm9rZT0iIzM4ODRGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIxIDIxTDE2LjY1IDE2LjY1IiBzdHJva2U9IiMzODg0RkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
background-size: 100%;
}

Expand Down