upstream #1
| @@ -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> | ||||
|   | ||||
| @@ -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
									
								
							
							
						
						
									
										34
									
								
								components/SearchButton.tsx
									
									
									
									
									
										Normal 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 | ||||
| @@ -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 | ||||
|   | ||||
| @@ -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
									
									
									
									
									
								
							
							
						
						
									
										20
									
								
								yarn.lock
									
									
									
									
									
								
							| @@ -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 | ||||
|   | ||||
		Reference in New Issue
	
	Block a user