Skip to content

Commit 5bae452

Browse files
arghyaxcodesarghyaxcodes
authored
Merge pull request #369 from javaistic/update-search-component
Update Search Component
2 parents 0bb1103 + 8c8f9cc commit 5bae452

File tree

3 files changed

+30
-9
lines changed

3 files changed

+30
-9
lines changed

‎src/components/Search.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
2-
import { SearchIcon } from '@heroicons/react/outline'
32
import Head from 'next/head'
43
import Link from 'next/link'
54
import { useRouter } from 'next/router'
65
import { useCallback, useEffect, useRef, useState } from 'react'
76
import { createPortal } from 'react-dom'
7+
import SearchIcon from '@/components/icons/SearchIcon'
88

99
const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control']
1010
const ACTION_KEY_APPLE = ['⌘', 'Command']
@@ -69,16 +69,19 @@ export function Search() {
6969
type="button"
7070
ref={searchButtonRef}
7171
onClick={onOpen}
72-
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"
72+
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"
7373
>
74-
<SearchIcon className="h-6 w-6 text-blue-400 transition-colors duration-200 group-hover:text-blue-500" />
75-
<span>
76-
<span className="md:hidden lg:hidden">Search</span>
77-
<span className="hidden sm:inline">Quick search for anything</span>
78-
</span>
74+
<div className="flex items-center justify-start">
75+
<SearchIcon className="h-6 w-6 text-blue-400 transition-colors duration-200 group-hover:text-blue-500" />
76+
<span className={router.pathname === '/' ? 'sm:ml-2' : 'ml-2'}>
77+
<span className="sm:hidden lg:hidden">{router.pathname === '/' ? '' : 'Search'}</span>
78+
<span className="hidden sm:inline">Quick search for anything</span>
79+
</span>
80+
</div>
81+
7982
<span
8083
style={{ opacity: browserDetected ? '1' : '0' }}
81-
className="hidden rounded-md border border-gray-400 py-0.5 px-1.5 text-sm leading-5 text-gray-500 sm:block"
84+
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"
8285
>
8386
<span className="sr-only">Press </span>
8487
<kbd className="font-sans">
@@ -107,6 +110,7 @@ export function Search() {
107110
},
108111
}}
109112
hitComponent={Hit}
113+
hitsPerPage={10}
110114
transformItems={(items) => {
111115
return items.map((item) => {
112116
// We transform the absolute URL into a relative URL to

‎src/components/icons/SearchIcon.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export default function SearchIcon(props) {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 24 24"
6+
fill="none"
7+
stroke="currentColor"
8+
strokeWidth="2"
9+
strokeLinecap="round"
10+
strokeLinejoin="round"
11+
{...props}
12+
>
13+
<circle cx="11" cy="11" r="8"></circle>
14+
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
15+
</svg>
16+
)
17+
}

‎src/css/docsearch.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
flex: none;
9292
width: 1.5rem;
9393
height: 1.5rem;
94-
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");
94+
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDE5QzE1LjQxODMgMTkgMTkgMTUuNDE4MyAxOSAxMUMxOSA2LjU4MTcyIDE1LjQxODMgMyAxMSAzQzYuNTgxNzIgMyAzIDYuNTgxNzIgMyAxMUMzIDE1LjQxODMgNi41ODE3MiAxOSAxMSAxOVoiIHN0cm9rZT0iIzM4ODRGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIxIDIxTDE2LjY1IDE2LjY1IiBzdHJva2U9IiMzODg0RkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
9595
background-size: 100%;
9696
}
9797

0 commit comments

Comments
 (0)