amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 04:12:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

more subtle search

Browse Source
This commit is contained in:
Dan Lebo
2023-02-16 11:22:52 -08:00
parent da41af7521
commit 734b5d7129
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
beta/src/components/Layout/TopNav/TopNav.tsx
View File

@@ -267,14 +267,14 @@ export default function TopNav({
</button>
<div className="3xl:flex-1 mr-0 sm:mr-2.5 3xl:mr-0 flex align-center">
<NextLink href="/">
<a className="inline-flex text-lg font-normal items-center text-primary dark:text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg">
<a className="inline-flex text-lg font-normal items-center text-primary dark:text-primary-dark py-1.5 whitespace-nowrap outline-link px-1.5 rounded-lg">
<Logo className="text-sm mr-2 w-8 h-8 text-link dark:text-link-dark" />
React
</a>
</NextLink>
</div>
</div>
<div className="hidden md:flex flex-1 justify-center items-center w-full 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
<div className="hidden md:flex flex-1 justify-start items-center w-auto 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
<Search />
</div>
<div className="text-base justify-center items-center gap-2.5 flex 3xl:flex-1 flex-row 3xl:justify-end">

17
beta/src/components/Search.tsx
View File

@@ -152,25 +152,30 @@ export function Search({
<button
aria-label="Search"
type="button"
className="flex md:hidden w-12 h-12 items-center rounded-full items-center justify-center hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"
className="flex md:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"
onClick={onOpen}>
<IconSearch className="align-middle w-5 h-5" />
</button>
)}
<div
className={cn(
'hidden mx-2 h-8 w-px bg-border dark:bg-border-dark',
fullsize ? 'flex' : 'hidden md:flex'
)}
/>
<button
type="button"
className={cn(
'3xl:w-[56rem] mx-2 3xl:mx-0 w-full relative pl-4 pr-1 py-1 h-10 bg-secondary-button dark:bg-gray-80 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-left w-full text-gray-30 rounded-full align-middle text-base',
'3xl:w-[56rem] mx-2 3xl:mx-0 outline-link dark:outline-link-dark relative px-2.5 py-2 betterhover:hover:bg-opacity-80 pointer items-center text-left justify-start text-secondary dark:text-secondary-dark align-middle text-base rounded-lg hover:bg-primary/5 hover:dark:bg-primary-dark/5',
fullsize ? 'flex' : 'hidden md:flex'
)}
onClick={onOpen}>
<IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
<IconSearch className="mr-2.5 align-middle text-secondary dark:text-secondary-dark shrink-0 group-betterhover:hover:text-gray-70" />
Search
<span className="ml-auto hidden sm:flex item-center mr-1">
{/* <span className="ml-4 hidden sm:flex item-center mr-1">
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</span>
</span> */}
</button>
{isShowing &&