src/components/GirlsHooHack2023/Prizes/PrizeItem.tsx
import { useState } from 'react';
import { Col, Row } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { faMinus } from '@fortawesome/free-solid-svg-icons'
import { Collapse } from 'react-collapse';
import { isMobile } from 'react-device-detect';
interface Props {
key: string;
name: string;
object: string;
detail: string;
}
function PrizeItem(props: Props): JSX.Element {
const [dropdownOpen, setDropdownOpen] = useState(false);
if(isMobile) {
return (
<div className="mt-4">
<Row>
<Col xs={9} className="d-flex justify-content-start">
<h3 className="mono font-weight-bold">{props.name}</h3>
{/* <h4 className="mono font-weight-bold">{props.object}</h4> */}
</Col>
<Col xs={2} className="d-flex justify-content-end ml-3">
<div onClick={() => setDropdownOpen(!dropdownOpen)}
aria-controls="collapse-prizes" aria-expanded={dropdownOpen}>
{dropdownOpen ? <FontAwesomeIcon icon={faMinus}></FontAwesomeIcon> :
<FontAwesomeIcon icon={faPlus}></FontAwesomeIcon>}
</div>
</Col>
</Row>
<Collapse isOpened={dropdownOpen}>
<p className="font-italic">{props.object}</p>
<p>{props.detail}</p>
</Collapse>
</div>
);
} else {
return (
<Col xs={4} className="mb-4">
<h4 className="hack">{props.name}</h4>
<p className="font-italic">{props.object}</p>
<p>{props.detail}</p>
</Col>
);
}
}
export default PrizeItem;