jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add search component

Browse Source
This commit is contained in:
Timothy Lin 2023-07-30 17:20:28 +08:00
parent 3dcb7e56f9
commit d94c31ddea
6 changed files with 65 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/Header.tsx
View File

@ -4,6 +4,7 @@ import Logo from '@/data/logo.svg'
import Link from './Link'
import MobileNav from './MobileNav'
import ThemeSwitch from './ThemeSwitch'
import SearchButton from './SearchButton'
const Header = () => {
return (
@ -24,20 +25,19 @@ const Header = () => {
</div>
</Link>
</div>
<div className="flex items-center text-base leading-5">
<div className="hidden sm:block">
{headerNavLinks
.filter((link) => link.href !== '/')
.map((link) => (
<Link
key={link.title}
href={link.href}
className="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4"
>
{link.title}
</Link>
))}
</div>
<div className="flex items-center leading-5 space-x-4 sm:space-x-6">
{headerNavLinks
.filter((link) => link.href !== '/')
.map((link) => (
<Link
key={link.title}
href={link.href}
className="hidden sm:block font-medium text-gray-900 dark:text-gray-100"
>
{link.title}
</Link>
))}
<SearchButton />
<ThemeSwitch />
<MobileNav />
</div>

18
components/MobileNav.tsx
View File

@ -20,17 +20,13 @@ const MobileNav = () => {
}
return (
<div className="sm:hidden">
<button
className="ml-1 mr-1 h-8 w-8 rounded py-1"
aria-label="Toggle Menu"
onClick={onToggleNav}
>
<>
<button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="text-gray-900 dark:text-gray-100"
className="text-gray-900 dark:text-gray-100 h-8 w-8"
>
<path
fillRule="evenodd"
@ -45,11 +41,7 @@ const MobileNav = () => {
}`}
>
<div className="flex justify-end">
<button
className="mr-5 mt-11 h-8 w-8 rounded"
aria-label="Toggle Menu"
onClick={onToggleNav}
>
<button className="mr-8 mt-11 h-8 w-8" aria-label="Toggle Menu" onClick={onToggleNav}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
@ -78,7 +70,7 @@ const MobileNav = () => {
))}
</nav>
</div>
</div>
</>
)
}

34
components/SearchButton.tsx Normal file
View File

@ -0,0 +1,34 @@
import { AlgoliaButton } from 'pliny/search/AlgoliaButton'
import { KBarButton } from 'pliny/search/KBarButton'
import siteMetadata from '@/data/siteMetadata'
const SearchButton = () => {
if (
siteMetadata.search &&
(siteMetadata.search.provider === 'algolia' || siteMetadata.search.provider === 'kbar')
) {
const SearchButtonWrapper =
siteMetadata.search.provider === 'algolia' ? AlgoliaButton : KBarButton
return (
<SearchButtonWrapper aria-label="Search">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="text-gray-900 dark:text-gray-100 h-6 w-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
/>
</svg>
</SearchButtonWrapper>
)
}
}
export default SearchButton

3
components/ThemeSwitch.tsx
View File

@ -17,14 +17,13 @@ const ThemeSwitch = () => {
return (
<button
aria-label="Toggle Dark Mode"
className="ml-1 mr-1 h-8 w-8 rounded p-1 sm:ml-4"
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="text-gray-900 dark:text-gray-100"
className="text-gray-900 dark:text-gray-100 h-6 w-6"
>
{mounted && theme === 'dark' ? (
<path

2
package.json
View File

@ -23,7 +23,7 @@
"next": "13.4.12",
"next-contentlayer": "0.3.4",
"next-themes": "^0.2.1",
"pliny": "0.1.0",
"pliny": "0.1.1",
"postcss": "^8.4.24",
"react": "18.2.0",
"react-dom": "18.2.0",

20
yarn.lock
View File

@ -7024,9 +7024,9 @@ __metadata:
languageName: node
linkType: hard
"kbar@npm:0.1.0-beta.40":
version: 0.1.0-beta.40
resolution: "kbar@npm:0.1.0-beta.40"
"kbar@npm:0.1.0-beta.41":
version: 0.1.0-beta.41
resolution: "kbar@npm:0.1.0-beta.41"
dependencies:
"@radix-ui/react-portal": ^1.0.1
command-score: ^0.1.2
@ -7036,7 +7036,7 @@ __metadata:
peerDependencies:
react: ^16.0.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
checksum: 0c2cbe520e48ba210cbcfd04529178a772c112ea8e674953bbb6343f74109bf3fd3cb8d23bb4235093f04018b28e8e2e485852d23c39dfe96eab6189cc82c361
checksum: 4ce40d59c27b0a9367fbface0780f906c20109bc279b038041e51b0f97fee50261599fda8cfc5ba8e45550589639517f580935ec6443e835081057d9bb5a6e54
languageName: node
linkType: hard
@ -8951,9 +8951,9 @@ __metadata:
languageName: node
linkType: hard
"pliny@npm:0.1.0":
version: 0.1.0
resolution: "pliny@npm:0.1.0"
"pliny@npm:0.1.1":
version: 0.1.1
resolution: "pliny@npm:0.1.1"
dependencies:
"@docsearch/react": ^3.5.0
"@giscus/react": ^2.3.0
@ -8963,7 +8963,7 @@ __metadata:
github-slugger: ^1.4.0
image-size: 1.0.0
js-yaml: 4.1.0
kbar: 0.1.0-beta.40
kbar: 0.1.0-beta.41
next-contentlayer: ^0.3.4
next-themes: ^0.2.1
remark: ^14.0.2
@ -8972,7 +8972,7 @@ __metadata:
next: ">=13.0.0"
react: ^17.0.2 || ^18.0.0
react-dom: ^17.0.2 || ^18.0.0
checksum: 73b121459a512f75e54160f40d4054685e9ddf134915ecd96a08babe98bfe66eec447abdf93ee8f1d2c3c5b205a0426c44534509e7a51858503703cef3f7f49d
checksum: 6d1ff65e4684ceb06983c6ecb94fa29b1b2da9047a2ba2c23bbad1126ba9e6f9cfd24e663e2fe828a3397bfa673088796f5cf932a78e2b900525f9190a231182
languageName: node
linkType: hard
@ -10728,7 +10728,7 @@ __metadata:
next: 13.4.12
next-contentlayer: 0.3.4
next-themes: ^0.2.1
pliny: 0.1.0
pliny: 0.1.1
postcss: ^8.4.24
prettier: ^3.0.0
prettier-plugin-tailwindcss: ^0.4.1