v3/packages/design-system/molecules/role-search/RoleSearch.tsx

import { Role } from '@roleypoly/design-system/atoms/role';
import { Space } from '@roleypoly/design-system/atoms/space';
import { TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
import { Role as RoleType } from '@roleypoly/types';
import Fuse from 'fuse.js';
import * as React from 'react';
import { GoSearch } from 'react-icons/go';
import styled from 'styled-components';

type Props = {
  roles: RoleType[];
  placeholder?: string;
  onSelect: (role: RoleType) => void;
  onSearchUpdate: (newTerm: string) => void;
  searchTerm: string;
};

export const RoleSearch = (props: Props) => {
  const fuse = new Fuse(props.roles, { includeScore: true, keys: ['name'] });
  const results =
    props.searchTerm !== ''
      ? fuse.search(props.searchTerm)
      : props.roles.map((role) => ({
          item: role,
        }));

  const handleClick = (role: RoleType) => () => {
    props.onSelect(role);
  };

  return (
    <div>
      <TextInputWithIcon
        icon={<GoSearch />}
        placeholder={props.placeholder || 'Search or drag a role...'}
        value={props.searchTerm}
        onChange={(x) => props.onSearchUpdate(x.target.value)}
      />
      <Space />
      {results.map((resultRole, idx) => (
        <RoleInliner key={idx}>
          <Role
            selected={false}
            role={resultRole.item}
            onClick={handleClick(resultRole.item)}
            key={`${idx}role`}
          />
        </RoleInliner>
      ))}
    </div>
  );
};

const RoleInliner = styled.div`
  display: flex;
  margin: 5px 0;
`;