38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import './FactoidWidget.scss';
|
|
import { IFactoid } from '../../../../services/service-types/FactoidTypes';
|
|
|
|
export interface IFactoidWidgetProps {
|
|
factoid: IFactoid;
|
|
isWidgetSelected: boolean;
|
|
}
|
|
|
|
const FactoidWidget: React.FC<IFactoidWidgetProps> = (props) => {
|
|
const factoid = props.factoid;
|
|
return (
|
|
<div className={'factoid-widget card' + (props.isWidgetSelected ? ' widget-selected' : '')} data-test="factoid-card">
|
|
<div>
|
|
<div className="factoid-main-body container">
|
|
<div className="row h-100 justify-content-center align-items-center">
|
|
<div className="col-6">
|
|
<h1 className="factoid-icon" aria-hidden="true">
|
|
<i className={'fa ' + factoid.fontAwesomeIcon} data-test="font-awesome-icon"></i>
|
|
</h1>
|
|
</div>
|
|
<div className="col-6">
|
|
<h3 data-test="factoid-value">{factoid.cumulativeValue}</h3>
|
|
<p data-test="factoid-name">{factoid.name}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul className="list-group list-group-flush">
|
|
<li className="list-group-item">
|
|
<p data-test="factoid-description">{factoid.description}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FactoidWidget; |