TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-04 17:04:59 +03:00
Code Issues Projects Releases Wiki Activity

Made the search icon switch to clear button

Browse Source
This commit is contained in:
Djordje Vlaisavljevic 2022-07-07 16:17:47 +02:00
parent c20b0bfa35
commit f63d550f9c
1 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
ghost/sodo-search/src/components/PopupModal.js
View File

@ -1,7 +1,7 @@
import Frame from './Frame';
import AppContext from '../AppContext';
import {ReactComponent as SearchIcon} from '../icons/search.svg';
import {ReactComponent as CloseIcon} from '../icons/close.svg';
import {ReactComponent as CloseIcon} from '../icons/x.svg';
import {useContext, useEffect, useMemo, useRef, useState} from 'react';
import {getBundledCssLink} from '../utils/helpers';
@ -18,7 +18,7 @@ const tagsData = [
const postsData = [
{
title: 'How to ergonomically optimize your <span class=\'font-bold\'>work</span>space',
title: 'How to ergonomically optimize your <span class=\'font-bold\'>work</span>space fkds gfd jgkf gjg jkfg fjkg fkgj fkgjf jgkf jgkfj <span class=\'font-bold\'>work</span> gkjf jgkfj ',
excerpt: 'Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.'
},
{
@ -141,7 +141,11 @@ function SearchBox() {
return (
<div className={className} ref={containerRef}>
<SearchIcon className='mr-3 text-neutral-900' alt='Search' />
<div className='flex items-center justify-center w-4 h-4 mr-3'>
<SearchClearIcon />
</div>
{/* <SearchIcon className='mr-3 text-neutral-900' alt='Search' /> */}
<input
ref={inputRef}
value={searchValue || ''}
@ -158,31 +162,47 @@ function SearchBox() {
className='grow -my-5 py-5 -ml-3 pl-3 text-[1.65rem] focus-visible:outline-none placeholder:text-gray-400 outline-none'
placeholder='Search posts, tags, authors..'
/>
<ClearButton />
<CloseIcon className='ml-4 text-neutral-300 cursor-pointer w-5 h-5 sm:hidden' alt='Close' />
</div>
);
}
function ClearButton() {
function SearchClearIcon() {
const {searchValue = '', dispatch} = useContext(AppContext);
if (!searchValue) {
return null;
return (
<SearchIcon className='text-neutral-900' alt='Search' />
);
}
return (
<button
className='ml-3 text-sm text-neutral-500 underline' alt='Clear'
onClick={() => {
<button alt='Clear' className='-mb-[1px]' onClick={() => {
dispatch('update', {
searchValue: ''
});
}}
>
Clear
}}>
<CloseIcon className='text-neutral-900 hover:text-neutral-500 h-3 w-3' />
</button>
);
}
// function ClearButton() {
// const {searchValue = '', dispatch} = useContext(AppContext);
// if (!searchValue) {
// return null;
// }
// return (
// <button
// className='ml-3 text-sm text-neutral-500 underline' alt='Clear'
// onClick={() => {
// dispatch('update', {
// searchValue: ''
// });
// }}
// >
// Clear
// </button>
// );
// }
function TagListItem({tag, selectedResult, setSelectedResult}) {
const {name, url, id} = tag;
let className = 'flex items-center py-3 -mx-4 sm:-mx-7 px-4 sm:px-7 cursor-pointer';