resources/js/components/tracker/Items.js

   1 import React from 'react';
   2
   3 import CountDisplay from './CountDisplay';
   4 import ToggleIcon from './ToggleIcon';
   5 import { useTracker } from '../../hooks/tracker';
   6
   7 const Items = () => {
   8         const { state } = useTracker();
   9
  10         return <div className="items">
  11                 <div className="item">
  12                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} />
  13                 </div>
  14                 <div className="item">
  15                         <ToggleIcon
  16                                 className="left"
  17                                 controller={ToggleIcon.simpleController}
  18                                 icons={['blue-boomerang']}
  19                         />
  20                         <ToggleIcon
  21                                 className="right"
  22                                 controller={ToggleIcon.simpleController}
  23                                 icons={['red-boomerang']}
  24                         />
  25                 </div>
  26                 <div className="item">
  27                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} />
  28                 </div>
  29                 <div className="item">
  30                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} />
  31                 </div>
  32                 <div className="item">
  33                         <ToggleIcon
  34                                 className="bottom-left"
  35                                 controller={ToggleIcon.simpleController}
  36                                 icons={['mushroom']}
  37                         />
  38                         <ToggleIcon
  39                                 className="top-right"
  40                                 controller={ToggleIcon.simpleController}
  41                                 icons={['powder']}
  42                         />
  43                 </div>
  44                 <div className="item">
  45                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} />
  46                 </div>
  47                 <div className="item">
  48                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} />
  49                 </div>
  50                 <div className="item">
  51                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} />
  52                 </div>
  53                 <div className="item">
  54                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} />
  55                 </div>
  56                 <div className="item">
  57                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} />
  58                 </div>
  59                 <div className="item">
  60                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} />
  61                 </div>
  62                 <div className="item">
  63                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} />
  64                 </div>
  65                 <div className="item">
  66                         <ToggleIcon
  67                                 className="bottom-left"
  68                                 controller={ToggleIcon.simpleController}
  69                                 icons={['shovel']}
  70                         />
  71                         <ToggleIcon
  72                                 className="top-right"
  73                                 controller={ToggleIcon.simpleController}
  74                                 icons={['flute', 'duck']}
  75                         />
  76                 </div>
  77                 <div className="item">
  78                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} />
  79                 </div>
  80                 <div className="item">
  81                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} />
  82                 </div>
  83                 <div className="item">
  84                         <ToggleIcon controller={ToggleIcon.countController(4)} icons={['bottle']} />
  85                         <CountDisplay className="bottom-right" count={state.bottle || 0} />
  86                 </div>
  87                 <div className="item">
  88                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />
  89                 </div>
  90                 <div className="item">
  91                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} />
  92                 </div>
  93                 <div className="item">
  94                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} />
  95                 </div>
  96                 <div className="item">
  97                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} />
  98                 </div>
  99         </div>;
 100 };
 101
 102 export default Items;