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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 40x 40x 40x 40x 20x 20x 20x 20x 20x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 20x 20x 20x 20x | import { ReactNode } from 'react';
// Types
import { ActionGroup, ActionItemType } from '@shared/types';
// Utils
import { combineClasses } from '@shared/utils';
// Icons
import { ChartIcon, CookingIcon, MessageIcon } from '@/components/icons/reacts';
// Components
import { Button } from '../common/Button';
interface SearchSuggestionsProps {
suggestions?: ActionItemType[];
onSelect: (item: ActionItemType) => void;
}
interface SuggestionStyle {
icon: ReactNode;
badge: string;
hover: string;
}
const SUGGESTION_STYLES: Partial<Record<ActionGroup, SuggestionStyle>> = {
[ActionGroup.STATISTIC]: {
icon: <ChartIcon className="size-3.5" />,
badge: 'bg-primary-100 text-primary-700',
hover: 'hover:border-primary-700',
},
[ActionGroup.FEEDBACK]: {
icon: <MessageIcon className="size-3.5" />,
badge: 'bg-golden-100 text-golden',
hover: 'hover:border-golden-600',
},
[ActionGroup.MENU]: {
icon: <CookingIcon className="size-3.5" />,
badge: 'bg-grass-100 text-grass',
hover: 'hover:border-grass',
},
};
export const SearchSuggestions = ({
suggestions = [],
onSelect,
}: SearchSuggestionsProps) => {
if (!suggestions.length) return null;
const handleSelect = (item: ActionItemType) => () => onSelect(item);
return (
<div className="pb-3.5 pl-7.5 pr-7 pt-3">
<div className="flex flex-wrap gap-2">
{suggestions.map((item) => {
const suggestionStyle = SUGGESTION_STYLES[item.group];
return (
<Button
key={item.type}
onClick={handleSelect(item)}
className={combineClasses(
'h-8 max-w-full gap-1.5 rounded-full border border-border-500 bg-white py-0 pl-1 pr-3.5',
'text-3xs font-medium text-frost-900 transition-colors duration-200',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-700/50',
suggestionStyle?.hover ?? 'hover:border-primary-700',
)}
>
{suggestionStyle && (
<span
className={combineClasses(
'flex size-6 shrink-0 items-center justify-center rounded-full',
suggestionStyle.badge,
)}
>
{suggestionStyle.icon}
</span>
)}
<span className="truncate">{item.label}</span>
</Button>
);
})}
</div>
</div>
);
};
|