Added entity span

components/Group.tsx

@@ -3,6 +3,7 @@ import {FactorySelect} from "./FactorySelect";
 import {useDetails} from "../src/hooks/useDetails";
 import {Entity} from "../src/types";
 import styles from "./Group.module.css"
+import {EntitySpan} from "./EntitySpan";
 
 interface Props {
   onRemove: () => void
@@ -109,13 +110,12 @@ export const Group: FC<Props> = ({
           <h4>Inputs</h4>
           <ul>
             {
-              inputs.map(input => <li key={input}><a
-                href={'javascript:void(0)'}
+              inputs.map(input => <li key={input}><EntitySpan
+                value={input}
                 onClick={() => addIntermediateFactory(input)}
                 style={{color: basic.has(input) ? 'darkgreen' : exported.has(input) ? 'orange' : undefined}}
-              >
-                {input}
-              </a></li>)
+                leftClickText={"Add to intermediate factories"}
+              /></li>)
             }
           </ul>
         </div>
@@ -123,17 +123,16 @@ export const Group: FC<Props> = ({
           <h4>Suggestions</h4>
           <ul>
             {suggestions.map(suggestion => <li key={suggestion.href}>
-              <a
-                href={'javascript:void(0)'}
+              <EntitySpan
+                value={suggestion}
                 onClick={() => addOutputFactory(suggestion.href)}
                 onContextMenu={event => {
                   event.preventDefault()
                   onDoIgnore(suggestion.href)
                 }}
-                style={{color: basic.has(suggestion.href) ? 'darkgreen' : exported.has(suggestion.href) ? 'orange' : undefined}}
-              >
-                {suggestion.name}
-              </a>
+                leftClickText={"Add to output factories"}
+                rightClickText={"Exclude this recipe from suggestions"}
+              />
             </li>)}
           </ul>
         </div>