toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-28 12:52:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add interaction to search button

Browse Source
This commit is contained in:
QiShaoXuan 2023-01-11 15:12:18 +08:00
parent 926bb7fd14
commit b6b1ae0224
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/app/src/components/header/QuickSearchButton.tsx
View File

@ -4,6 +4,20 @@ import { Tooltip } from '@/ui/tooltip';
import { ArrowDownIcon } from '@blocksuite/icons';
import { useModal } from '@/providers/GlobalModalProvider';
import { useTranslation } from '@affine/i18n';
import { styled } from '@/styles';
const StyledIconButtonWithAnimate = styled(IconButton)(() => {
return {
svg: {
transition: 'transform 0.15s ease-in-out',
},
':hover': {
svg: {
transform: 'translateY(3px)',
},
},
};
});
export const QuickSearchButton = ({
onClick,
...props
@ -12,7 +26,7 @@ export const QuickSearchButton = ({
const { t } = useTranslation();
return (
<Tooltip content={t('Switch to')} placement="bottom">
<IconButton
<StyledIconButtonWithAnimate
data-testid="header-quickSearchButton"
{...props}
onClick={e => {
@ -21,7 +35,7 @@ export const QuickSearchButton = ({
}}
>
<ArrowDownIcon />
</IconButton>
</StyledIconButtonWithAnimate>
</Tooltip>
);
};