import React from 'react' ; import styles from '../../styles/Pills.module.css' ; import { useRef } from 'react' ; type ActionButtons = { keydownStart : ( ) => void ; keyupStart : ( ) => void ; keydownSelect : ( ) => void ; keyupSelect : ( ) => void ; keydownRom : ( ) => void ; keyupRom : ( ) => void ; } ; type Props = { onChange : ( file : File ) => void ; } ; export const Pills = React . forwardRef < ActionButtons , Props > ( ( props , ref ) => { const start = useRef < HTMLDivElement > ( ) ; const select = useRef < HTMLDivElement > ( ) ; const rom = useRef < HTMLDivElement > ( ) ; React . useImperativeHandle ( ref , ( ) => ( { keydownStart ( ) { start . current . classList . add ( styles [ 'active' ] ) ; } , keyupStart ( ) { start . current . classList . remove ( styles [ 'active' ] ) ; } , keydownSelect ( ) { select . current . classList . add ( styles [ 'active' ] ) ; } , keyupSelect ( ) { select . current . classList . remove ( styles [ 'active' ] ) ; } , keydownRom ( ) { rom . current . classList . add ( styles [ 'active' ] ) ; } , keyupRom ( ) { rom . current . classList . remove ( styles [ 'active' ] ) ; } , } ) ) ; return ( < div className = { styles [ 'pill-buttons' ] } > < div ref = { select } className = { styles [ 'pill-button' ] } > < label className = "select" > SELECT < /label> < /div> < div ref = { start } className = { styles [ 'pill-button' ] } > < label className = "start" > START < /label> < /div> < div ref = { rom } className = { styles [ 'cart-button' ] } > < input id = "ines" type = "file" accept = ".nes" onChange = { ( e ) => { props . onChange ( e . target . files [ 0 ] ) ; } } hidden / > < label className = "rom" htmlFor = "ines" > ROM < /label> < /div> < /div>); } ) ;