44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { FC, HTMLProps, useMemo } from 'react'
|
|
import { Entity } from '../../../src/types'
|
|
import styles from './EntityIcon.module.css'
|
|
import cx from 'classnames'
|
|
import { useFactories } from '../../contexts/FactoryProvider'
|
|
|
|
interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
|
|
value: Entity | string
|
|
amount?: number
|
|
}
|
|
|
|
export const EntityIcon: FC<Props> = ({ className, value, amount, ...rest }) => {
|
|
const { findFactory } = useFactories()
|
|
const entity = useMemo<Entity>(() => {
|
|
return typeof value === 'object'
|
|
? value
|
|
: value === '/Time'
|
|
? {
|
|
href: '/Time',
|
|
name: 'Time',
|
|
image: '/images/Time.png',
|
|
recipe: undefined
|
|
}
|
|
: findFactory(value) ?? {
|
|
href: value,
|
|
name: value,
|
|
image: value,
|
|
recipe: undefined
|
|
}
|
|
}, [findFactory, value])
|
|
|
|
return (
|
|
<span {...rest} className={cx(className, styles.span)} title={entity.name}>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
className={cx(styles.img, amount === undefined ? styles.noAmount : undefined)}
|
|
src={`https://wiki.factorio.com${entity.image}`}
|
|
alt={entity.name}
|
|
/>
|
|
{amount !== undefined && <span className={styles.amount}>{amount}</span>}
|
|
</span>
|
|
)
|
|
}
|