diff options
Diffstat (limited to 'frontend/src/Hub.js')
| -rw-r--r-- | frontend/src/Hub.js | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/frontend/src/Hub.js b/frontend/src/Hub.js new file mode 100644 index 0000000..982ffee --- /dev/null +++ b/frontend/src/Hub.js @@ -0,0 +1,26 @@ +// React import +import { useState } from "react"; + +/** + * Componenet for checkins. Has a toggle to show more info. + * @param {Object} props The props of the component. + * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info. + */ +function Hub(props) { + // State - toggled + const [isToggled, setIsToggled] = useState(false); + + return ( + <li className='Checkin'> + <div className="Img-flex"> + <span><span className="Clickable-name" onClick= {(e) => console.log(props.name)}>{props.name}</span> has {props.value}</span> + <img className="Img-btn" hidden={isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_more_white_18dp.png" alt="image"/> + <img className="Img-btn" hidden={!isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_less_white_18dp.png" alt="image"/> + </div> + <div hidden={!isToggled}> + Testing field... + </div> + </li>); +} + +export default Hub;
\ No newline at end of file |