junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added no measure selected styling

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2023-07-28 09:13:16 +01:00
parent e4f29efbd2
commit 0219862a05
1 changed files with 42 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/app/components/building-passport/RecommendationCard.tsx
View file

@ -163,6 +163,11 @@ export function RecommendationModal({
);
}
const selectionStyling =
"shadow active:shadow active:bg-brandmidblue w-full border rounded p-4 cursor-pointer text-gray-900 bg-gray-100 hover:bg-hoverblue hover:text-gray-100 transition-colors rounded-md flex flex-col justify-start";
const noSelectionStyling =
"shadow active:shadow active:bg-brandmidblue w-full border rounded p-4 cursor-pointer text-gray-300 bg-white hover:bg-hoverblue hover:text-gray-100 transition-colors rounded-md flex flex-col justify-start";
export default function RecommendationCard({
componentType,
recommendationData,
@ -181,36 +186,51 @@ export default function RecommendationCard({
return (
<div
className="shadow active:shadow active:bg-brandmidblue w-full border rounded p-4 cursor-pointer text-gray-900 bg-gray-50 hover:bg-hoverblue hover:text-gray-100 transition-colors rounded-md flex flex-col justify-start"
className={cardComponent ? selectionStyling : noSelectionStyling}
onClick={() => {
setModalIsOpen(true);
}}
>
<h2 className="font-bold mb-4 text-lg">{componentType}</h2>
<div className="mb-3">{cardComponent.description}</div>
<div className="text-blue-500 hover:text-blue-300">
Click for more options
<div className="mb-3">
{cardComponent ? (
cardComponent.description
) : (
<div className="text-red-500">No measure selected</div>
)}
</div>
<table className="w-full text-left">
<tbody>
<tr>
<td className="font-medium">Estimated Cost:</td>
<td>{"£" + formatNumber(cardComponent.estimatedCost)}</td>
</tr>
{cardComponent.newUValue && (
<div className="text-blue-500 hover:text-blue-300">
{cardComponent ? "Click for more options" : "Click to select"}
</div>
{cardComponent ? (
<table className="w-full text-left">
<tbody>
<tr>
<td className="font-medium">New U-Value:</td>
<td>{cardComponent.newUValue}</td>
<td className="font-medium">Estimated Cost:</td>
<td>
{cardComponent
? "£" + formatNumber(cardComponent.estimatedCost)
: ""}
</td>
</tr>
)}
{cardComponent.sapPoints && (
<tr>
<td className="font-medium">SAP Points:</td>
<td>{cardComponent.sapPoints}</td>
</tr>
)}
</tbody>
</table>
{cardComponent.newUValue && (
<tr>
<td className="font-medium">New U-Value:</td>
<td>{cardComponent.newUValue}</td>
</tr>
)}
{cardComponent.sapPoints && (
<tr>
<td className="font-medium">SAP Points:</td>
<td>{cardComponent.sapPoints}</td>
</tr>
)}
</tbody>
</table>
) : (
""
)}
<RecommendationModal
title={componentType}
isOpen={modalIsOpen}