5d49352f93
* feat(search): redesign search filters as bubbles like mobile * fix(search): decouble Bubble component styling - animate the bubles on search - decouple the Bubbles styling using utility classes - improve styling of the new search options * fix(Bubble): remove duplicated utility classes * fix(bubble): use color neutral utility * fix(bubble): increase gaps and justify center * fix(Bubble): increase height and decrease gap * fix(search): improve usability on search options - increase animation timing to match mobile - properly center cancel button - only show cancel on text input - prevent search options from disappearing when clicking with no text * fix(search-options): improve spacing and auto size * fix(search-options): improve animation and decrease gap
26 lines
652 B
TypeScript
26 lines
652 B
TypeScript
interface BubbleProperties {
|
|
label: string;
|
|
selected: boolean;
|
|
onSelect: () => void;
|
|
}
|
|
|
|
const styles = {
|
|
base: 'px-2 py-1.5 text-center rounded-full cursor-pointer transition border-1 border-solid active:border-info active:bg-info active:color-neutral-contrast',
|
|
unselected: 'color-neutral border-secondary',
|
|
selected: 'border-info bg-info color-neutral-contrast',
|
|
};
|
|
|
|
const Bubble = ({ label, selected, onSelect }: BubbleProperties) => (
|
|
<span
|
|
role="tab"
|
|
className={`bubble ${styles.base} ${
|
|
selected ? styles.selected : styles.unselected
|
|
}`}
|
|
onClick={onSelect}
|
|
>
|
|
{label}
|
|
</span>
|
|
);
|
|
|
|
export default Bubble;
|