resources/js/components/common/ZeldaIcon.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { useTranslation } from 'react-i18next';
   4
   5 import Icon from './Icon';
   6
   7 const getIconURL = name => {
   8         switch (name) {
   9                 case 'big-key':
  10                 case 'blue-boomerang':
  11                 case 'blue-mail':
  12                 case 'blue-pendant':
  13                 case 'blue-potion':
  14                 case 'bombos':
  15                 case 'bomb':
  16                 case 'book':
  17                 case 'boots':
  18                 case 'bottle-bee':
  19                 case 'bottle':
  20                 case 'bow':
  21                 case 'bugnet':
  22                 case 'byrna':
  23                 case 'cape':
  24                 case 'compass':
  25                 case 'crystal':
  26                 case 'duck':
  27                 case 'ether':
  28                 case 'fairy':
  29                 case 'fighter-shield':
  30                 case 'fire-rod':
  31                 case 'fire-shield':
  32                 case 'flippers':
  33                 case 'flute':
  34                 case 'glove':
  35                 case 'green-mail':
  36                 case 'green-pendant':
  37                 case 'green-potion':
  38                 case 'hammer':
  39                 case 'heart-container':
  40                 case 'heart-piece':
  41                 case 'hookshot':
  42                 case 'ice-rod':
  43                 case 'lamp':
  44                 case 'map':
  45                 case 'mirror':
  46                 case 'mirror-shield':
  47                 case 'mitts':
  48                 case 'moonpearl':
  49                 case 'mushroom':
  50                 case 'powder':
  51                 case 'quake':
  52                 case 'red-bomb':
  53                 case 'red-boomerang':
  54                 case 'red-mail':
  55                 case 'red-pendant':
  56                 case 'red-potion':
  57                 case 'shovel':
  58                 case 'silvers':
  59                 case 'small-key':
  60                 case 'somaria':
  61                         return `/item/${name}.png`;
  62                 default:
  63                         return '';
  64         }
  65 };
  66
  67 const ZeldaIcon = ({ name }) => {
  68         const { t } = useTranslation();
  69
  70         const invert = name.startsWith('not-');
  71         const strippedName = invert ? name.substr(4) : name;
  72         const title = t(`icon.zelda.${name}`);
  73
  74         return <span className="zelda-icon">
  75                 <img
  76                         alt={title}
  77                         src={getIconURL(strippedName)}
  78                         title={title}
  79                 />
  80                 {invert ?
  81                         <span className="strike">
  82                                 <Icon.SLASH title="" />
  83                         </span>
  84                 : null}
  85         </span>;
  86 };
  87
  88 ZeldaIcon.propTypes = {
  89         name: PropTypes.string,
  90 };
  91
  92 export default ZeldaIcon;