Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 1x 1x 1x 1x 1x 1x 1x 1x 78x 78x 78x 78x 78x 78x 27x 78x 78x 27x 27x 51x 51x 51x 51x 51x 51x 68x 78x 78x 78x 78x 78x 78x 78x 78x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 28x 78x 78x | // Libs
import { useEffect, useState } from 'react';
// Constants
import {
getShortcut,
KEYBOARD_SHORTCUT,
SEARCH_PLACEHOLDER,
} from '@shared/constants';
import { SEARCH_STYLES } from '@/constants';
// Utils
import { combineClasses } from '@shared/utils';
// Icons
import SearchIcon from '@shared/icons/SearchIcon';
// Components
import { Button, Typography } from '@shared/ui';
// Hooks
import { useBreakpoint } from '@shared/hooks';
interface SearchTriggerProps {
isSearchOpen?: boolean;
handleOpenSearchModal: () => void;
}
export const SearchTrigger = ({
isSearchOpen = false,
handleOpenSearchModal,
}: SearchTriggerProps) => {
const [isMounted, setIsMounted] = useState(false);
const { isTablet } = useBreakpoint();
useEffect(() => {
setIsMounted(true);
}, []);
if (!isMounted) {
return null;
}
return (
<Button
data-testid="search-trigger"
variant="ghost"
className={combineClasses(
SEARCH_STYLES.base,
isTablet && SEARCH_STYLES.tablet,
)}
aria-label="Open search dialog"
aria-controls="search-dialog"
aria-haspopup="dialog"
role="combobox"
aria-expanded={isSearchOpen}
onClick={handleOpenSearchModal}
>
{isTablet ? (
<div
className={combineClasses(
'flex items-center justify-between',
'size-full',
)}
>
<Typography
data-testid="search-placeholder"
as="span"
size="xs"
weight="normal"
aria-hidden="true"
className="text-frost-500 dark:text-gray-400"
>
{SEARCH_PLACEHOLDER}
</Typography>
<Typography
data-testid="search-shortcut"
as="span"
size="3xs"
weight="normal"
aria-hidden="true"
aria-label={`Keyboard shortcut: ${getShortcut(
KEYBOARD_SHORTCUT.SEARCH,
)}`}
className={combineClasses(
'flex-center w-15 h-6 rounded-md px-3.5',
'bg-white text-frost-900 hidden sm:flex sm:dark:bg-gray-400 dark:text-gray-700',
)}
>
{getShortcut(KEYBOARD_SHORTCUT.SEARCH)}
</Typography>
</div>
) : (
<SearchIcon className="text-frost-900 dark:text-gray-400" />
)}
</Button>
);
};
|